Detail Screen

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


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.


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

Map screen

onPress={() => this.props.navigation.navigate('MapDetails', {lat: lat, long: long,} )}

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.


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}>