Cannot get Turbo Native Example to build on M1 Mac
Description
I am trying to get a simple RN app to build accessing a Turbo Native ObjC++ module. I followed the example in the Turbo Native docs (https://reactnative.dev/docs/next/the-new-architecture/pillars-turbomodules). I did comment out fabric_enabled and flipper lines from the Podfile and that got rid of some warnings. But I still get this error and I do not know how to solve it:
The following build commands failed: CompileC /Users/MCHALTX1/Library/Developer/Xcode/DerivedData/adcConsoleApp-eudyfqiurftvwseixxuzruouwnqy/Build/Intermediates.noindex/Pods.build/Debug-iphonesimulator/rtn-dcs.build/Objects-normal/arm64/RTNDcs.o /Users/MCHALTX1/testdev/reactProjs/MyProject/MyProject/node_modules/rtn-dcs/ios/RTNDcs.mm normal arm64 objective-c++ com.apple.compilers.llvm.clang.1_0.compiler (in target 'rtn-dcs' from project 'Pods') (1 failure)
Version
0.70.3
Output of npx react-native info
RQ7120V9C1:adcConsoleApp MCHALTX1$ npx react-native info info Fetching system and libraries information... System: OS: macOS 12.6 CPU: (10) arm64 Apple M1 Pro Memory: 315.59 MB / 32.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 18.9.0 - ~/dev/src/homebrew/bin/node Yarn: 1.22.19 - ~/dev/src/homebrew/bin/yarn npm: 8.19.1 - ~/dev/src/homebrew/bin/npm Watchman: Not Found Managers: CocoaPods: 1.11.3 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0 Android SDK: Not Found IDEs: Android Studio: 2021.3 AI-213.7172.25.2113.9014738 Xcode: 14.0.1/14A400 - /usr/bin/xcodebuild Languages: Java: Not Found npmPackages: @react-native-community/cli: Not Found react: 18.1.0 => 18.1.0 react-native: 0.70.3 => 0.70.3 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found
Steps to reproduce
Follow the steps referenced in the RN documentation above: https://reactnative.dev/docs/next/the-new-architecture/pillars-turbomodules
Snack, code example, screenshot, or link to a repository
App.js is just a slight modification of what is generated by a new RN project: /**
- Sample React Native App
- https://github.com/facebook/react-native
- @format
- @flow strict-local */
import React from 'react'; import type {Node} from 'react'; import { SafeAreaView, ScrollView, StatusBar, StyleSheet, Text, useColorScheme, View, TouchableOpacity, } from 'react-native';
import { Colors, DebugInstructions, Header, LearnMoreLinks, ReloadInstructions, } from 'react-native/Libraries/NewAppScreen';
import RTNDcs from 'rtn-dcs/js/NativeDcs.js';
/* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
- LTI update could not be added via codemod */ const Section = ({children, title}): Node => { const isDarkMode = useColorScheme() === 'dark'; return ( <View style={styles.sectionContainer}> <Text style={[ styles.sectionTitle, { color: isDarkMode ? Colors.white : Colors.black, }, ]}> {title} </Text> <Text style={[ styles.sectionDescription, { color: isDarkMode ? Colors.light : Colors.dark, }, ]}> {children} </Text> </View> ); };
const App: () => Node = () => { const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = { backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, };
const onPress = () => { const value = await RTNDcs.add(3, 7); console.log(value); }
return ( <SafeAreaView style={backgroundStyle}> <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} backgroundColor={backgroundStyle.backgroundColor} /> <ScrollView contentInsetAdjustmentBehavior="automatic" style={backgroundStyle}> <Header /> <View style={{ backgroundColor: isDarkMode ? Colors.black : Colors.white, }}> <TouchableOpacity style={styles.TouchableOpacity} onPress={() => {onPress()} }> <View > <Text style={{fontSize:18, color:'black', textAlign:'center'}}>Start</Text> </View> </TouchableOpacity> <Section title="Step One"> Edit <Text style={styles.highlight}>App.js</Text> to change this screen and then come back to see your edits. </Section> <Section title="See Your Changes"> <ReloadInstructions /> </Section> <Section title="Debug"> <DebugInstructions /> </Section> <Section title="Learn More"> Read the docs to discover what to do next: </Section> <LearnMoreLinks /> </View> </ScrollView> </SafeAreaView> ); };
const styles = StyleSheet.create({ sectionContainer: { marginTop: 32, paddingHorizontal: 24, }, sectionTitle: { fontSize: 24, fontWeight: '600', }, sectionDescription: { marginTop: 8, fontSize: 18, fontWeight: '400', }, highlight: { fontWeight: '700', }, });
export default App;
/* RTNDCS.mm is like this. Again taken from the RN docs */ #import "../generated/build/generated/ios/RTNDCSSpec/RTNDCSSpec.h" #import "RTNDCS.h"
@implementation RTNDCS
RCT_EXPORT_MODULE()
-
(void)add:(double)a b:(double)b resolve:(RCTPromiseResolveBlock)resolve reject:(RCTPromiseRejectBlock)reject { NSNumber *result = [[NSNumber alloc] initWithInteger:a+b]; resolve(result); }
-
(std::shared_ptrfacebook::react::TurboModule)getTurboModule: (const facebook::react::ObjCTurboModule::InitParams &)params { return std::make_sharedfacebook::react::NativeDCSSpecJSI(params); }
@end
/* and RTNDCS.h is */ #import <RTNDCSSpec/RTNDCSSpec.h>
NS_ASSUME_NONNULL_BEGIN
@interface RTNDCS : NSObject <NativeDCSSpec>
@end
NS_ASSUME_NONNULL_END