Can we have React 16 Portal functionality React Native?

user_777329 0
Viewed 8084

I'm using React Native which ships with React 16 alpha release which supports portals. While in browser and having access to DOM we can use id or classes to access element from anywhere in component/file hierarchy like this:

const modalRoot = document.getElementById('modal-root');

and pass it to createPortal(child, container) container arg. React docs clearly says than container should be DOM element:

The second argument (container) is a DOM element.

This function is also a method of ReactDOM which doesn't exist in React Native.

Is there a way to achieve the similar functionality in React Native?

Use case:

I want to render an animated overlay in the root of my application but pass the Animated values props to it from a parent deep in the tree hierarchy (can't use Redux actions for such things).

react-native reactjs
3 Answers

I had similar problem where I wanted to render overlay on top of everything from deeply nested child component. I solved my problem with React Native's Modal

It renders its content on top of everything :) Easy to use and no need for extra dependencies

user_37900460

I don't think react-native provides this functionality in its own API. But there is a library available which provides the similar functionality. react-gateway

As per the docs of react-gateway,

It also works in universal (isomorphic) React applications without any additional setup and in React Native applications.

React Gateway does not directly depend on react-dom, so it works fine with React Native under one condition:

You must pass React Native component like View or similar to component prop of .

import React from 'react';
import { Text, View } from 'react-native';
import {
  Gateway,
  GatewayDest,
  GatewayProvider
} from 'react-gateway';

export default class Application extends React.Component {
  render() {
    return (
      <GatewayProvider>
        <View>
          <Text>React Gateway Native Example</Text>
          <View>
            <Gateway into="one">
              <Text>Text rendered elsewhere</Text>
            </Gateway>
          </View>
          <GatewayDest name="one" component={View} />
        </View>
      </GatewayProvider>
    );
  }
}

The above example is taken from the repo itself. react native example

user_42483420

One way to render the items above the screen can be done using react-native-paper library.

import * as React from 'react';
import { Text } from 'react-native';
import { Portal } from 'react-native-paper';

const MyComponent = () => (
  <Portal.Host>
    <Text>Content of the app</Text>
  </Portal.Host>
);

export default MyComponent;

Portal host renders all of its children Portal elements. For example, you can wrap a screen in Portal.Host to render items above the screen.

Here is the link which describes its usage: https://callstack.github.io/react-native-paper/portal-host.html

user_5457610
Related