Giters

facebook / react-native

A framework for building native applications using React

Home Page:https://reactnative.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Portal] Missing Docs & General Confusion

yelled3 opened this issue · comments

commented

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?

commented

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?

commented

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.

commented

Portal is only used in Android right now

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

commented

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.

commented

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