-
Notifications
You must be signed in to change notification settings - Fork 40
Open
Description
Description
We are having trouble running a Swift project that uses an XCFramework generated from Rock. The React Native project generated as a Rock project has a native module with Nitro. When launching the project from XCode, it crashes at:
com.facebook.react.runtime.JavaScript: EXC_BAD_ACCESS (code=1, address=0x17)
// File: ReactInstance.cpp
runtime_->unstable_initializeOnJsThread();
Environment
- Platform: iOS
├── @babel/[email protected]
├── @babel/[email protected]
├── @babel/[email protected]
├── @callstack/[email protected]
├── @react-native/[email protected]
├── @react-native/[email protected]
├── @react-native/[email protected]
├── @react-native/[email protected]
├── @rock-js/[email protected]
├── @rock-js/[email protected]
├── @rock-js/[email protected]
├── @rock-js/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] -> ./modules/awesome-library
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]
Steps taken to create the Rock React Native project
- Create the Rock project
npm create rockwith this configuration:- What platforms do you want to start with? iOS
- Which bundler do you want to use? Metro
- Which plugins do you want to use? Brownfield iOS
- What do you want to use as cache for your remote builds? None
- Do you want to install dependencies? Yes
- Create a native library
npx create-react-native-library@latest awesome-librarywith this configuration:- Do you want to create a local library? Yes
- Where do you want to create the library? modules/awesome-library
- What do you want to name the npm package? react-native-awesome-library
- What type of library do you want to develop? Nitro module
- Install Cocoapods dependencies
pod install --project-directory=ios - Update npm
npm install - Inside the module folder
cd modules/awesome-libraryinstall Nigrogennpx -y nitrogen .
I modify the code in App.tsx to use the native module with this code:
import React from 'react';
import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
import WelcomeScreen from '@rock-js/welcome-screen';
import { multiply } from 'react-native-awesome-library';
export default function App() {
const result = multiply(3, 8);
return (
<View style={styles.container}>
<SafeAreaView style={styles.header}>
<Text style={styles.text}>Result: {result}</Text>
</SafeAreaView>
<View style={styles.content}>
<WelcomeScreen />
</View>
</View>
);
}
// Here there is CSS style not copied in this example
- Generate the XCFramework files with
npx rock package:ios --scheme RockProjectDemoReact --configuration Release
Change in the Xcode Project that uses the XCFramework from the previous step
- Once the XCFramework files have been successfully generated, I create a basic iOS project and use drag & drop to add the files to the section:
Frameworks, Libraries, and Embedded - The structure containing the
@maintag is created in thisinit:
ReactNativeBrownfield.shared.bundle = ReactNativeBundle
ReactNativeBrownfield.shared.startReactNative()
- The structure shown in the view, modify the content with:
VStack {
ReactNativeView(moduleName: "RockProjectDemo")
}
yamal-alm and ieduardogf
Metadata
Metadata
Assignees
Labels
No labels