1import React from 'react'; 2import { NativeModules, UIManager, ViewPropTypes, requireNativeComponent } from 'react-native'; 3// To make the transition from React Native's `requireNativeComponent` to Expo's 4// `requireNativeViewManager` as easy as possible, `requireNativeViewManager` is a drop-in 5// replacement for `requireNativeComponent`. 6// 7// For each view manager, we create a wrapper component that accepts all of the props available to 8// the author of the universal module. This wrapper component splits the props into two sets: props 9// passed to React Native's View (ex: style, testID) and custom view props, which are passed to the 10// adapter view component in a prop called `proxiedProperties`. 11// NOTE: React Native is moving away from runtime PropTypes and may remove ViewPropTypes, in which 12// case we will need another way to separate standard React Native view props from other props, 13// which we proxy through the adapter 14const ViewPropTypesKeys = Object.keys(ViewPropTypes); 15/** 16 * A drop-in replacement for `requireNativeComponent`. 17 */ 18export function requireNativeViewManager(viewName) { 19 if (__DEV__) { 20 const { NativeUnimoduleProxy } = NativeModules; 21 if (!NativeUnimoduleProxy.viewManagersNames.includes(viewName)) { 22 const exportedViewManagerNames = NativeUnimoduleProxy.viewManagersNames.join(', '); 23 console.warn(`The native view manager required by name (${viewName}) from NativeViewManagerAdapter isn't exported by @unimodules/react-native-adapter. Views of this type may not render correctly. Exported view managers: [${exportedViewManagerNames}].`); 24 } 25 } 26 // Set up the React Native native component, which is an adapter to the universal module's view 27 // manager 28 const reactNativeViewName = `ViewManagerAdapter_${viewName}`; 29 const ReactNativeComponent = requireNativeComponent(reactNativeViewName); 30 const reactNativeUIConfiguration = (UIManager.getViewManagerConfig 31 ? UIManager.getViewManagerConfig(reactNativeViewName) 32 : UIManager[reactNativeViewName]) || { 33 NativeProps: {}, 34 directEventTypes: {}, 35 }; 36 const reactNativeComponentPropNames = [ 37 'children', 38 ...ViewPropTypesKeys, 39 ...Object.keys(reactNativeUIConfiguration.NativeProps), 40 ...Object.keys(reactNativeUIConfiguration.directEventTypes), 41 ]; 42 // Define a component for universal-module authors to access their native view manager 43 function NativeComponentAdapter(props, ref) { 44 const nativeProps = pick(props, reactNativeComponentPropNames); 45 const proxiedProps = omit(props, reactNativeComponentPropNames); 46 return React.createElement(ReactNativeComponent, { ...nativeProps, proxiedProperties: proxiedProps, ref: ref }); 47 } 48 NativeComponentAdapter.displayName = `Adapter<${viewName}>`; 49 return React.forwardRef(NativeComponentAdapter); 50} 51function omit(props, propNames) { 52 const copied = { ...props }; 53 for (const propName of propNames) { 54 delete copied[propName]; 55 } 56 return copied; 57} 58function pick(props, propNames) { 59 return propNames.reduce((prev, curr) => { 60 if (curr in props) { 61 prev[curr] = props[curr]; 62 } 63 return prev; 64 }, {}); 65} 66//# sourceMappingURL=NativeViewManagerAdapter.native.js.map