APSL / react-native-keyboard-aware-scroll-view

A ScrollView component that handles keyboard appearance and automatically scrolls to focused TextInput.
MIT License
5.27k stars 646 forks source link

scrolling not working on android - ios works #522

Closed caiorrsdeg closed 2 years ago

caiorrsdeg commented 2 years ago

Here is the snippet

// this is a react navigation 6 modal

<KeyboardScroll
        showsVerticalScrollIndicator={false}
        ref={scrollRef}
        style={{ backgroundColor: theme.white, flexGrow: 1, flex: 1 }}
        contentContainerStyle={{ paddingVertical: 20 }}
        onScroll={onScroll}
        onStartShouldSetResponder={(e) => true}
        onResponderGrant={(e) => resetInactivity()}>

        // My code with some inputs

        </KeyboardScroll>

KeyboardScroll component code

import { KeyboardAwareScrollView, KeyboardAwareScrollViewProps } from "react-native-keyboard-aware-scroll-view";
import React, { forwardRef, useImperativeHandle, useRef } from "react";

import { Platform } from "react-native";

const KeyboardScroll: React.FC<KeyboardAwareScrollViewProps & { children?: React.ReactNode }> = (
  { children, ...props },
  ref: KeyboardAwareScrollView,
) => {
  const scrollRef = useRef<KeyboardAwareScrollView>(null);

  useImperativeHandle(ref, () => ({
    scrollToPosition: (x: number, y: number) => scrollRef.current?.scrollToPosition(x, y, true),
  }));

  return (
    <KeyboardAwareScrollView
      enableOnAndroid
      enableAutomaticScroll={Platform.OS === "ios"}
      keyboardOpeningTime={0}
      extraHeight={Platform.select({ android: 200 })}
      contentContainerStyle={{ padding: 20 }}
      showsVerticalScrollIndicator={false}
      keyboardShouldPersistTaps="handled"
      {...props}
      ref={scrollRef}>
      {children}
    </KeyboardAwareScrollView>
  );
};

export default forwardRef(KeyboardScroll);

I noticed that changing import { ScrollView } from "react-native"; to import { ScrollView } from "react-native-gesture-handler"; in KeyboardAwareScrollView.js it works. Will you move to gesture handler any time soon or do you know why is this issue happening?

package.json

"dependencies": {
    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/stack": "^6.0.11",
    "axios": "^0.24.0",
    "moment": "^2.29.1",
    "moment-timezone": "^0.5.34",
    "react": "17.0.2",
    "react-native": "0.66.4",
    "react-native-gesture-handler": "^2.1.0",
    "react-native-keyboard-aware-scroll-view": "^0.9.5",
    "react-native-modal": "^13.0.0",
    "react-native-pager-view": "^5.4.9",
    "react-native-reanimated": "^2.3.0",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.10.1",
    "react-native-splash-screen": "^3.3.0",
    "react-native-svg": "^12.1.1",
    "react-native-vector-icons": "^9.0.0",
    "react-native-webview": "^11.15.0",
    "vanilla-masker": "^1.2.0"
  },
koploop commented 2 years ago

Ensure you have config the 'AndroidManifest.xml' file according to the README !

caiorrsdeg commented 2 years ago

Ensure you have config the 'AndroidManifest.xml' file according to the README !

Sorry about that, I did not pay attention, it's working (I feel ashamed hahhaha)