I'm trying to attach a sticky button to the footer of my screen, but I'm having trouble doing it with position absolute.
Here's my current code:
render() {
<KeyboardAwareScrollView style={Styles.container}>
<View>
<TextInput
style={Styles.textInput}
placeholder="Username"
onChangeText={(username) => this.setState({ username })}
value={this.state.username}
/>
<TextInput
style={Styles.textInput}
placeholder="Email"
onChangeText={(email) => this.setState({ email })}
value={this.state.email}
/>
<TouchableOpacity style={Styles.submitButtonContainer}>
<Text>Done</Text>
</TouchableOpacity>
</View>
</KeyboardAwareScrollView>
}
const Styles = StyleSheet.create({
container: {
flex: 1,
},
textInput: {
backgroundColor: '#FFFFFF',
height: 40,
marginTop: 25,
marginHorizontal: 15,
borderRadius: 5,
borderWidth: 1,
borderColor: '#CCCCCC',
paddingHorizontal: 10,
},
submitButtonContainer: {
position: 'absolute',
bottom:0,
left:0,
right: 0,
backgroundColor: 'blue',
}
});
However, here is what it looks like:

How can I accomplish what I'm looking for?
It's not related to this lib specifically. If you want a fixed footer, check this
you should select platform is android or ios:
...Platform.select({
android: {
},
ios: {
position: 'absolute',
bottom: 0
}
})
Most helpful comment
you should select platform is android or ios:
...Platform.select({
android: {
},
ios: {
position: 'absolute',
bottom: 0
}
})