portal.js

// This example is a little bit contrived because we have more
// control over this situation, but basically I want to know if
// it's possible to render contents parent's siblings and preserve
// context of the original render site, without using any native
// code (eg: the Modal component in React Native)

import React from 'react';
import { Text, View } from 'react-native';
import { PortalHost, Portal } from 'my-imaginary-library';

const MyContext = React.createContext({
  value: 'some-value',
});

export default class App extends React.Component {
  render() {
    return (
      <View>
        <MyContext.Provider>
          <MyApp />
        </MyContext.Provider>

         // Children of <Portal> elsewhere in the app should be rendered here!
        <PortalHost />
      </View>
    );
  }
}

class MyApp extends React.Component {
  render() {
    return (
      <View>
        <Text>hello</Text>
        <Portal>
          <MyContext.Consumer>
            {({value}) => <Text>{value}</Text>}
          </MyContext.Consumer>
        </Portal>
      </View>
    )
  }
}