maxs15 / maxs15/react-native-modalbox
Stop modal sticking to top of keyboard on dismiss
Open
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 2.9k
- Forks
- 496
- PR merge metrics
- No merged PRs in 30d
Description
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>
);
}

Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Modal usage shown in the issue, especially keyboardTopOffset={200} and position="bottom", and reproduce the dismissal behavior described by the attached GIF. Trace how the modal responds when the keyboard closes; done means a dismissed modal remains at the bottom of the screen instead of following the keyboard.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react-native
- Domain
- mobile
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100