feat(context): add style support for Portal

README.md

@@ -111,3 +111,11 @@ The React node you want to display on top of the rest.
 | Type | Required |
 | ---- | -------- |
 | node | Yes      |
+
+- `style`
+
+Optional props to define the style of the Portal component.
+
+| Type  | Required |
+| ----- | -------- |
+| style | No       |

src/Consumer.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
+import { ViewStyle } from 'react-native';
 
 import { IProvider } from './Host';
 
 interface IConsumerProps {
   children: React.ReactNode;
   manager: IProvider | null;
+  style?: ViewStyle;
 }
 
-export const Consumer = ({ children, manager }: IConsumerProps): null => {
+export const Consumer = ({ children, manager, style }: IConsumerProps): null => {
   const key = React.useRef<string | undefined>(undefined);
 
   const checkManager = (): void => {
@@ -18,13 +20,13 @@ export const Consumer = ({ children, manager }: IConsumerProps): null => {
 
   const handleInit = (): void => {
     checkManager();
-    key.current = manager?.mount(children);
+    key.current = manager?.mount(children, style);
   };
 
   React.useEffect(() => {
     checkManager();
-    manager?.update(key.current, children);
-  }, [children, manager]);
+    manager?.update(key.current, children, style);
+  }, [children, manager, style]);
 
   React.useEffect(() => {
     handleInit();

src/Host.tsx

@@ -10,8 +10,8 @@ interface IHostProps {
 }
 
 export interface IProvider {
-  mount(children: React.ReactNode): string;
-  update(key?: string, children?: React.ReactNode): void;
+  mount(children: React.ReactNode, style?: ViewStyle): string;
+  update(key?: string, children?: React.ReactNode, style?: ViewStyle): void;
   unmount(key?: string): void;
 }
 
@@ -23,6 +23,7 @@ export const Host = ({ children, style }: IHostProps): JSX.Element => {
     type: 'mount' | 'update' | 'unmount';
     key: string;
     children?: React.ReactNode;
+    style?: ViewStyle;
   }[] = [];
   const { generateKey, removeKey } = useKey();
 
@@ -33,10 +34,10 @@ export const Host = ({ children, style }: IHostProps): JSX.Element => {
       if (action) {
         switch (action.type) {
           case 'mount':
-            managerRef.current?.mount(action.key, action.children);
+            managerRef.current?.mount(action.key, action.children, action.style);
             break;
           case 'update':
-            managerRef.current?.update(action.key, action.children);
+            managerRef.current?.update(action.key, action.children, action.style);
             break;
           case 'unmount':
             managerRef.current?.unmount(action.key);
@@ -46,23 +47,23 @@ export const Host = ({ children, style }: IHostProps): JSX.Element => {
     }
   }, []);
 
-  const mount = (children: React.ReactNode): string => {
+  const mount = (children: React.ReactNode, style?: ViewStyle): string => {
     const key = generateKey();
 
     if (managerRef.current) {
-      managerRef.current.mount(key, children);
+      managerRef.current.mount(key, children, style);
     } else {
-      queue.push({ type: 'mount', key, children });
+      queue.push({ type: 'mount', key, children, style });
     }
 
     return key;
   };
 
-  const update = (key: string, children: React.ReactNode): void => {
+  const update = (key: string, children: React.ReactNode, style?: ViewStyle): void => {
     if (managerRef.current) {
-      managerRef.current.update(key, children);
+      managerRef.current.update(key, children, style);
     } else {
-      const op = { type: 'mount' as 'mount', key, children };
+      const op = { type: 'mount' as 'mount', key, children, style };
       const index = queue.findIndex(
         o => o.type === 'mount' || (o.type === 'update' && o.key === key),
       );

src/Manager.tsx

@@ -1,27 +1,29 @@
 import * as React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, StyleSheet, ViewStyle } from 'react-native';
 
 export interface IManagerHandles {
-  mount(key: string, children: React.ReactNode): void;
-  update(key?: string, children?: React.ReactNode): void;
+  mount(key: string, children: React.ReactNode, style?: ViewStyle): void;
+  update(key?: string, children?: React.ReactNode, style?: ViewStyle): void;
   unmount(key?: string): void;
 }
 
 export const Manager = React.forwardRef((_, ref): any => {
-  const [portals, setPortals] = React.useState<{ key: string; children: React.ReactNode }[]>([]);
+  const [portals, setPortals] = React.useState<
+    { key: string; children: React.ReactNode; style?: ViewStyle }[]
+  >([]);
 
   React.useImperativeHandle(
     ref,
     (): IManagerHandles => ({
-      mount(key: string, children: React.ReactNode): void {
-        setPortals(prev => [...prev, { key, children }]);
+      mount(key: string, children: React.ReactNode, style?: ViewStyle): void {
+        setPortals(prev => [...prev, { key, children, style }]);
       },
 
-      update(key: string, children: React.ReactNode): void {
+      update(key: string, children: React.ReactNode, style?: ViewStyle): void {
         setPortals(prev =>
           prev.map(item => {
             if (item.key === key) {
-              return { ...item, children };
+              return { ...item, children, style };
             }
 
             return item;
@@ -35,12 +37,12 @@ export const Manager = React.forwardRef((_, ref): any => {
     }),
   );
 
-  return portals.map(({ key, children }, index: number) => (
+  return portals.map(({ key, children, style }, index: number) => (
     <View
       key={`react-native-portalize-${key}-${index}`}
       collapsable={false}
       pointerEvents="box-none"
-      style={StyleSheet.absoluteFill}
+      style={[StyleSheet.absoluteFill, style]}
     >
       {children}
     </View>

src/Portal.tsx

@@ -1,14 +1,20 @@
 import * as React from 'react';
+import { ViewStyle } from 'react-native';
 
 import { Consumer } from './Consumer';
 import { Context } from './Host';
 
 interface IPortalProps {
   children: React.ReactNode;
+  style?: ViewStyle;
 }
 
-export const Portal = ({ children }: IPortalProps): JSX.Element => (
+export const Portal = ({ children, style }: IPortalProps): JSX.Element => (
   <Context.Consumer>
-    {(manager): JSX.Element => <Consumer manager={manager}>{children}</Consumer>}
+    {(manager): JSX.Element => (
+      <Consumer manager={manager} style={style}>
+        {children}
+      </Consumer>
+    )}
   </Context.Consumer>
 );