CODEWITHSUNDEEP
javascriptreact-nativekeyboardandroid-softkeyboardsoft-keyboard
Yaswanth Mamidisetti
Yaswanth Mamidisetti

Reputation: 1

keyboardAvoidingView keyboard Top white space is not removed in React native code

I am trying to remove white space is present in the keyboard is open while running react native code i already tried to use "adjustResize" ,"adjustPan","adjustNothing" in AndroidManifest.Xml file and keyboardVerticalOffset aslo give based on plateform.Select and behaviour also given padding , height these are i am trying to remove my code .Above code and styling i am using ,please find the issue and solve my QuestionEmulatorImage KeyboardIssue

    <SafeAreaView
      style={{
        backgroundColor: 'white',
        height: windowHeight,
      }}>
 <LinearGradient
        colors={['#234590', '#0093ad', 'white', 'white']}
        locations={[0, 0.1, 0.2, 0.5]}>
      <View
        style={{
          backgroundColor: 'white',
          marginTop: windowHeight * 0.065,
          // height: windowHeight - (windowHeight * 0.065) - (windowWidth * 0.042),
          borderTopRightRadius: windowHeight * 0.032,
          borderTopLeftRadius: windowHeight * 0.032,
          padding: windowWidth * 0.042,
        }}>
        <KeyboardAvoidingView
          enabled
          keyboardVerticalOffset={Platform.select({ios: 80, android: 100})}
          behavior={Platform.OS === 'ios' ? 'padding' : null}>
          <ScrollView>
            <View
              style={{
                borderRadius: TextFieldCornerRadius,
                height: TextFieldHeight,
                borderColor: '#d9d9d9',
                backgroundColor: 'white',
                borderWidth: 1,
                flexDirection: 'row',
                justifyContent: 'space-between',
              }}>
              <TextInput
                style={{
                  paddingLeft: windowWidth * 0.03,
                  paddingRight: windowWidth * 0.03,
                  paddingVertical: 0,
                  flex: 1,
                  fontSize: TextFieldFontSize,
                }}
              />
            </View>
          </ScrollView>
        </KeyboardAvoidingView>
      </View>
 </LinearGradient>
    </SafeAreaView>;

Upvotes: 0

Views: 1396

Answers (1)

Sadia Chaudhary
Sadia Chaudhary

Reputation: 177

Using KeyboardAvoidingView, you can do this to avoid the input field being hidden issue.

<KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
        style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
 // your code here
</View>
<KeyboardAvoidingView/>

I have tested this with RN 0.70.5

Upvotes: 0

Related Questions