First thing what I noticed in this animation how to implement scrolling background and slide synchronously, I tried playing with zIndex but:

It is not recommended to use. It doesn’t work for this example

To scroll background and poster as one element synchronously you need to put them together with content but if you do that you will have scrollable content. In our example content must be fixed on screen, so exit from this gap in the two ScrollView or FlatList.

I create project by simple command:

create-react-native-app slide-presenter

Then I create one container with tree ScrollView in them self containers

<View style={MainStyles.container}>

<View style={MainStyles.backdrop}>

<ScrollView

ref={(ref) => this.scrollBack = ref}

showsHorizontalScrollIndicator={false}

removeClippedSubviews={true}

horizontal={true}

scrollEnabled={false}

>

{this.renderBackdrops(items)}

</ScrollView>

</View> <View style={MainStyles.contentWrapper}>

<View style={MainStyles.contentBackground}>

<ScrollView

ref={(ref) => this.scrollCont = ref}

style={MainStyles.contentRoller}

showsHorizontalScrollIndicator={false}

removeClippedSubviews={true}

horizontal={true}

scrollEnabled={false}

>

{this.renderContents(items)}

</ScrollView>

</View>

</View> <View style={MainStyles.posterWrapper}>

<ScrollView

scrollEventThrottle={16}

horizontal={true}

pagingEnabled={true}

showsHorizontalScrollIndicator={false}

removeClippedSubviews={true}

onScroll={(e) => { this.scrollBack.scrollTo(e.nativeEvent.contentOffset); this.scrollCont.scrollTo({

x: e.nativeEvent.contentOffset.x / screen.width * (contentWidth + SPACE_LG2)

});

}}

>

{this.renderPosters(items)}

</ScrollView>

</View>

</View>

First one ScrollView used for scrolling backdrops, second one for content (title, description, rating, etc.) and third one for poster. There is only one scrollable element it’s posters ScrollView with pagingEnabled property. Other scrolls by references in onScroll event handler. All ScrollView’s have horizontal orientation and removeClippedSubviews property for better performance.

So we have basic layout structure, let’s go to styling.

Backdrop should be in full screen. Content just in center with white background. Poster at the top of content but content should be behind.

export const screen = Dimensions.get('screen');

export const contentWidth = (screen.width - SPACE_LG2 - SPACE_MD2 - SPACE_MD2);



const MainStyles = {

container: {

flex: 1,

justifyContent: 'flex-end'

},

backdrop: {

position: 'absolute',

left: 0,

top: 0,

width: screen.width

},

contentWrapper: {

flex: 1,

justifyContent: 'flex-end',

width: screen.width,

marginBottom: SPACE_LG

},

contentBackground: {

marginHorizontal: SPACE_LG,

paddingTop: 120,

height: screen.height / 5 * 3,

borderRadius: BORDER_RADIUS_LG,

backgroundColor: Colors.white,

shadowColor: Colors.black,

shadowOffset: {width: 0, height: SPACE_SM},

shadowOpacity: 0.1,

shadowRadius: 5,

elevation: 1

},

contentRoller: {

flex: 1,

marginHorizontal: SPACE_SM,

marginBottom: SPACE_MD

},

contentItem: {

width: contentWidth

},

posterWrapper: {

position: 'absolute',

top: 0,

left: 0,

width: screen.width

},



};

We have styled containers with lists but we don’t have children, so let’s describe children for every list.