react-native-pager-view icon indicating copy to clipboard operation
react-native-pager-view copied to clipboard

Keyboard Aware Scroll View not working if inside Pager View

Open srymarz opened this issue 3 years ago • 0 comments

Keyboard Aware Scroll View is not working inside Pager View

Hi, I have trouble when I use KASV inside Pager View. I have component using Pager View. Inside pager view I have another component (link.component).

<PagerView
        ref={pagerRef}
        initialPage={0}
        onPageSelected={onPageSelected}
        orientation="horizontal"
        style={[flex: 1, { height }]}>
        {links.map((link, index) => {
          return (
            <View key={index} collapsable={false}>
              {link.isScrollable ? (
                <ScrollView
                  style={[styles.container, { width }]}
                  showsVerticalScrollIndicator={false}
                  keyboardShouldPersistTaps="handled"
                  keyboardDismissMode="on-drag"
                  contentContainerStyle={styles.scrollViewContainer}>
                  {link.component}
                </ScrollView>
              ) : (
                link.component
              )}
            </View>
          );
        })}
      </PagerView>

and the link.component looks more or less like:

<KeyboardAwareScrollView
      enableOnAndroid={true}
      enableAutomaticScroll={true}
      keyboardOpeningTime={Number.MAX_SAFE_INTEGER}
      extraScrollHeight={KEYBOARD_AWARE_HEIGHT.extraScrollHeight}
      keyboardDismissMode="on-drag"
      contentContainerStyle={styles.scrollViewContentContainer}
      keyboardShouldPersistTaps="handled"
      style={[{ minWidth: width }, styles.container]}>
      <Text style={[Styles.labelText, Styles.fontBold, styles.label]}>
        AAAA
      </Text>
      <TextInput/>
      <TextInput/>
      <TextInput/>
      <TextInput/>
      <TextInput/>
      <TextInput/>
    </KeyboardAwareScrollView> 

I observe two situations:

  1. when I put height to Pager View style style={[flex: 1, { height }]} I can tap once in TextInput to show keyboard, but KeyboardAwareScrollView don't scroll to TextInput (show TI above keyboard). It seems KeyboardAwareScrollView doesn't work at all.
  2. when I don't put height to Pager View style style={[flex: 1]} In this case I have to tap twice in TextInput to focus it and show keyboard, but in this case KeyboardAwareScrollView working properly and scrolling focused TextInput above keyboard.

Is this possible to work correctly Pager View and KeyboardAwareScrollView together? As I know KeyboardAwareScrollView need style={flex: 1} in parent component.

srymarz avatar Jan 19 '22 15:01 srymarz