react-native-keyboard-aware-scroll-view: Why flex style don't work ?

I did this <KeyboardAwareScrollView style={{flex:1}}> to get a page with footer at the end but it don’t work ,despite it work if i did <View style={{flex:1}}>.

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 19

Most upvoted comments

@kilaniba I think you need to apply it to its internal contentContainerStyle instead: <KeyboardAwareScrollView contentContainerStyle={{flex:1}}>

@danwoodbury

According to #99

<KeyboardAwareScrollView
  contentContainerStyle={{flexGrow: 1}}
>
   // children go here
</KeyboardAwareScrollView>

Im trying to achieve the same thing. I have it working OK with <KeyboardAwareScrollView contentContainerStyle={{flex:1}}>. my footer is in the correct place etc except I have lost the ability to scroll. is there any reason for this?

<KeyboardAwareScrollView
  contentContainerStyle={{flexGrow: 1}}
>
   // children go here
</KeyboardAwareScrollView>

has to be your root component if not then it wont work

@alvaromb , there is my code : <View style={{ flex: 1 }}> <KeyboardAwareScrollView contentContainerStyle={{flex:1}}> <TextInput style={{ width: 300, height: 60, marginTop: 20 }} value={this.state.Value} onChangeText={this.change} /> <Footer /> </KeyboardAwareScrollView> </View>

with this code the footer is positionned 20px from the bottom , and without KeyboardAwareScrollView it positionned in the end of page as I want.

automaticallyAdjustContentInsets={ true } just fixed that. You might try it.

@Johnba1988 it should be combined with the previous contentContainerStyle={{flex:1}}