react-native-pager-view when pages are heavy component the first time nothing displayed

when pages are heavy component the first time nothing displayed

Open ghost opened this issue 3 years ago • 13 comments

for the first time I cant see my component, but when I call setPage everything is fine.

Only the first time, the first page does not show, although I tested it renders, but nothing is showing until I change page then everything is Ok.

Jul 31 '20 03:07 ghost

Hey @muhammadwafa Thank you for reporting an issue. What platform is affected (android/iOS/both) ? Could you provide a repro code ?

I have tested an example app in this repository and everything works fine. I am waiting for more information

Jul 31 '20 06:07 troZee

This is working fine on android 10, but on Sumsung A5 with android 5 this problem appears. On android 10 there is no problem. on android 5 becomes ok, after I call setPage(index) then everything works well, even the current page.

        <>
            <ViewPager initialPage={1} ref={page} style={{ flex: 1 }} scrollEnabled={false}>
                <View key="1">
                    <View style={styles.header}>
                        <Text style={styles.title}>
                            {language.appName}
                        </Text>
                        <TouchableOpacity style={styles.groupicon} onPress={goToGroup}>
                            <Icon name="bubble-chart" size={30} color="#32afa9" />
                        </TouchableOpacity>
                    </View>

                    <FlatList
                        style={{ flex: 1 }}
                        data={contacts}
                        keyExtractor={_keyExtractor}
                        renderItem={renderItem}
                        getItemLayout={getItemLayout}
                    />
                </View>

                <View key="2">
                    <MyContacts />
                </View>

                <View key="3">
                    <Profile />
                </View>
            </ViewPager>
            {renderTabRouter}
            {renderModal}
        </>

In above code only in the first render <MyContacts />does not appears, although it renders, but nothing is showing.

This was working well without any problem on react-native 0.61.5 and viewpager 3.3.0,

Now the problem come with upgrading react-native to 0.63.2 and viewpager 4.1.3

Jul 31 '20 06:07 ghost

can you try add prop collapsable={false} like here ?

https://github.com/react-native-community/react-native-viewpager/blob/master/example/ViewPagerExample.js#L112

Jul 31 '20 07:07 troZee

If you mean added like below, then it doesnt work


                <View key="2" collapsable={false}>
                    <MyContacts />
                </View>

Jul 31 '20 07:07 ghost

The same code was working fine on react-native 0.61.5 and viewpager 3.3.0

Jul 31 '20 07:07 ghost

@troZee I tested this problem happens with ViewPager versions: 4.0.0 && 4.0.1 && 4.1.0 && 4.1.1 && 4.1.2 && 4.1.3 with galaxy A5 on Android 5.0.2

If you want to test it please test it with android 5.0.2 and also while checking put a Flatlist inside one of the page then problem appears when for the first times renders you will se a blank area.

Now I downgraded to ViewPage v 3.3.0 and works well

Jul 31 '20 12:07 ghost