React-native-pager-view: Can't Focus on TextInput

[thecodecafe]

Question

Please I just noticed something in my code using ViewPager, TextInput components blur immediately after focusing once inside the ViewPager.

Preview

Code

import ViewPager from '@react-native-community/viewpager'; ... <View style={[styles.container, style]} {...props}> {this.renderPills()} <View style={styles.tabContent}> <ViewPager ref={ref => (this.viewpager = ref)} initialPage={currentTab} style={[styles.viewPager]} onPageSelected={this.handleViewPagerPageSelect}> <View> <TextInput placeholder="Text Input"/> </View> </ViewPager> </View> </View> ...
Please will appreciate anyones help with this issue, it's becoming a blocker, thanks.

[troZee]

I have tested above code and it works fine:

[thecodecafe]

Thanks @troZee made me try something else, was able to fix it, it's a weird behaviour but setting a height and setting flex to undefined fixed it for me.

  import ViewPager from '@react-native-community/viewpager';
  ...
  handleTabContentOnLayout = (ev: LayoutChangeEvent) => {
    const {height} = ev.nativeEvent.layout;
    this.setState({height});
  };

  render() {
    const {style, children, currentTab, ...props} = this.props;
    const {height} = this.state;
    return (
      // Fills parent element with flex set to 1
      <View style={[styles.container, style]} {...props}>
        // Has a height of 64px
        {this.renderPills()}
        // Takes up remaining space with flex set to 1
        // onLayout, get it's height and save to state
        <View
          style={styles.tabContent}
          onLayout={this.handleTabContentOnLayout}>
          // Flex is set to undefined and height is set to the parent components height.
          // Gotten from onLayout, height is 0 initially
          <ViewPager
            ref={ref => (this.viewpager = ref)}
            initialPage={currentTab}
            style={[styles.viewPager, {height}]}
            onPageSelected={this.handleViewPagerPageSelect}>
            {children}
          </ViewPager>
        </View>
      </View>
    );
  }
...

Hope this helps anyone who encounters such a problem.

[brunocrpontes]

I'm facing this issue and @thecodecafe hint didn't work for me.

This error happens when view pager are wrapped by some <KeyboardAvoidView /> component and <ViewPager /> uses flex to define its size.

I haven't any clue about how implementation in iOS is done, but looks weird for me this kind of behaviour.

[badaz]

Facing the same problem, tried to remove the KeyboardAvoidingView and problem disappears, however I need the KeyboardAvoidingView, anyone has an idea on how to solve this problem without having to remove the KeyboardAvoidingView or having a fixed height?