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

[ghost]

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

[nasimoyz]

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

[ghost]

@nasimoyz thank you for your help, I tried it but always it let 20 or 30 px from the bottom and when I delete the <KeyboardAwareScrollView> my footer is positioned in the end of the page as I want .

[IgorVanian]

Having the exact same problem. I have a <Swiper> inside <KeyboardAwareScrollView> and flex: 1 causes bottom padding of the root view of the swiper, which makes the page scroll without having anything to scroll for...

[IgorVanian]

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

[ghost]

@IgorVanian Thank you for your response, I did this <KeyboardAwareScrollView automaticallyAdjustContentInsets={ true }> but persist the same problem.

[IgorVanian]

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

[ghost]

@IgorVanian but with solution when you press to input , the keyboard displayed and the footer also ascend :( , but I want when the keyboard display , the footer rest under the keyboard.

[Matus-Stastny]

I have the same issue and I tried everything that was mentioned here.

[ghost]

@Matus-Stastny But I want when the keyboard dispaly , the footer (the blue view in your example ) rest under the keyboard and not displayed.

[alvaromb]

There's a prop to handle extra padding in the bottom: extraHeight (https://github.com/APSL/react-native-keyboard-aware-scroll-view#props)

Please try to adjust that to the size of your text input.

[ghost]

@alvaromb How exactly to do it ? I tried to add extraHeight prop to <KeyboardAwareScrollView> but nothing change .

[Matus-Stastny]

I was able to solve my issue using react-native-keyboard-spacer. This is simplified render function of my ChatContainer:

<View style={ styles.container }>
  <ChatHeader />
  <ChatHistory />
  <ChatFooter />
  { Platform.OS === 'ios' ? <KeyboardSpacer /> : null }
</View>

Android is solving this automatically, so KeyboardSpacer is not needed.

[ghost]

@Matus-Stastny I test with android device but it not solved my problem , always the footer positioned 20 or 30 px from the bottom .

[alvaromb]

@Johnba1988 can't help without seeing any source code...

[ghost]

@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.

[danwoodbury]

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?

[skaptox]

@danwoodbury

According to #99

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

[prescindivel]

Thanks @skaptox, works for me!!

[mdtechcs]

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

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