How to add Lottie animation in Alert in react native

Question

on sumit buttoe event i am calling below fuction,where i am opening one Alert and insid ethe alert I want opne LottieAnimation, like when I click on button first Alet will open with animation till the time response is coming, after getting the response I'll chnage animation ans close the Alert, normal alert is comign but with Animation nothin is coming. Please help. I have atteched image.

 blockSimNumber = async () => {
        {this.props.isWalletEnable &&
            Alert.alert(
               '
             <View style={{ height: deviceHeight, width: deviceWidth }}>
               <LottieView source={require('../animations/wallet.json')} autoPlay loop />
             </View>

            <View style={{ height: deviceHeight, width: deviceWidth }}>
                <LottieView source={require('../animations/success_tick.json')} autoPlay loop />
            </View>

                Hang on !',
               'We are creating your wallet for you',
               [
                 {
                   text: 'Close',
                   onPress: () => console.log('Cancel Pressed'),
                   style: 'Cancel',
                 },
               ]
             )
            }
                // <View style={{ height: deviceHeight, width: deviceWidth }}>
                //     <LottieView source={require('../animations/wallet.json')} autoPlay loop />
                // </View>
       

        await this.props.updatePhysicalResource(this.props.physicalResourceId);
    }

Answer 1

Just use a modal instead of an Alert Here's how to use a modal:

import { View, Modal } from 'react-native';
import LottieView from 'lottie-react-native'

[...]


    constructor(props) {
        super(props)

        this.state = {
            IsModalVisible: false
        }
    }


render(){
    return(
        <Modal
            animationType="fade"
            style={{flex: 1}}
            transparent={true}
            visible={this.state.IsModalVisible}
            onRequestClose={() => this.setState({IsModalVisible: false})}
        >
            <View style={{backgroundColor: 'white', justifyContent: 'center', alignItems: 'center', height: '40%', width: '90%'}}>
                <LottieView style={{height: '50%', width: '50%'}} source={require('../animations/success_tick.json')} autoPlay loop />
            </View>
        </Modal>

    )
}

Then just change the IsModalVisible value to true when you want to (This is just a example)