How to Pass React native components(like View,Button,Text) to native iOS(Objective-c)

62 views Asked by At

I have one View in react native,
Now to I want to pass that View into native iOS, but I don’t know is it possible or not 
And if possible how to implement that

I have Implemented some code, Here I shared the code

ViewController.h code

// ViewController.h
#import <React/RCTViewManager.h>

@interface CustomComponentManager : RCTViewManager

@end

ViewController.m code

// ViewController.m
#import "ViewController.h"
#import <React/RCTRootView.h>
@interface CustomViewController ()

- (void)addReactNativeComponent:(NSString *)componentName;

@end

@implementation CustomViewController

RCT_EXPORT_MODULE(CustomComponent)

- (UIView *)view {
    // Return a custom UIView to host the React Native component
    return [[UIView alloc] init];
}
- (void)addReactNativeComponent:(NSString *)componentName{
  // Initialize the React Native bridge
     RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:nil];
  // Create a React Native component using the componentName
      RCTRootView *reactNativeView = [[RCTRootView alloc] initWithBridge:bridge moduleName:componentName initialProperties:nil];
  // Add the React Native component to your custom UIView
     [self.view addSubview:reactNativeView];
}
@end

App.tsx code

//App.tsx

import React, {useEffect, useRef, useState} from 'react';
import type {PropsWithChildren} from 'react';
import {
  LogBox,
  SafeAreaView,
  StyleSheet,
  Text,
  View,
  NativeModules,
  AppState,
  requireNativeComponent,
} from 'react-native';

LogBox.ignoreLogs(['new NativeEventEmitter']); // Ignore log notification by message
LogBox.ignoreAllLogs();

const CustomComponent = requireNativeComponent('CustomComponent');

const App = () => {
  console.log(NativeModules, 'native>>>>>>>>>>>>>>>>.');
  const {ViewController} = NativeModules;

  console.log('ViewController>>>>>>>>>>>>.', ViewController);
  const appState = useRef(AppState.currentState);
  const [appStateVisible, setAppStateVisible] = useState(appState.current);
  useEffect(() => {
    console.log('App state>>>>>>', appStateVisible);
    NativeModules.CustomComponent.addReactNativeComponent('MyCustomReactNativeComponent');
    if (appStateVisible == 'background') {
      // ViewController.setupCustomView()
    }
  }, []);

  const handlePiPButtonPress = () => {
    console.log('pip button presss>>>>>>>>');
  };
  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={{flex: 1}}>
        <Text>React Native Pip</Text>
      </View>
      <CustomComponent style={{ width: 200, height: 200 }} />
    </SafeAreaView>
   
  );
};
export default App;

But I don’t know is it right or not, I have to pass <CustomComponent style={{ width: 200, height: 200 }} /> to native iOS(objective-c)

Please let me know if anyone have any idea regarding this

I Found the simlilar Question, But no one can answer this enter link description here

0

There are 0 answers