Home Screen

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.