> For the complete documentation index, see [llms.txt](https://rnkit.gitbook.io/starter-kit/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://rnkit.gitbook.io/starter-kit/detail-screen.md).

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