React-native: [Android] ViewPager child view didn't get draw

[tlcheah2]

Description

I created a native UI component, which is a RelativeLayout contain a ViewPager. It instantiate two item view, which is ItemView0 and ItemView1.

However, when I performed scrolling to ItemView1 on ViewPager, the correct behaviour of the ViewPager should be draw the next item, which is ItemView2.

Instead, from the debugging I did, the instantiateItem() from PagerAdapter did called and view is inflated. However, it did not perform dispatchDraw() method for ItemView2.

Hopefully I am clear with the issue. I have also posted on StackOverflow. http://stackoverflow.com/questions/41571053/react-native-custom-native-viewpager-unable-to-addview

Thanks.

Reproduction

Here is the link for the sample project of reproduction.
https://github.com/tlcheah2/test

Solution

Firstly, I couldn't use ViewPagerAndroid as what it contain inside is quite heavy. Thus, I decided to move some of components to native. There I encountered this issue.

Secondly, I am not sure this is a bug or what. If anyone can provide some explaination, it would be really helpful and I appreciate it.

Additional Information

• React Native version: RN 0.40
• Platform: Android
• Operating System: MacOS

[bruceluliang]

pls see this issue
https://github.com/facebook/react-native/issues/8348

[monumentyusuf]

Im in trouble with the same issue. Im running same pager and adapter classes in an AppCompatActivity and it works but not in ReactActivity.
Did you find any solution for that @tlcheah2 ?

[tlcheah2]

@monumentyusuf I found out 2 solution for this. One of it you can use viewpager.setOffScreenPageLimit() to your viewpager. As this is how ReactViewPager did it. Refer to the picture below

Else you can measure and relayout your View when requestLayout called.

I updated the solution to my test project and you can get it at the following commit.
https://github.com/tlcheah2/test/commit/9a70c2b985769a2a8277219d104b0893b406eb49

Thank you.

[monumentyusuf]

Thanks a lot @tlcheah2 you saved my day :)

[Deallinker]

Thank you very much @tlcheah2 , but can you explain it why? I will appreciate you a lot.

[tlcheah2]

Hi @Deallinker ,

From the comment section of the code above in ReactViewPager, the problem is on the relayout. When we perform swipe on the ViewPager, ViewPager actually will relayout the view. However, it didn't behave this way and react native currently seem have limitation on re-layout the view on request..

That's why React Native are using viewpager.setOffScreenPageLimit() to render all your ViewPager child view in one time. If your viewpager child view is very heavy or you have a lot of child view, this will cause some performance issues but that is another topic.

Let me know what you think if you have different opinion and happy coding.