React-native-keyboard-aware-scroll-view: Attach sticky button to footer

Created on 8 Jul 2017  路  2Comments  路  Source: APSL/react-native-keyboard-aware-scroll-view

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:

simulator screen shot jul 8 2017 3 42 04 pm

How can I accomplish what I'm looking for?

Most helpful comment

you should select platform is android or ios:
...Platform.select({
android: {
},
ios: {
position: 'absolute',
bottom: 0
}
})

All 2 comments

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

Was this page helpful?
0 / 5 - 0 ratings