callstack / react-native-pager-view

React Native wrapper for the Android ViewPager and iOS UIPageViewController.
MIT License
2.72k stars 418 forks source link

PagerView not working on Android #838

Open faustoct1 opened 4 months ago

faustoct1 commented 4 months ago

This snippet of code is not working on Android (but it works perfectly on iOS).

<BottomSheetScrollView style={{backgroundColor:'#fff',flex:1}}>
    <View style={{flex:1}}>
      {
        item.thumbs && !!item.thumbs.length &&  <PagerView style={{width:'100%',height:Math.round(height*0.6)}} initialPage={0}>
          { 
            item.thumbs.map((t,i)=><View key={i} collapsable={false}>
              <View style={{zIndex:1,padding:10,paddingTop:5,paddingBottom:5,borderRadius:20,position:'absolute',right:10,top:10,backgroundColor:'rgba(0,0,0,0.75)'}}><Text style={{color:'#aaa',fontSize:10}}>{`${i+1} / ${item.thumbs.length}`}</Text></View>
              <FastImage resizeMode={'cover'} source={{uri: t}} style={{width:'100%',height:'100%',marginBottom:10}} />
            </View>) 
          }
        </PagerView>
      }
    </View>
</BottomSheetScrollView>

Appreciate any help on this.

MrRefactor commented 4 months ago

Have you found any solution to this?

Bardiamist commented 4 months ago

Should be same problem https://github.com/callstack/react-native-pager-view/issues/837 Style not passed on Android

Manually pass style should help

Try to replace

<View key={i} collapsable={false}>

by

<View key={i} collapsable={false} style={{ flex: 1 }}>