ViewPagerAndroid renders empty views after upgrading react-native from 0.42.3 to 0.43.4.

[linamm]

Description

I have passed an array of views as children views of the ViewPagerAndroid, when swiping the view pager, I expect the children view will be display one after another. Instead, only the first two views displayed as expected initially, the third view and onwards are empty. When I swipe back to the first view, the first view became empty too. I only start to see this problem after upgrading react-native from 0.42.3 to 0.43.4.

Reproduction Steps and Sample Code

const numbers = [1,2,3,4, 5]; 
const pages = numbers.map((number) => {
   return <Text>{number}</Text>
});
 <ViewPagerAndroid style={{flex: 1}}>
    {pages}
</ViewPagerAndroid>

Solution

No idea.

Additional Information

• React Native version: 0.43.4
• Platform: Android
• Development Operating System: MacOS
• Dev tools: Android studio 1.5.1

[whoyawn]

Are you declaring numbers and pages in the render function? I had a similar problem for horizontal Flatlists too. #13386

[whoyawn]

I tried recreating your problem in version 0.44.0, and there weren't any problems. I get these warnings though, so that could be the problem:

Each ViewPager child must be a <View>. Was Text
Warning: Each child in an array or iterator should have a unique "key" prop.

[linamm]

Hi, @HuyAnhh, thank you very much for trying this out! The ViewPagerAndroid is indeed working fine with 0.43.4 as well, I had other layout problem in my code, which is causing this. So, closing this issue now. Thanks again! 👍

[walfud]

@linamm I had the same problem even I put child within a View component. How you solved the problem?

[linamm]

Hi, Walfud, I cannot remember the details now, I think I've used scrollview instead in the end.

[walfud]

@linamm Thanks