Home Screen

la
Last updated 5 months ago

It contains all the data with static item and carousel component to display all data.

Static Item

We will display the first item from the external API data.

<View style={styles.featureContainer}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Details' , {item: item})}>
<ImageBackground
source={{uri: item.image[0]}}
style={styles.featureItemBackground}
>
...
</ImageBackground>
</TouchableOpacity>
</View>

Also, it navigates to detail screen with item data. That data will be display more detail in that screen.

Carousel List

The list will display remained items from external API data with classic carousel list. It can swipe horizontal to scroll, and navigates to detail screen.

<View style={styles.container}>
<Carousel
data={data}
renderItem={this._renderItem.bind(this)}
sliderWidth={width}
itemWidth={width / 1.5}
/>
</View>

More detail about the Carousel component, you can check here‚Äč

RenderItem

<TouchableOpacity onPress={() => this.props.navigation.navigate('Details' , {item: item})}>
<ImageBackground
source={{uri: item.image[0]}}
style={styles.gridItemBackground}
>
<View style={styles.item}>
...
</View>
</ImageBackground>
</TouchableOpacity>

This included the background image and some data which provided from API. Also, it can navigate with that API data to detail screen. Home Screen, Grid Screen and List Screen have their own renderItem function with different stylesheet.