feat: added multi hosts (#8)

* chore: added multi hosts implementation * chore: added another custom host to example * docs: updated readme
gorhom · Feb 21, 2021 · c25165a · c25165a
1 parent 32f9dd3
commit c25165a
Show file tree

Hide file tree

Showing 30 changed files with 926 additions and 814 deletions.
diff --git a/README.md b/README.md
@@ -11,6 +11,7 @@ A simplified portal implementation for ⭕️ React Native ⭕️.
 ## Features
 
 - Multi portals handling.
+- Multi portal hosts handling.
 - Allow override functionality.
 - Compatible with `React Native Web`.
 - Compatible with `Expo`, [check out the project Expo Snack](https://snack.expo.io/@gorhom/portal-example).
@@ -27,7 +28,7 @@ yarn add @gorhom/portal
 ```tsx
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
-import { Portal, PortalHost } from '@gorhom/portal';
+import { Portal, PortalProvider, PortalHost } from '@gorhom/portal';
 
 const BasicScreen = () => {
   return (
@@ -36,10 +37,20 @@ const BasicScreen = () => {
         <Text style={styles.text}>
           Text won't be teleported!
           <Portal>
-            <Text style={styles.text}>Text to be teleported</Text>
+            <Text style={styles.text}>
+              Text to be teleported to the root host
+            </Text>
+          </Portal>
+          <Portal hostName="custom_host">
+            <Text style={styles.text}>
+              Text to be teleported to the custom host
+            </Text>
           </Portal>
         </Text>
       </View>
+
+      {/* Custom host */}
+      <PortalHost name="custom_host" />
     </View>
   );
 };
@@ -59,22 +70,30 @@ const styles = StyleSheet.create({
 });
 
 export default () => (
-  <PortalHost>
+  <PortalProvider>
     <BasicScreen />
     {/* Text will be teleported to here */}
-  </PortalHost>
+  </PortalProvider>
 );
 ```
 
 ## Props
 
-### `name`
+### Portal Props
 
-Portal key or name to be used internally.
+#### `name`
+
+Portal's key or name to be used as an identifer.
 
 > `required:` NO | `type:` string | `default:` auto generated unique key
 
-### `handleOnMount`
+#### `hostName`
+
+Host's key or name to teleport the portal content to.
+
+> `required:` NO | `type:` string | `default:` 'root'
+
+#### `handleOnMount`
 
 Override internal mounting functionality, this is useful if you want to trigger any action before mounting the portal content.
 
@@ -84,7 +103,7 @@ type handleOnMount = (mount?: () => void) => void;
 
 > `required:` NO | `type:` function | `default:` undefined
 
-### `handleOnUnmount`
+#### `handleOnUnmount`
 
 Override internal un-mounting functionality, this is useful if you want to trigger any action before un-mounting the portal content.
 
@@ -94,19 +113,59 @@ type handleOnUnmount = (unmount?: () => void) => void;
 
 > `required:` NO | `type:` function | `default:` undefined
 
-### `children`
+#### `children`
 
-Portal content.
+Portal's content.
 
 > `required:` NO | `type:` ReactNode | ReactNode[] | `default:` undefined
 
+### PortalHost Props
+
+#### `name`
+
+Host's key or name to be used as an identifer.
+
+> `required:` YES | `type:` string
+
 ## Hooks
 
 ### `usePortal`
 
-To access internal mounting and un-mounting functionality of any portal.
+To access internal functionalities of all portals.
 
-> `type:` [PortalMethods](./src/types.ts#L3)
+```ts
+/**
+ * @param hostName host name or key.
+ */
+type usePortal = (hostName: string = 'root') => {
+  /**
+   * Register a new host.
+   */
+  registerHost: () => void,
+  /**
+   * Deregister a host.
+   */
+  deregisterHost: () => void,
+  /**
+   * Add portal to the host container.
+   * @param name portal name or key
+   * @param node portal content
+   */
+  addPortal: (name: string, node: ReactNode) => void
+  /**
+   * Update portal content.
+   * @param name portal name or key
+   * @param node portal content
+   */
+  updatePortal: (name: string, node: ReactNode) => void
+  /**
+   * Remove portal from host container.
+   * @param name portal name or key
+   */
+  removePortal: (name: string) => void
+}
+
+```
 
 <h2 id="built-with">Built With ❤️</h2>
 

diff --git a/example/package.json b/example/package.json
@@ -14,26 +14,27 @@
   "dependencies": {
     "@gorhom/showcase-template": "^1.0.2",
     "@react-native-community/masked-view": "0.1.10",
-    "@react-navigation/bottom-tabs": "^5.11.3",
-    "@react-navigation/native": "^5.9.0",
-    "@react-navigation/stack": "^5.13.0",
-    "expo": "^40.0.0",
-    "expo-splash-screen": "~0.8.1",
+    "@react-navigation/bottom-tabs": "^5.11.7",
+    "@react-navigation/native": "^5.9.2",
+    "@react-navigation/stack": "^5.14.2",
+    "expo": "^40.0.1",
+    "expo-splash-screen": "^0.9.0",
+    "immer": "^8.0.1",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "0.63.4",
-    "react-native-gesture-handler": "~1.8.0",
-    "react-native-reanimated": "~1.13.0",
+    "react-native-gesture-handler": "^1.10.1",
+    "react-native-reanimated": "^1.13.2",
     "react-native-safe-area-context": "3.1.9",
-    "react-native-screens": "~2.15.0",
-    "react-native-unimodules": "~0.12.0",
+    "react-native-screens": "^2.17.1",
+    "react-native-unimodules": "^0.12.0",
     "react-native-web": "~0.14.10"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/runtime": "^7.12.5",
+    "@babel/core": "^7.12.17",
+    "@babel/runtime": "^7.12.18",
     "babel-plugin-module-resolver": "^4.1.0",
     "babel-preset-expo": "8.3.0",
-    "expo-cli": "^4.0.17"
+    "expo-cli": "^4.1.6"
   }
 }
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,17 +1,17 @@
 import React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
+import { PortalProvider } from '@gorhom/portal';
 import HomeScreen from './screens/HomeScreen';
 import BasicScreen from './screens/BasicScreen';
 import ModalScreen from './screens/ModalScreen';
 import PopoverScreen from './screens/PopoverScreen';
-import { PortalHost } from '@gorhom/portal';
 
 const Stack = createStackNavigator();
 
 const App = () => {
   return (
-    <PortalHost>
+    <PortalProvider>
       <NavigationContainer>
         <Stack.Navigator>
           <Stack.Screen
@@ -24,7 +24,7 @@ const App = () => {
           <Stack.Screen name="Popover" component={PopoverScreen} />
         </Stack.Navigator>
       </NavigationContainer>
-    </PortalHost>
+    </PortalProvider>
   );
 };
 

diff --git a/example/src/screens/BasicScreen.tsx b/example/src/screens/BasicScreen.tsx
@@ -8,11 +8,27 @@ const BasicScreen = () => {
       <View style={styles.box}>
         <Text style={styles.text}>
           Text won't be teleported!
+          <Portal hostName="custom_host_1">
+            <Text style={styles.text}>
+              Text to be teleported to the custom host #1
+            </Text>
+          </Portal>
+          <Portal hostName="custom_host_2">
+            <Text style={styles.text}>
+              Text to be teleported to the custom host #2
+            </Text>
+          </Portal>
           <Portal>
-            <Text style={styles.text}>Text to be teleported</Text>
+            <View style={styles.customHostBox}>
+              <Text style={styles.text}>
+                Text to be teleported to the root host
+              </Text>
+            </View>
           </Portal>
         </Text>
       </View>
+      <PortalHost name="custom_host_1" />
+      <PortalHost name="custom_host_2" />
     </View>
   );
 };
@@ -23,6 +39,14 @@ const styles = StyleSheet.create({
     padding: 24,
     backgroundColor: '#333',
   },
+  customHostBox: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    padding: 24,
+    backgroundColor: '#333',
+  },
   text: {
     alignSelf: 'center',
     textAlign: 'center',
@@ -31,8 +55,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default () => (
-  <PortalHost>
-    <BasicScreen />
-  </PortalHost>
-);
+export default BasicScreen;