Is there a way to combine the react-native-swiper with the react-naitve-parallax-scroll-view . I want to render pagination of swiper component in foreground component of parallax scroll. By default pagination of react native swiper have fixed position and when I scroll pagination stays on screen. I want to have parallax effect with pagination when scroll down to hide it. Pagination should be in renderForeground of parallax scroll view.
<Swiper
showsButtons={false}
loop={false}
showsPagination={true}
>
<ParallaxScrollView
backgroundColor="transparent"
contentBackgroundColor="#fff"
parallaxHeaderHeight={250}
renderBackground={() => (
<ImageBackground
source={require('../assets/images/image1.png')}
style={{width: '100%', height: 250}}
/>
)}
renderForeground={() => (
<View style={{flex: 1,alignItems: 'center', justifyContent: 'flex-end' }}>
<Text>Hello world</Text>
</View>
)}>
<View style={{ height: 500 }}>
<Text>Scroll me</Text>
</View>
</ParallaxScrollView>
<ParallaxScrollView
backgroundColor="transparent"
contentBackgroundColor="#fff"
parallaxHeaderHeight={250}
renderBackground={() => (
<ImageBackground
source={require('../assets/images/image1.png')}
style={{width: '100%', height: 250}}
/>
)}
renderForeground={() => (
<View style={{flex: 1,alignItems: 'center', justifyContent: 'flex-end' }}>
<Text>Hello world</Text>
</View>
)}>
<View style={{ height: 500 }}>
<Text>Scroll me</Text>
</View>
</ParallaxScrollView>
</Swiper>
I found react-native-pagination but don't know how implement with this case.
I think you should use this
https://github.com/archriss/react-native-snap-carousel
this carousel provides the both Parallax and full page Swiper in a single component . it is best , its help me
Tried with both the component. You want something like this. https://snack.expo.io/r1NOE_q-Q
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.