React-native: About <ViewPagerAndroid> nested

[LiuCao]

react-native v0.27.2 :
ViewPagerAndroid nested , the inner ViewPagerAndroid content couldn't show 。
E.g :

<ViewPagerAndroid
    style={{flex:1,backgroundColor:'#FF0000'}}
    onPageSelected={(e)=>{}}
    keyboardDismissMode="on-drag">
    //===========outer View 1===========
    <View>
        <Text>Page 1</Text>
        <ViewPagerAndroid
            style={{flex:1,backgroundColor:'#FFFFFF'}}
            onPageSelected={(e)=>{}}
            keyboardDismissMode="on-drag">
            //===========inner View 1===========
            <View>
                <Text style={{color:'#000000'}}>Sub Page 1</Text>
            </View>
            //===========inner View 2===========
            <View>
                <Text style={{color:'#000000'}}>Sub Page 1</Text>
            </View>
        </ViewPagerAndroid>
    </View>
    //===========outer View 2===========
    <View>
        <Text>Page 2</Text>
    </View>
</ViewPagerAndroid>

The inner view couldn't show , but can be slide !

Thx!

[justinsacbibit]

I've only tested it on a single physical device, but calling .setPageWithoutAnimation(0) on the inner ViewPagerAndroid within a setTimeout after it mounts seems to fix the issue work as a workaround at the moment.

i.e.

componentDidMount () {
  setTimeout(() => {
    this.pager.setPageWithoutAnimation(0);
  }, 0);
}
render() {
  return (
    <ViewPagerAndroid
      style={{flex:1,backgroundColor:'#FF0000'}}
      onPageSelected={(e)=>{}}
      keyboardDismissMode="on-drag">
      //===========outer View 1===========
      <View>
          <Text>Page 1</Text>
          <ViewPagerAndroid
              ref={pager => this.pager = pager}
              style={{flex:1,backgroundColor:'#FFFFFF'}}
              onPageSelected={(e)=>{}}
              keyboardDismissMode="on-drag">
              //===========inner View 1===========
              <View>
                  <Text style={{color:'#000000'}}>Sub Page 1</Text>
              </View>
              //===========inner View 2===========
              <View>
                  <Text style={{color:'#000000'}}>Sub Page 1</Text>
              </View>
          </ViewPagerAndroid>
      </View>
      //===========outer View 2===========
      <View>
          <Text>Page 2</Text>
      </View>
    </ViewPagerAndroid>
  );
}

[chrisciszak]

I think there is some kind of defect which causes the inner ViewPagerAndroid not being shown on the initial render. However I noticed when I change the height of the element in my script editor, it re-renders the inner view correctly and is visible without problem. This is a nasty workaround but it's the only way I have managed to work around this issue.

In the inner ViewPagerAndroid add the following:
componentDidMount() { setInterval(() => this.setState({height: height, width: width}), 0); }

width and height is your desired dimension, however it must be different than what you pass to this component initially as obviously if you set it to the same values React will not re-render as the state would be already the same.

[scyankai]

+1

[Ehesp]

Also having this issue, @chrisciszak workaround works. More full example:

const HEIGHT = 200;

class MyComponent extends Component {

  constructor() {
    super();
    this.state = {
      height: HEIGHT - 0.001,
    };
  }

  /**
   * Force a re-render to show the nested ViewPager
   * https://github.com/facebook/react-native/issues/8348
   */
  componentDidMount() {
    setTimeout(() => {
      this.setState({
        height: HEIGHT,
      });
    }, 0);
  }

  render() {
    return (
        <View style={{ height: this.state.height }}>
          <ViewPagerAndroid ....... />
        </View>
    );
  }
}

[maxs15]

Why did you close the issue ?
It looks like there is still an issue with the ViewPagerAndroid component..

[prtkkmrsngh]

@chrisciszak solution works great!