Working with placeholders in a JSS React Native app

Version:

Placeholders are vital components in any application built with JSS.

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

Basic placeholder technique

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

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.

Render Props API

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:

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.

Dealing with missing components

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.

If you have suggestions for improving this article, let us know!