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