React Native Implementation of ReactDOM Portals using a Declarative API

This project is not under active development. Feel free to fork it, to take inspiration, create a copy or anything that make you feel productive.

Here’s the story why we’ve built this library

React Native implementation of ReactDOM portals using a declarative API.

This library makes possible the teleportation of views from a place to another one.

---

Content

• How to use it ?
• Understanding the concept

Usage

Installation

$ yarn add mfrachet/rn-native-portals
$ react-native link

In your code

Somewhere high in your component tree, add a PortalDestination (a portal destination):

import {  PortalDestination } from "rn-native-portals";

render() {
	return (
		<PortalDestination name="targetOfTeleportation" />
	);
}

Somewhere else in the tree, add a PortalOrigin (a portal origin):

import { PortalOrigin } from 'rn-native-portals';

render() {
	return (
		<PortalOrigin destination={ this.state.shouldMove ? 'targetOfTeleportation' : null }>
			<View>
				<Text>Hello world</Text>
			</View>
		</PortalOrigin>
	);
}

When the shouldMove state will change to something truthy, the View and the Text components will be moved inside the PortalDestination component set previously.

If the value of the destination prop is set to null, the View and Text are restituted to their original place.

Download Details:

Author: mfrachet

Source Code: https://github.com/mfrachet/rn-native-portals

#react #mobile-apps #react-native