0

So I have this react native code where I centered multiple inputs inside view, when I click the lower located input my keyboard seems to overrun it so I cannot see what I'm typing on my iOS simulator (iPhone 14). The error seems to be on iOS only and Android is fine. note that I also have bottom Navigation bar.

https://ibb.co/sV0Xk9L


<SafeAreaView style={{ flex: 1}}>
{...}
  <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
    <View style={styles.profile_info}>
        <KeyboardAvoidingView behavior={'position'} keyboardVerticalOffset={dimensions.height < 668 && phoneSelected ? 120 : 40}>
         <ScrollView>
          <View>
             <Input />
           <View/>
           <View>
             <Input />
           <View/>
           <View>
             <Input />
           <View/>
         </ScrollView>
        </KeyboardAvoidingView>
      </View>
    </TouchableWithoutFeedback>
</SafeAreaView>

{ // styling below }

function getProfileStyles(theme) {
  return StyleSheet.create({
    profile_info: {
      flex: 1,
      marginHorizontal: 20,
      justifyContent: 'center',
    },
  });
}

I have tried using the solution found here https://stackoverflow.com/a/51169574/11288070 which uses @react-navigation/elements deps

import { useHeaderHeight } from '@react-navigation/elements'

something else that I do is changing from justifyContent to use topPadding: dimensions.height / 5 but it's not interactive.

Ilham Fadhil
  • 11
  • 4
  • I think they said that for ios keyboard avoiding view works best with padding. so you should change it to `behavior={Platform.OS == 'ios' ? 'padding':'position}`' – PhantomSpooks Dec 23 '22 at 02:38

1 Answers1

1

Use:

KeyboardAwareScrollView from "react-native-keyboard-aware-scroll-view"

library instead of KeyboardAvoidingView

Tyler2P
  • 2,324
  • 26
  • 22
  • 31
Ganesh tak
  • 19
  • 4