Working with placeholders in a JSS React Native app

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:

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:

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.