简体   繁体   中英

Different behaviours between platforms in react-native-keyboard-aware-scroll-view

I have a problem with the library react-native-keyboard-aware-scroll-view .

I have configured in Android windowSoftInputMode="adjustPan" and I'm using enableOnAndroid and with the same code I have different behaviours when I use a fixed element at the bottom, outside the KeyboardAwareScrollView .

The problem is that in iOS I have an extra padding with the same heigth that the outside component.

This is my test code:

import React from 'react';
import {
  View,
  Text,
  TextInput,
} from 'react-native';
import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view'

const App = () => {
  return (
    <>
    <KeyboardAwareScrollView enableOnAndroid extraHeight={0}>
        <View style={{height: 600}}/>
        <TextInput 
        placeholder='hey' 
        style={{
          width: '100%',
          borderWidth: 1,
          height: 60
        }} />
    </KeyboardAwareScrollView>
    <View style={{backgroundColor: '#f0f', paddingVertical: 20, width: '100%'}}>
      <Text>Hello, I'm bottom View</Text>
    </View>
    </>
  );
};

export default App;

And this is the behaviour:

iOS

As you can see, height padding between TextInput and Keyboard is bigger than in Android and is exactly equal than bottom View height.

iOS

Android

安卓

How can I do to solve this? Thanks in advance:)

Tested on:

iOS: 12.2

Android: API 28

RN: 0.59.10 and 0.60.5

RNKASV: 0.9.1

Using extraScrollHeight in negative solved the problem.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM