[Portal] Missing Docs & General Confusion

[yelled3]

I've been trying to figure out how to use Portal.js (since there's no official docs, yet)
https://github.com/facebook/react-native/blob/master/Libraries/Portal/Portal.js

now although the comment at the top says:

* Never use `<Portal>` in your code. There is only one Portal instance rendered
* by the top-level `renderApplication`.

if I don't render <Portal> I get: Calling showModal but no Portal has been rendered.
from reading the docs, it sounds like <Portal> is being auto-rendered somehow...

it is still unclear to me if I should be using Portal at all...
it doesn't seem to be integrated with Modal - which seems to offer a nicer interface...

in any case;
after tinkering around for a bit, I got an example working, if anyone's interested:

import React from 'react-native';
const { View, StyleSheet, AppRegistry } = React;

import Portal from 'react-native/Libraries/Portal/Portal';

import MainAppView from './MyApp/MainAppView';


class MyPortalExample extends React.Component {

  componentDidMount() {
    const tag = Portal.allocateTag();

    setTimeout( ()=> {

      Portal.showModal(tag, this._modalComponent());

    }, 1000);

    setTimeout( ()=> {

      Portal.closeModal(tag);

    }, 2000);
  }

  _modalComponent() {
    return (<View style={styles.modal} />);
  }

  render() {
    const MainAppView = (<View/>); // load what ever you need
    return (
      <View style={styles.screen}>

        <MainAppView />

        <Portal />
      </View>
    );
  }
}


const styles = StyleSheet.create({

  screen: {
    flex: 1,
    // needed since the <Portal> modalsContainer style is using `position: 'absolute'`
    backgroundColor: 'transparent' 
  },

  modal: {
    width: 200,
    height: 200,
    backgroundColor: 'rgba(255,255,255, 0.5)'
  }
});

AppRegistry.registerComponent('MyPortalExample', () => MyPortalExample);

am I using it correctly?

[sahrens]

Sorry this is confusing, but Portal is only used in Android right now which hasn't been released yet.

Any reason to not just use Modal?

[sahrens]

I've put up D2397933 internally to add a comment to this effect. If you can't do what you want with <Modal>, please open a new issue.

[yelled3]

Portal is only used in Android right now

can you elaborate why? is it related to some limitations with iOS?

[sahrens]

Basically because Android didn't have a need for a native version because we weren't doing any hybrid apps yet.

The native version that uses on iOS is better because it let's the modal cover the entire screen, whereas in a hybrid native/ReactNative app where the ReactNative view might just be some fraction of the screen (e.g. if you have a native nav bar or header that renders a ReactNative root view), then the RN rootView can't render outside its bounds (i.e. render on top of the nav bar) using pure JS (e.g. , which is why we created a native modal component to get around that.

[niftylettuce]

Can we please get this documented properly? There is huge demand for something like this for Android https://github.com/brentvatne/react-native-overlay

[niftylettuce]

Check this out! https://github.com/niftylettuce/react-native-loading-spinner-overlay