# Detail Screen

## 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.&#x20;

#### 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>
```