# NutrientView React Native UI component

[`NutrientView`](https://www.nutrient.io/api/react-native/NutrientView.html) is the Nutrient [native UI component](https://reactnative.dev/docs/native-platform) that enables you to integrate Nutrient directly into your custom components and modify and adjust the layout of the PDF view to your liking (with flexbox, etc.)

The example below renders two [`NutrientView`](https://www.nutrient.io/api/react-native/NutrientView.html) instances side by side:

```js...
export default class App extends Component<{}> {
  render() {
    return (
      <View
        style={{
          flex: 1,
          flexDirection: 'row',
          justifyContent: 'center',
        }}
        <NutrientView
          document={DOCUMENT_A}
          style={{flex: 1, color: '#267AD4'}}

          fragmentTag='fragmentTag1'
          ref={this.pdfRef1}
        />
        <NutrientView
          document={DOCUMENT_B}
          style={{flex: 1, color: '#9932CC'}}

          fragmentTag='fragmentTag2'
          ref={this.pdfRef2}
        />
      </View>
    );
  }
}...

```

For more details and sample code, refer to the [`SplitPDF.tsx` example](https://github.com/PSPDFKit/react-native/tree/master/samples/Catalog/examples/SplitPDF.tsx) and the [`NutrientViewComponent.tsx` example](https://github.com/PSPDFKit/react-native/tree/master/samples/Catalog/examples/NutrientViewComponent.tsx) from our [Catalog example project](https://www.nutrient.io/guides/react-native/prebuilt-solutions/example-projects.md#pspdfkit-catalog).

## Modal presentation

Nutrient React Native SDK also allows you to present a modal PDF view using the [Native Module API](https://reactnative.dev/docs/native-platform). Here’s how you can open a PDF document using the Native Module API:

```js

Nutrient.present(DOCUMENT, {});

```
---

## Related pages

- [Show the PSPDFKitView close button](/guides/react-native/user-interface/close-button.md)
- [Localization: Change languages in our React Native PDF viewer](/guides/react-native/user-interface/localization.md)
- [Customizing our PDF viewer in React Native](/guides/react-native/user-interface.md)
- [Configuring PSPDFKitView properties](/guides/react-native/user-interface/configuration.md)
- [Customizing menus on React Native](/guides/react-native/user-interface/menus.md)
- [Show or hide the UI in our React Native viewer](/guides/react-native/user-interface/ui-visibility.md)