Hello Y'all, I've added a small section to my guide that shows how to add a button in React Native to the existing demo app available for the 360 cameras from RICOH. A guide with images, better navigation, and UI is available Here. To Code the Component called GetOptions my guide shows how to do that as well.
The code provided works with an API the emulates the 360 cameras so that you don't need to own one for development or for testing purposes.
Coding a Get Options Button
1. Add a Screen to Navigate to in App.tsx
In the App.tsx file, Import your GetOptions Custom
Component and then Add a new React Stack Screen component as shown in
the highlighted code. When the button is pressed it will Navigate to the
new Stack Screen we created.
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import MainMenu from './MainMenu';
import TakePhoto from './TakePhoto';
import ListPhotos from './ListPhotos';
import PhotoSphere from './PhotoSphere';
import GetOptions from './GetOptions';
const Stack = createNativeStackNavigator();
const screenOptions = {
headerStyle: {
backgroundColor: '#6200ee',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
headerBackTitle: '',
};
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator screenOptions={screenOptions}>
<Stack.Screen
options={{title: 'Theta SDK Erik app'}}
name="main"
component={MainMenu}
/>
<Stack.Screen
options={{title: 'Get Options'}}
name="options"
component={GetOptions}
/>
<Stack.Screen
options={{title: 'Take Photo'}}
name="take"
component={TakePhoto}
/>
<Stack.Screen
options={{title: 'List Photos'}}
name="list"
component={ListPhotos}
/>
<Stack.Screen
options={{title: 'Sphere'}}
name="sphere"
component={PhotoSphere}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;
2. Add a Button in MainMenu.tsx
In the MainMenu component we create a goOptions() function that uses reacts navigation.navigate() to go to our options screen we created in App.tsx. This function is called below in a button press event.
In the return we add a View Style Component that just adds top spacing to our new button. Then we add the Button as a TouchableOpacity component, when the onPress event of the button happens our function goOptions is called.
import React from 'react';
import {StatusBar, Text, View, TouchableOpacity} from 'react-native';
import {SafeAreaView} from 'react-native-safe-area-context';
import styles from './Styles';
import {initialize} from 'theta-client-react-native';
const MainMenu = ({navigation}) => {
const goTake = () => {
navigation.navigate('take');
};
const goList = () => {
navigation.navigate('list');
};
const goOptions = () => {
navigation.navigate('options');
}
React.useEffect(() => {
async function init() {
//const endpoint = 'http://192.168.1.1'
const endpoint = 'https://fake-theta.vercel.app'
const config = {
// clientMode: { // Client mode authentication settings
// username: 'THETAXX12345678',
// password: '12345678',
// }
}
await initialize(endpoint, config);
}
init();
}, []);
return (
<SafeAreaView style={styles.container}>
<StatusBar barStyle="light-content" />
<TouchableOpacity style={styles.buttonBack} onPress={goTake}>
<Text style={styles.button}>Take a Photo</Text>
</TouchableOpacity>
<View style={styles.spacer} />
<TouchableOpacity style={styles.buttonBack} onPress={goList}>
<Text style={styles.button}>List Photos</Text>
</TouchableOpacity>
<View style={styles.spacer} />
<TouchableOpacity style={styles.buttonBack} onPress={goOptions}>
<Text style={styles.button}>Get Options</Text>
</TouchableOpacity>
</SafeAreaView>
);
};
export default MainMenu;
