reactjs - Lottie Animation showing with no colour React Native

Question

I have Lottie React Native working perfectly in my project except for one minor issue. The colour of the animation is not appearing and I cannot seem to identify what the cause is here. The component is very simple

import React from 'react';
import {StyleSheet, View, Text} from 'react-native';

const styles = StyleSheet.create({
  text: {
    fontFamily: 'Roboto-Bold',
    fontSize: 18,
  },
});

export default (props) => {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text style={styles.text}>Login Screen</Text>
    </View>
  );
};

Can see here in this that the background of the animation is white when it should have a background colour set: https://lottiefiles.com/7825-money-transfer. Any thoughts/guidance is appreciated.

标签： reactjsreact-nativelottie

Answer 1

Here is the working example Snack link: https://snack.expo.io/@msbot01/forlorn-raspberries

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import LottieView from 'lottie-react-native';
 export default class NoNetwork extends Component {
    
   render() {
        return (
          <View style={{ flex: 1, backgroundColor:'green' }}>
            <LottieView source={require('./pay.json')} autoPlay loop />
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({});