react-native#requireNativeComponent TypeScript Examples

AddToWalletButtonNative =
  requireNativeComponent<any>('AddToWalletButton')

RCTFBShareButton =
  requireNativeComponent<PropsOf<ShareButton>>('RCTFBShareButton')

RCTFBSendButton =
  requireNativeComponent<PropsOf<SendButton>>('RCTFBSendButton')

RCTFBLoginButton =
  requireNativeComponent<RCTFBLoginButtonProps>('RCTFBLoginButton')

StripeContainerNative = requireNativeComponent<any>('StripeContainer')

GooglePayButtonNative = requireNativeComponent<any>('GooglePayButton')

CardFormNative =
  requireNativeComponent<CardFormView.NativeProps>('CardForm')

CardFieldNative =
  requireNativeComponent<CardFieldInput.NativeProps>('CardField')

AuBECSDebitFormNative =
  requireNativeComponent<AuBECSDebitFormComponent.NativeProps>(
    'AuBECSDebitForm'
  )

ApplePayButtonNative =
  requireNativeComponent<ApplePayButtonComponent.NativeProps>('ApplePayButton')

RNShadow =
  Platform.OS === 'android' ? requireNativeComponent('RNShadow') : View

RNGiphyMediaView = Platform.select({
  ios: requireNativeComponent('GiphyMediaView'),
  android: null,
})

SafeAreaView = requireNativeComponent<NativeSafeAreaViewProps>(
  'RNCSafeAreaView',
)

NativeAppearanceProvider =
  Platform.OS === 'android'
    ? FallbackAppearanceProvider
    : requireNativeComponent('RNCAppearanceProvider')

/**
 * A drop-in replacement for `requireNativeComponent`.
 */
export function requireNativeViewManager<P = any>(viewName: string): React.ComponentType<P> {
  if (__DEV__) {
    const { NativeUnimoduleProxy } = NativeModules;
    if (!NativeUnimoduleProxy.viewManagersNames.includes(viewName)) {
      const exportedViewManagerNames = NativeUnimoduleProxy.viewManagersNames.join(', ');
      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}].`
      );
    }
  }

  // Set up the React Native native component, which is an adapter to the universal module's view
  // manager
  const reactNativeViewName = `ViewManagerAdapter_${viewName}`;
  const ReactNativeComponent = requireNativeComponent<NativeExpoComponentProps>(
    reactNativeViewName
  );
  const reactNativeUIConfiguration = (UIManager.getViewManagerConfig
    ? UIManager.getViewManagerConfig(reactNativeViewName)
    : UIManager[reactNativeViewName]) || {
    NativeProps: {},
    directEventTypes: {},
  };
  const reactNativeComponentPropNames = [
    'children',
    ...ViewPropTypesKeys,
    ...Object.keys(reactNativeUIConfiguration.NativeProps),
    ...Object.keys(reactNativeUIConfiguration.directEventTypes),
  ];

  // Define a component for universal-module authors to access their native view manager
  function NativeComponentAdapter(props, ref) {
    // TODO: `omit` may incur a meaningful performance cost across many native components rendered
    // in the same update. Profile this and write out a partition function if this is a bottleneck.
    const nativeProps = pick(props, reactNativeComponentPropNames);
    const proxiedProps = omit(props, reactNativeComponentPropNames);
    return <ReactNativeComponent {...nativeProps} proxiedProperties={proxiedProps} ref={ref} />;
  }
  NativeComponentAdapter.displayName = `Adapter<${viewName}>`;
  return React.forwardRef(NativeComponentAdapter);
}

NativeComponent = 
  requireNativeComponent<RNIWrapperViewProps>(COMPONENT_NAME)

RNIContextMenuView: HostComponent<RNIContextMenuViewProps> = Platform.select({
  ios: () => requireNativeComponent(viewName) as any,
  default: () => View,
})()

RNIContextMenuButton: HostComponent<RNIContextMenuViewProps> = Platform.select({
  ios: () => requireNativeComponent(viewName) as any,
  default: () => View,
})()

RNShadow =
  Platform.OS === 'android' ? requireNativeComponent('RNShadow') : View