I'm trying to make my Modal slide up and bounce on button click, but it's not working when I wrap the Modal into an Animated.View ponent. It's only sliding up because of the animationType prop but afterwards nothing happens. Any ideas?

   //in render() function
   <Animated.View
    style={{
      flex: 1,
      transform: [                        // `transform` is an ordered array
        { scale: this.state.bounceValue },  // Map `bounceValue` to `scale`
      ],
    }}
    >
      <Modal
        animationType={"slide"}
        transparent={true}
        visible={this.state.modalVisible}
      >
       <View style={styles.modalContainer}>
        <View style={styles.modalInnerContainer}>
          <ListView
            dataSource={this.state.dataSource}
            renderRow={this.renderRow}
          />
        </View>
       </View>
      </Modal>
    </Animated.View>


// onPress function
_onSelectFilter(rowID) {
 if (this.state.modalVisible) {
   this.state.bounceValue.setValue(2);
   Animated.spring(
       this.state.bounceValue,
     {
       toValue: 0.8,
       friction: 1,
     }
     ).start();
  }
}

I'm trying to make my Modal slide up and bounce on button click, but it's not working when I wrap the Modal into an Animated.View ponent. It's only sliding up because of the animationType prop but afterwards nothing happens. Any ideas?

   //in render() function
   <Animated.View
    style={{
      flex: 1,
      transform: [                        // `transform` is an ordered array
        { scale: this.state.bounceValue },  // Map `bounceValue` to `scale`
      ],
    }}
    >
      <Modal
        animationType={"slide"}
        transparent={true}
        visible={this.state.modalVisible}
      >
       <View style={styles.modalContainer}>
        <View style={styles.modalInnerContainer}>
          <ListView
            dataSource={this.state.dataSource}
            renderRow={this.renderRow}
          />
        </View>
       </View>
      </Modal>
    </Animated.View>


// onPress function
_onSelectFilter(rowID) {
 if (this.state.modalVisible) {
   this.state.bounceValue.setValue(2);
   Animated.spring(
       this.state.bounceValue,
     {
       toValue: 0.8,
       friction: 1,
     }
     ).start();
  }
}

• javascript
• ios
• animation
• reactjs
• react-native

1 Answer 1

It's not entirely clear in the docs, but <Modal/> in React Native is contained in a native-level view separate from your main React Native container. This means you don't have much control over it.

If you need additional control, you'll need to use a top-level view and not <Modal/>.

If your app is simple, you can simply add a view with absolute positioning at the root level.

// Modal content goes inside here
<View style={{position: 'absolute', top: 0, right: 0, bottom: 0, left: 0}}>
</View>

With more plex apps, you might want to integrate this into your Navigation strategy.