React native swiper with parallax

Question

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.

score 0 · Answer 1 · answered Aug 01 '18 at 05:04

0

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

answered Aug 01 '18 at 05:04

Mayank Garg

1,284
1
11
23

score -1 · Answer 2 · answered Jun 22 '18 at 13:08

-1

Tried with both the component. You want something like this. https://snack.expo.io/r1NOE_q-Q

answered Jun 22 '18 at 13:08

Pramod

1,835
8
14

I need to swipe the whole page, for example, first slide is movie slide, second music and etc. – Dalies Jun 22 '18 at 14:16
Update the code ...can you check now Link: https://snack.expo.io/ry7UOkhZ7 – Pramod Jun 23 '18 at 15:35

React native swiper with parallax

2 Answers2