CODEWITHSUNDEEP
androidreact-native
JaeLeeSo
JaeLeeSo

Reputation: 263

KeyboardAvoidingView on Android creates a grey box above keyboard

I have a web view for my login form that I want to automatically scroll up when the keyboard is triggered without pushing my Text component up as well. Is there a way to have a component ignore the keyboard so it remains at the bottom beneath the keyboard while retaining that behavior?

The following is that code of what I have tried. It does push the view up and my text component stays at the bottom but I'm left with a grey box above my keyboard.

      <KeyboardAvoidingView
        style={{flex: 1}
        behavior={Platform.OS === 'ios' ? null : 'padding'}
        keyboardVerticalOffset={Platform.OS === 'ios' ? 0 : headerHeight - 10}> // if I do -200 it will remove the grey box but the view does not shift when the keyboard is toggled
        <ScrollView>
          <WebView
            automaticallyAdjustContentInsets={false}
            style={{flex: 1, alignSelf: 'stretch', width: Dimensions.get('window').width, height: Dimensions.get('window').height},}
            source={{ uri }}
          />
          <Text style={{position: 'absolute', left: 0, right: 0, textAlign: 'center', bottom: '5%', backgroundColor: 'white'},}>
            For more information:{' '}
            <Text
              style={{ color: 'blue' }}
              onPress={() =>
                Linking.openURL(redirectURI)
              }>
              Tap here!
            </Text>
          </Text>
        </ScrollView>
      </KeyboardAvoidingView>

How do I fix this?

Upvotes: 2

Views: 576

Answers (1)

Crystalii
Crystalii

Reputation: 197

Did you test putting the KeyboardAvoidingView inside the ScrollView?

Upvotes: 1

Related Questions