Skip to content

nschild/rn-native-portals

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

License: MIT

This repository hasn't been published yet, I need some help to expose the native component to JS. The current status should be working on android like described in mfrachet#1 (comment)

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

Usage

Installation

$ yarn add mfrachet/rn-native-portals

# Using iOS
$ cd ios && pod install

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.


Built with ❤️ at M6 Web

About

React Native implementation of ReactDOM portals using a declarative API

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages

  • Java 57.8%
  • Swift 25.8%
  • Objective-C 8.4%
  • JavaScript 4.2%
  • Ruby 3.8%