douglasjunior / react-native-keyboard-manager

⚛ Library to prevent issues of keyboard sliding up and cover inputs on React-Native iOS projects.
https://www.npmjs.com/package/react-native-keyboard-manager
MIT License
934 stars 60 forks source link

Works incorrectly with two ScrollViews #91

Closed exzos28 closed 1 year ago

exzos28 commented 1 year ago

Works incorrectly with two ScrollViews

ScrollView
   ScrollView horizontal
     TextInput

With horizontal scroll:

https://user-images.githubusercontent.com/39951413/193257011-c4682938-b981-48d6-a0d3-a87294595568.mov

Without horizontal scroll:

https://user-images.githubusercontent.com/39951413/193257033-0ad5e0cb-5156-4c92-96aa-93676a135ac6.mov

My scroll component:

export const IQKeyboardManagerScrollView = ({
  children,
  contentContainerStyle,
  ...rest
}: ScrollViewProps) => {
  const onFocusEffect = useCallback(() => {
    if (Platform.OS === 'ios') {
      RNKeyboardManager.setEnable(true);
    }
    return () => {
      if (Platform.OS === 'ios') {
        RNKeyboardManager.setEnable(false);
      }
    };
  }, []);

  useFocusEffect(onFocusEffect);

  const insets = useSafeAreaInsets();

  return (
    <ScrollView
      contentContainerStyle={[
        {
          paddingBottom: insets.bottom,
        },
        styles.container,
        contentContainerStyle,
      ]}
      {...rest}>
      {children}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flexGrow: 1,
  },
});
douglasjunior commented 1 year ago

Unfortunately this can happen, it's how the IQKeyboardManager works.