React Native keyboard pushes everything up and I have no control

Question

When the keyboard is open, I only want the comment input to move up, but everything moves up

export default function DetailsPage({ route, navigation }) {
  const { title, detail, degree } = route.params;
  const [comment, setComment] = useState("")
  return (
    <ScrollView style={{flex:1}}>
    <View style={{ height: responsiveHeight(100), paddingTop: StatusBar.currentHeight }} >
    
      <ImageBackground blurRadius={0} source={require('../assets/bgg.jpg')} resizeMode="cover" >
        <View style={{ height: responsiveHeight(35), borderWidth: 1 }}>
          <View style={{ width: responsiveWidth(80), height: responsiveHeight(15), justifyContent: 'space-around', alignSelf: 'center', marginTop: 40 }}>
            <Text style={{ fontFamily: 'Inter-Bold', fontSize: 18 }}>Example</Text>
            <Text numberOfLines={3} style={{ fontFamily: 'Roboto-Medium' }}></Text>
          </View>
        </View>
      </ImageBackground>


      <View style={{ paddingHorizontal: responsiveWidth(10), paddingVertical: responsiveWidth(10), height: responsiveHeight(65), borderWidth: 1, borderTopLeftRadius: 40, borderTopRightRadius: 40, marginTop: -responsiveHeight(10), backgroundColor: 'white' }}>
        <View style={{ height: responsiveHeight(50), borderWidth: 1 }}>
          <CommentCard></CommentCard>
        </View>
      </View>
      
      <KeyboardAvoidingView >
        <View style={{height:responsiveHeight(10),backgroundColor:'white'}}>
          <InputComp></InputComp>
        </View>
      </KeyboardAvoidingView>
      
    </View>
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

I tried "softwareKeyboardLayoutMode": "pan", solution I've tried KeyboardAvoidingView and KeyboardVerticalOffset everywhere but can't find a solution I tried scroll view with or without keyboard avoid view

Answer 1

You can try adding these three things to your code.

1. Add a KeyboardAvoidingView around the InputComp component.

2. Set the behavior property of KeyboardAvoidingView to "padding".

3. Set the style property of KeyboardAvoidingView to {height: Responsive height(10), background-color: 'white'}.

   export default function DetailsPage({ route, navigation }) {
   const { title, detail, degree } = route.params;
   const [comment, setComment] = useState("")
   return (
   
   
         
   
     
       Example
       
     
     
     
     
       
         
       
     
   
     
       
     
   
   
   
   );
   }
   
     const styles = StyleSheet.create({
     container: {
     flex: 1,
     backgroundColor: '#fff',
     alignItems: 'center',
     justifyContent: 'center',
   },
   });