Detail Screen

Detail screen includes the header, navigation function, and display api data.

Header

In detail screen, we provide two header mode, Parallax mode and Carousel mode. The Carousel mode will be default.

//renderParallaxBackground={() => this.background()} // A: Parallax mode
//renderParallaxForeground={() => this.foreground()} // A: Parallax mode
renderParallaxForeground={() => this.carouselBackground()} // B: Carousel mode

The mode will be switched by update the code.

Navigation

We got two navigation, one is for map screen, another one is the return to previous screen navigation.

Map screen

<TouchableOpacity
  onPress={() => this.props.navigation.navigate('MapDetails', {lat: lat, long: long,} )}
  activeOpacity={0.8}
  >
  ...
</TouchableOpacity>

We use navigate function to MapDetails with variables.

Return to previous screen

<Ionicons name="ios-arrow-round-back" size={40} color="white" onPress={() => this.props.navigation.goBack()} />

We are using the default back function to handle return previous screen. It included the swipe back in iOS, the default function handled for us.

Content

All content which comes from the external API data with some stylesheet styling.

const content = this.props.navigation.getParam('item').content

<Text style={styles.contentStyle}>
  {content}
</Text>