React Native Modal doesn't show animations

Question

So in my App, I have a working Modal that shows if the visibility is set to true. It also closes correctly and everything works fine(except the bug where if you reload the emulator and the Modal is open it stays open and you can't close it).

I am using react-native-modal package.

My problem is that the animations don't work in the Modal. The "animationIn" prop doesn't show any change if I set the value for example to "slideInLeft" neither does the "animationOut" prop change anything.

Does anyone know why that could be?

      <View>
        <Modal
          isVisible={this.props.visible}
          onBackButtonPress={this.props.toggle}
          animationIn="slideInLeft"
          animationOut="slideOutRight"
        >
          <View style={modalStyle.container}>
            <View style={modalStyle.headerText}>
              <Text style={{ textAlign: "center", color: "black", 
                fontWeight:"bold" }}>
                Projectbrowser
              </Text>
            </View>

           { SOME MORE CODE IN BETWEEN HERE }

          </View>
        </Modal>
      </View>

I cut out some code to keep it simple. Any fixes and upvotes if you encountered the same issue are appreciated.

score 7 · Answer 1 · answered May 26 '20 at 11:15

make sure to set true to useNativeDriver props, Like this:

<View>
  <Modal
          isVisible={this.props.visible}
          onBackButtonPress={this.props.toggle}
          animationIn="slideInLeft"
          animationOut="slideOutRight"
          useNativeDriver={true} // try adding This line
        >
       <View style={modalStyle.container}>
          <View style={modalStyle.headerText}>
             <Text style={{ textAlign: "center", color: "black", 
                fontWeight:"bold" }}>
                Projectbrowser
             </Text>
          </View>

        { SOME MORE CODE IN BETWEEN HERE }

      </View>
  </Modal>
</View>

thanks buddy, my modal was appering with some jerk and lag and that fixed my issue — aliraza12636, Dec 09 '20 at 15:57

score 1 · Answer 2 · answered Apr 12 '19 at 10:13

1

You can use this line of code in this Modal..

animationType="slide"

This animation props will help to animate the modal view as Slide formate.

This is helping me, you can use this code like as

<Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
          }}>

answered Apr 12 '19 at 10:13

Mayank Garg

1,284
1
11
23

for some reason animationType works with slide but its not from the package so it slides in a black background and then my actual modal loads normal but very slow. animationType doesnt work for react-native-modal. – yesIamFaded Apr 12 '19 at 11:54
It might actually work because it slides in from bottom , but its very slow overall the modal comes like 5 seconds later but without the animationType its also slow so it might be due to the emulator bein slow. Thanks im gonna look deeper into it. – yesIamFaded Apr 12 '19 at 12:00
Simulator so that maybe why its so slow. – yesIamFaded Apr 16 '19 at 06:34
how this is not the default is beyond me fml man wasted an hour debugging my entire comp tree – darren z Jan 29 '23 at 00:55

score -1 · Answer 3 · edited Apr 16 '19 at 07:12

I'm sharing expo snack link here please check this one it's working. I have made a demo of your question.

Go through it and let me know. I have just changed your props in state and change its value based on TouchableOpacity.

https://snack.expo.io/SJepmJRtV

Example.js

  export default class App extends React.Component {
  constructor(props) {
  super(props);
  this.state = {visible:false,toggle:false}}
  render() {
    return (
      <View>
      <View>
        <Modal
          isVisible={this.state.visible}
          onBackButtonPress={this.state.toggle}
          animationIn="slideInLeft"
          animationOut="slideOutRight"
        >
          <View style={{width:100,height:200}}>
            <View style={{}}>
              <Text style={{ textAlign: "center", color: "black", 
                fontWeight:"bold" }}>
                Projectbrowser
              </Text>
            <TouchableOpacity style={{width:"10%",height:"10%",backgroundColor:"red",justifyContent:"center",alignItems:"center"}} onPress={()=>this.setState({visible:false})}>
      <Text>Press me</Text>
      </TouchableOpacity>
            </View>
          </View>
        </Modal>
      </View>
      <TouchableOpacity style={{width:"20%",height:"80%",bottom:150,alignItems:"center"}} onPress={()=>this.setState({visible:true})}>
      <Text>Press me</Text>
      </TouchableOpacity>
      </View>
     );
   }
 }

I only get rendered a white screen , the expo snack doesnt load for me. — yesIamFaded, Apr 12 '19 at 11:56
Expo still does not work neither does the Example work, anything I put in animationIn"or"Out just doesnt change anything. — yesIamFaded, Apr 16 '19 at 06:49

React Native Modal doesn't show animations

3 Answers3

Linked