React Native Modal doesn't show animations

问题

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.

回答1:

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>

回答2:

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.');
          }}>

回答3:

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>
     );
   }
 }

来源：https://stackoverflow.com/questions/55648575/react-native-modal-doesnt-show-animations

标签

javascript

reactjs

react-native