How to load Lottie Animation inside a function in React Native?

Question

My idea is something similar to the "instagram like", when you click it, it should render a heart animation

My code: when you click in the heart button, it calls the "changeFavorite" function, which will set 'favorite = true' in the API and also renders the animation. It updates the API, but doesn't return the JSX with Lottie Animation

//Like Button

<TouchableOpacity onPress={changeFavorite} style={{borderRadius: 50, marginRight: 16, marginTop: 16}}>
       <MaterialIcons name="favorite" size={30}  color={favorito == 1 ? 'red' : '#fff'}/></TouchableOpacity>

//changeFavorite

async function changeFavorite() {
        try {
            await api.put(`favoritos/${local.id}`, {
                local_id: local.id
            }).then(res => {
                setFavorito(res.data)
                if(favorito === 0) {
                    console.log("like")
                    return (
                        <View style={{flex: 1, height: 300, width: 300, position:"absolute"}}>
                            <LottieView
                            source={require('../../assets/heart.json')}    
                            resizeMode="cover"
                            autoPlay
                            />
                        </View>
                    )
               }
                else {
                    console.log("deslike")
                }
            })
        } catch (error) {
            console.log(error)
        }        
}

sorry for the mistake in the question, React Native doesnt work with JSX — Anderson Alex Durante, May 07 '20 at 22:22
Please show me your complete component since I am not been able to see where this returned component will be used. — Waheed Akhtar, May 07 '20 at 23:13

score 0 · Answer 1 · answered May 24 '20 at 11:55

0

Set reference to your Lottie.

export default class App extends Component {

  changeFavorite = () => {
    this.Lottie.play();       //play it inside your function call
  };

  render() {
    return (
      <LottieView
        autoPlay={false}
        loop={false}
        ref={(e) => {
          this.Lottie = e;     //set a reference variable
        }}
        ...
      />
    );
  }
}

answered May 24 '20 at 11:55

Aswin C

1,152
7
12

This is a class. The question specifically asks about a function. – Aaron Harker Aug 08 '21 at 11:11

How to load Lottie Animation inside a function in React Native?

1 Answers1