maxs15 / react-native-modalbox

A <Modal/> component for react-native
MIT License
2.9k stars 505 forks source link

Stop modal sticking to top of keyboard on dismiss #233

Open jskidd3 opened 6 years ago

jskidd3 commented 6 years ago

How can I prevent the modal box from following they keyboard down when it is dismissed? I just want it to stay at the bottom of the screen.

  render() {
    return (
      <Modal keyboardTopOffset={200} backdropPressToClose={false} swipeToClose={false} style={[styles.modal, {backgroundColor: this.props.background}, this.props.rygo && styles.rygoTheme, !this.props.visible && { opacity: 0 }]} backdrop={false} position="bottom" ref="continue" easing={Easing.linear} animationDuration={200}>
        <View style={{ justifyContent: 'center', width: '100%', paddingHorizontal: 16, flex: 1 }}>
          <View style={[{ padding: 14, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }, this.props.rygo && styles.rygoThemeBtn ]}>
            <Animatable.View animation="pulse" iterationCount="infinite"><TouchableOpacity onPress={() => this.continue()}><LinearTextGradient style={{ fontSize: 16, fontFamily: 'Comfortaa-Bold', textAlign: 'center', lineHeight: 25 }} locations={[0, 0.5, 1]} colors={this.props.rygo && ['#7ba6d5', '#ee99b9', '#faf29a'] || ['#fff', '#fff', '#fff']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}>Continue ({ this.props.totalServices + ' route' + (this.props.totalServices != 1 && 's' || '') })</LinearTextGradient></TouchableOpacity></Animatable.View>
            <TouchableOpacity onPress={() => this.reset()}><Icon size={30} color={this.props.rygo && "#faf29a" || '#fff'} type="ionicon" name="ios-trash-outline" /></TouchableOpacity>
          </View>
        </View>
      </Modal>
    );
  }

Keyboard bug