I'm trying to use a SwiftUI component with my React Native app, which appears to be a little complicated since I haven't found any documentation or tutorials for doing this online. Here are the files I'm using:
CategoryCardView.swift
import UIKitimport SwiftUIstruct CategoryCard: View { var name: String var body: some View { Text(name) }}@objc(RCTCategoryCardViewManager)class RCTCategoryCardViewManager: RCTViewManager { override static func requiresMainQueueSetup() -> Bool { return true } @objc var name: String = "Default text" override func view() -> UIView! { let swiftUIView = CategoryCard(name: name) let viewController = UIHostingController(rootView: swiftUIView) return viewController.view }}
CategoryCardView.m
#import <React/RCTViewManager.h>@interface RCT_EXTERN_MODULE(RCTCategoryCardViewManager, RCTViewManager)RCT_EXPORT_VIEW_PROPERTY(name, NSString)@end
NativeCategoryCard.tsx (in React Native):
import {requireNativeComponent} from "react-native";import React from "react";const NativeCategoryCard = requireNativeComponent('RCTCategoryCardView');export interface CategoryCardProps{ name: string;}function CategoryCard(props: CategoryCardProps) { return <NativeCategoryCard style={[{ height: 100, width: 100 }]} {...props} />}export default CategoryCard;
And then somewhere in my React Native code:
<CategoryCard text='hello' />
My app throws the following error when it tries rendering <CategoryCard>
:
Exception thrown while executing UI block: -[_TtGC7SwiftUI14_UIHostingViewV7PalChat12CategoryCard_ setName:]: unrecognized selector sent to instance 0x7fc8718c7830
I don't really understand Swift and SwiftUI thoroughly, especially in terms of integrating it with React Native, so I apologise if I'm making an obvious mistake.