format

example/index.tsx

@@ -25,6 +25,12 @@ Navigation.registerComponent('Home', () => gestureHandlerRootHOC(App), () => App
 Navigation.registerComponent('Media', () => gestureHandlerRootHOC(Media), () => Media);
 Navigation.registerComponent('Settings', () => gestureHandlerRootHOC(Settings), () => Settings);
 
+Navigation.events().registerNavigationButtonPressedListener((event) => {
+  if (event.buttonId === "back") {
+    Navigation.pop(event.componentId);
+  }
+});
+
 Navigation.events().registerAppLaunchedListener(async () => {
   const [cameraPermission, microphonePermission] = await Promise.all([
     Camera.getCameraPermissionStatus(),

example/src/App.tsx

@@ -171,6 +171,9 @@ export const App: NavigationFunctionComponent = ({ componentId }) => {
   const onNightModePressed = useCallback(() => {
     setEnableNightMode((n) => !n);
   }, []);
+  const onSettingsPressed = useCallback(() => {
+    Navigation.push(componentId, { component: { name: 'Settings' } })
+  }, [componentId]);
   //#endregion
 
   //#region Tap Gesture
@@ -245,6 +248,13 @@ export const App: NavigationFunctionComponent = ({ componentId }) => {
   });
   //#endregion
 
+  if (device != null && format != null) {
+    console.log(`Re-rendering camera page with ${isActive ? "active" : "inactive"} camera. `
+      + `Device: "${device.name}" (${format.photoWidth}x${format.photoHeight} @ ${fps}fps)`);
+  } else {
+    console.log(`re-rendering camera page without active camera`);
+  }
+
   // TODO: Implement camera flipping (back <-> front) while recording and stich the videos together
   // TODO: iOS: Use custom video data stream output to manually process the data and write the MOV/MP4 for more customizability.
   return (
@@ -255,24 +265,24 @@ export const App: NavigationFunctionComponent = ({ componentId }) => {
             <TapGestureHandler
               onHandlerStateChange={onDoubleTapGesture}
               numberOfTaps={2}>
-                <ReanimatedCamera
+              <ReanimatedCamera
-                  ref={camera}
+                ref={camera}
-                  style={StyleSheet.absoluteFill}
+                style={StyleSheet.absoluteFill}
-                  device={device}
+                device={device}
-                  format={format}
+                format={format}
-                  fps={fps}
+                fps={fps}
-                  hdr={enableHdr}
+                hdr={enableHdr}
-                  lowLightBoost={
+                lowLightBoost={
-                    device.supportsLowLightBoost && enableNightMode
+                  device.supportsLowLightBoost && enableNightMode
-                  }
+                }
-                  isActive={isActive}
+                isActive={isActive}
-                  onInitialized={onInitialized}
+                onInitialized={onInitialized}
-                  onError={onError}
+                onError={onError}
-                  enableZoomGesture={false}
+                enableZoomGesture={false}
-                  // TODO: Remove once https://github.com/software-mansion/react-native-reanimated/pull/1697 gets merged
+                // TODO: Remove once https://github.com/software-mansion/react-native-reanimated/pull/1697 gets merged
-                  // @ts-expect-error animatedProps should be Partial<P>
+                // @ts-expect-error animatedProps should be Partial<P>
-                  animatedProps={cameraAnimatedProps}
+                animatedProps={cameraAnimatedProps}
-                />
+              />
             </TapGestureHandler>
           </Reanimated.View>
         </PinchGestureHandler>
@@ -336,6 +346,13 @@ export const App: NavigationFunctionComponent = ({ componentId }) => {
             />
           </PressableOpacity>
         )}
+        <PressableOpacity style={styles.button} onPress={onSettingsPressed}>
+          <IonIcon
+            name="settings-outline"
+            color="white"
+            size={24}
+          />
+        </PressableOpacity>
       </View>
     </View>
   );

example/src/Settings.tsx

@@ -1,16 +1,36 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 
-import { StyleSheet, View, Text } from 'react-native';
+import { StyleSheet, View, Text, Linking } from 'react-native';
 import type { NavigationFunctionComponent } from 'react-native-navigation';
 
-export const Settings: NavigationFunctionComponent = ({ componentId }) => {
+
+export const Settings: NavigationFunctionComponent = () => {
+  const onCuventPressed = useCallback(() => {
+    Linking.openURL('https://cuvent.com')
+  }, []);
+
   return (
     <View style={styles.container}>
-      <Text>powered by Cuvent</Text>
+      <Text style={styles.aboutText}>Vision Camera is powered by{" "}
+        <Text style={styles.hyperlink} onPress={onCuventPressed}>Cuvent</Text>.
+      </Text>
     </View>
   );
 }
 
+Settings.options = {
+  topBar: {
+    visible: true,
+    title: {
+      text: 'Settings'
+    },
+    backButton: {
+      id: 'back',
+      showTitle: true,
+    }
+  }
+}
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -18,9 +38,15 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     backgroundColor: 'white',
   },
-  box: {
+  aboutText: {
-    width: 60,
+    fontSize: 14,
-    height: 60,
+    fontWeight: 'bold',
-    marginVertical: 20,
+    color: '#A9A9A9',
+    maxWidth: '50%',
+    textAlign: 'center',
+  },
+  hyperlink: {
+    color: '#007aff',
+    fontWeight: 'bold',
   },
 });