Create a new project using react-native-cli
npx react-native init AwesomeProject
cd AwesomeProject
npm install react-native-amazon-ivs-stages
bundle install
(cd ios && pod install)Replace your App.tsx file content with the example code
import React from "react";
import { StyleSheet, View } from "react-native";
import { MultihostAppViewProxy } from "react-native-amazon-ivs-stages";
export default function App() {
return (
<View style={styles.container}>
<MultihostAppViewProxy style={styles.nativeView} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
nativeView: {
flex: 1,
},
});Replace ios/AwesomeProject/Images.xcassets contents with the contents of the RN library's Images.xcassets
Create a AmazonIvsStages.plist file in the ios workspace and add the resource to the Copy Bundle Resources build phase
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>apiUrl</key>
<string>https://some-url.com/stuff</string>
</dict>
</plist><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<!-- Previous Info.plist values -->
<key>NSCameraUsageDescription</key>
<string>Camera is required for video streaming</string>
<key>NSMicrophoneUsageDescription</key>
<string>Microphone is required for video streaming</string>
</dict>
</plist>yarn start
# for iOS
yarn iosAdd this to RN code
import { useRNEventSubscriptions } from 'react-native-amazon-ivs-stages';
// ...
const { startListening } = useRNEventSubscriptions((eventData) => {
// do something with the event that fired in the native view
console.debug({ eventData });
});
React.useEffect(() => {
const removeListeners = startListening();
return () => {
removeListeners();
};
}, []);
// ...Add this to iOS Swift code
// MARK: - React Native Event Emitter
RNEventEmitter.shared?.sendEvent(withName: "onPress", body: [
// can be ANY data you want to recieve in React Native
"data": ["screen": "WelcomeView", "action": "getStarted"]
])
