---
title: "Working with placeholders in a JSS React Native app"
slug: "working-with-placeholders-in-a-jss-react-native-app"
abstract: "Placeholder techniques for React Native JSS applications"
---
# Working with placeholders in a JSS React Native app

[Placeholders](https://doc.sitecore.com/xp/en/developers/hd/23/sitecore-headless-development/introducing-placeholders-in-jss-apps.html "Introducing placeholders in JSS apps") are vital components in any application built with JSS.

There are several options for using placeholders in a React Native JSS application.

<details>
<summary><h2>Basic placeholder technique</h2></summary>

The most common way to add a placeholder to a component is to use the `Placeholder` component:

```javascript
import React from 'react'
import { View, Text } from 'react-native'
import { Placeholder } from '@sitecore-jss/sitecore-jss-react-native';

const App = ({ rendering }) => (
  <View>
    <Text>My App</Text>
    <Placeholder name="jss-main" rendering={rendering} />
  </View>
);

```

The `Placeholder` component has the following properties:

- The `name` property that acts as the key to the placeholder you are exposing.
- The `rendering` property that represents:
    - The current Sitecore-provided layout/route data.
    - If you are exposing a placeholder from within another component, parent component data.

</details>

<details>
<summary><h2>Render Props API</h2></summary>

JSS supports the render props pattern if you prefer it to higher-order components. Using the `render` prop of the `<Placeholder>` component, you can take over the rendering of placeholder contents the same way as with the higher-order component and use dynamic props.

The following example illustrates how to get the components array and render it using render props:

```javascript
import React from 'react';
import { View, Text } from 'react-native'
import { Placeholder } from '@sitecore-jss/sitecore-jss-react-native';

const App = ({ rendering }) => (
  <View>
    <Text>My App</Text>
    <Placeholder name="jss-main" rendering={rendering} render={(components, placeholderData, props) => <View>{components}</View>} />
  </View>
);

```

You can use two optional arguments to the render function of the placeholder:

- The `props` parameter is a mirror of the properties passed to the `<Placeholder>`.
- The `placeholderData` parameter provides the current placeholder's layout data.

</details>

<details>
<summary><h2>Dealing with missing components</h2></summary>

If a placeholder contains a rendering name unknown to the `componentFactory` (for example, a back-end developer creates a Foo rendering and adds it to a page, but there is no `Foo.js` file yet), the rendering is replaced with a `MissingComponent` component defined in the `missingComponentComponent` property of your React Native component. The default implementation is a simple message, but you can customize it by substituting your own React-Native component on the `missingComponentComponent` property.

</details>