react-native-gateway
Render React-Native component into a new context (aka "Portal")
This can be used to implement various UI components such as modals.
Installation
$ yarn add react-native-gateway
Example
;; const App = <PortalProvider> <View> <PortalEnter name="example"> <ToPort /> </PortalEnter> </View> <PortalExit /> </PortalProvider>;
Will render as:
<PortalProvider> <View> <PortalEnter name="example"></PortalEnter> </View> <PortalExit> <ToPort /> </PortalExit></PortalProvider>
Usage
To get started with react-native-gateway, first wrap your application in the
<PortalProvider>
.
import React from 'react';+ import {+ PortalProvider+ } from 'react-native-gateway'; const App = () => { return (+ <PortalProvider> <View> {this.props.children} </View>+ </PortalProvider> ); }
Then insert a <PortalExit>
whereever you want it to render.
import React from 'react'; import { PortalProvider,+ PortalExit } from 'react-gateway'; const App = () => { return ( <PortalProvider> <View> {this.props.children}+ <PortalExit /> </View> </PortalProvider> ); }
Then in any of your components (that get rendered inside of the
<PortalProvider>
) add a <PortalEnter>
and add name
prop to it.
import React from 'react';+ import {PortalEnter} from 'react-native-gateway'; const App = () => { return ( <View>+ <PortalEnter name="some-name">+ Will render into the PortalExit.+ </PortalEnter> </View> );}