Question 176962 in React native Question posted in
The official React Native documentation can be found here.

How can I use Scroll View & KeyboardAvoidingView together without the keyboard covering the last data?

My code is below, I tried to use KeyboardAwareScrollView but that doesnt work for me in this case as it tries to scroll the input.

    import {
    View,
    Text,
    StyleSheet,
    KeyboardAvoidingView,
    Platform,
    TextInput,
    SafeAreaView,
    StatusBar
} from "react-native";
import { ScrollView } from "react-native-gesture-handler";
import COLORS from "./components/constants"

export default function App() {
  const messages = ["hello", "world", "okay","hello", "world", "okay", "hello", "world", "okay","hello", "world", "okay","hello","world", "okay","hello", "world", "okay","hello", "world", "okay","hello", "world", "okay","hello", "world", "okay","hello", "world", "okay","hello", "world", "okay","hello", "world", "okay","hello", "world", "okay", "hello", "world", "okay","hello", "world", "okay","hello","world", "okay","hello", "world", "okay","hello", "world", "okay","hello", "world", "okay","hello", "world", "okay","hello", "world", "okay","hello", "world", "okay", "Lewis" ]
  
  return (
    <SafeAreaView style={styles.containerSafeArea}>
    
          
            <View style={styles.container}>
              <ScrollView>
                {messages.map((msg, i) => {
                    if (msg) {
                        return (
                            <>
                                <Text key={i}>
                                  {msg}
                                </Text>
                            </>
                        );
                    }
                })}
                
              </ScrollView>
              <KeyboardAvoidingView
                behavior={Platform.OS === "ios" ? "padding" : "height"}
            >
              <View style={styles.inputContainer}>
                <TextInput 
                style={styles.textInput}
                label='What would you like to focus on?'   
                />       
              </View>  
              
              </KeyboardAvoidingView>  
            </View>
        
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  containerSafeArea: {
    flex: 1,
    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight:0,
    backgroundColor: COLORS.BACKGROUND
  },
  textInput:{
      flex: 1,
      marginRight:8,
      borderColor: "black",
      backgroundColor: "white",
      width: "80%",
      height: "100%",
      borderRadius: 1000,
      marginVertical: 10,
      paddingLeft: "5%",
      color: "black"
    },
  inputContainer: {
    padding:24,
    justifyContent: 'top',
    flexDirection: 'row'
    },
  container: {
    flex: 1
  },    
});

what happens is that the keyboaard pops up but it covers the last data from the scrollview and I do not want that, I’d like that the keyboard pushes the whole scroll view upwards

Snack:
This is the linkt to the snack for the above code

Tags:

2

Answers


  1. 0

    The KeyboardAvoidingView should wrap the ScrollView like this.

    <SafeAreaView style={styles.containerSafeArea}>
   <KeyboardAvoidingView
     behavior={Platform.OS === "ios" ? "padding" : "height"}
   >
      <View style={styles.container}>
         <ScrollView>
            {messages.map((msg, i) => {
               if (msg) {
                  return <Text key={i}>{msg}</Text>;
               }
               return null;
            })}
         </ScrollView>
         <View style={styles.inputContainer}>
            <TextInput 
               style={styles.textInput}
               label='What would you like to focus on?'   
            />       
         </View>  
      </View>
   </KeyboardAvoidingView>  
</SafeAreaView>

    You may also want to put the input components inside the ScrollView

    Login or Signup to reply.
  2. 0

    In your AndroidManifest.xml, check the tag activity, the value of key windowSoftInputMode should equal adjustResize in order to make your screen auto-resize when keyboard pushes up.

     <activity android:name=".MainActivity"
        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
            android:exported="true"
            android:label="@string/app_name"
            android:launchMode="singleTask"
            android:windowSoftInputMode="adjustResize">

    Hope that might helps

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search