CODEWITHSUNDEEP
javascriptreact-nativereact-native-ios
Bruno Cardoso
Bruno Cardoso

Reputation: 49

React Native ViewPager with a KeyboardAvoidingView as parent doesn't keep the keyboard up - iOS

When I use the ViewPager from react-native-community/viewpager with a KeyboardAvoidingView and the style of ViewPager is flex:1 and the behaviour of KeyboardAvoidingView is padding the keyboard can't keep up.

<KeyboardAvoidingView style={{flex: 1}} behavior="padding">
    <ViewPager
      {...viewPagerProps}
      ref={viewPagerRef}
      scrollEnabled={false}
      keyboardDismissMode="on-drag"
      style={[{flex: 1, borderWidth: 1, borderColor: 'red'}, style]}
      onPageScroll={Animated.forkEvent(onPageScroll, _onPageScroll)}
    />
    {_renderBottomControls()}
  </KeyboardAvoidingView>

_renderBottomControls()

<SafeAreaView style={{flexDirection: 'row', justifyContent: 'space-between', padding: 8}}>
    <Transitioning.View
      transition={transition}
      ref={transitionBackButtonRef}>
      {currentPage !== 0 && (
        <Button mode="text" compact onPress={_onPressPrevious}>
          Voltar
        </Button>
      )}
    </Transitioning.View>

    <Button mode="contained" disabled={!isValid} onPress={_onPressNext}>
      {isLastPage ? 'Concluir' : 'Continuar'}
    </Button>
  </SafeAreaView>

GIF showing de issue

Upvotes: 3

Views: 744

Answers (1)

delavago1999
delavago1999

Reputation: 254

The fix for this was not obvious and I hope the developers will put this in the documentation

The view pager needs to be position absolute

<ViewPager style={{position: 'absolute'}}/>

Also if the screen is now being hiden by the keyboard, wrap the viewpager in a KeyboardAvoidingView

Upvotes: 2

Related Questions