AudioRecorder - recording to file

apps/common-app/package.json

@@ -7,16 +7,18 @@
     "react-native": "*"
   },
   "dependencies": {
-    "@react-navigation/native": "7.1.18",
+    "@react-navigation/bottom-tabs": "^7.8.7",
+    "@react-navigation/native": "7.1.22",
     "@react-navigation/native-stack": "7.3.28",
     "@react-navigation/stack": "7.4.10",
     "@shopify/react-native-skia": "2.3.0",
+    "lucide-react-native": "^0.555.0",
     "react-native-audio-api": "workspace:*",
     "react-native-background-timer": "2.4.1",
     "react-native-gesture-handler": "2.28.0",
     "react-native-reanimated": "4.1.3",
     "react-native-safe-area-context": "5.6.1",
-    "react-native-screens": "4.17.1",
+    "react-native-screens": "4.18.0",
     "react-native-svg": "15.14.0",
     "react-native-worklets": "0.6.1"
   },
@@ -41,6 +43,6 @@
     "react": "19.1.1",
     "react-native": "0.82.0",
     "react-test-renderer": "19.1.1",
-    "typescript": "5.8.3"
+    "typescript": "~5.8.3"
   }
 }

apps/common-app/prettier.config.js

@@ -0,0 +1,10 @@
+/** @type {import('prettier').Config} */
+module.exports = {
+  plugins: ["prettier-plugin-jsdoc"],
+  bracketSameLine: false,
+  printWidth: 80,
+  singleQuote: true,
+  trailingComma: "es5",
+  tabWidth: 2,
+  arrowParens: "always",
+};

apps/common-app/src/App.tsx

@@ -1,5 +1,6 @@
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
+import { Gauge, ListCheck, Waves } from 'lucide-react-native';
 import type { FC } from 'react';
 import React from 'react';
 import {
@@ -8,22 +9,53 @@ import {
   Pressable,
   StyleSheet,
   Text,
+  View,
 } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { Spacer } from './components';
 import Container from './components/Container';
+import { demos, DemoScreen } from './demos';
 import { Example, Examples, MainStackProps } from './examples';
 import { colors, layout } from './styles';
 
 const Stack = createStackNavigator();
 
-const ItemSeparatorComponent = () => <Spacer.Vertical size={16} />;
+const TestsScreen: FC = () => {
+  const navigation = useNavigation<MainStackProps>();
+
+  const renderItem: ListRenderItem<Example> = ({
+    item: { Icon, key, title },
+  }) => (
+    <Pressable
+      key={key}
+      style={styles.buttonSmall}
+      onPress={() => navigation.navigate(key)}
+    >
+      <Icon color={colors.white} size={18} />
+      <Text style={styles.titleSmall}>{title}</Text>
+    </Pressable>
+  );
+
+  return (
+    <Container headless>
+      <FlatList
+        data={Examples}
+        renderItem={renderItem}
+        keyExtractor={(item) => item.key}
+        contentContainerStyle={styles.scrollView}
+        ItemSeparatorComponent={ItemSeparatorComponentSmall}
+        numColumns={2}
+      />
+    </Container>
+  );
+};
 
-const HomeScreen: FC = () => {
+const DemoAppsScreen: FC = () => {
   const navigation = useNavigation<MainStackProps>();
 
-  const renderItem: ListRenderItem<Example> = ({ item }) => (
+  const renderItem: ListRenderItem<DemoScreen> = ({ item }) => (
     <Pressable
       onPress={() => navigation.navigate(item.key)}
       key={item.key}
@@ -32,15 +64,18 @@ const HomeScreen: FC = () => {
         { borderStyle: pressed ? 'solid' : 'dashed' },
       ]}
     >
-      <Text style={styles.title}>{item.title}</Text>
-      <Text style={styles.subtitle}>{item.subtitle}</Text>
+      <item.icon color={colors.white} size={24} />
+      <View style={styles.buttonInner}>
+        <Text style={styles.title}>{item.title}</Text>
+        <Text style={styles.subtitle}>{item.subtitle}</Text>
+      </View>
     </Pressable>
   );
 
   return (
-    <Container>
+    <Container headless>
       <FlatList
-        data={Examples}
+        data={demos}
         renderItem={renderItem}
         keyExtractor={(item) => item.key}
         contentContainerStyle={styles.scrollView}
@@ -50,6 +85,77 @@ const HomeScreen: FC = () => {
   );
 };
 
+const OtherScreen: FC = () => {
+  return <Container headless />;
+};
+
+const MainTabs = createBottomTabNavigator<MainStackProps>({
+  screens: {
+    Tests: TestsScreen,
+    DemoApps: DemoAppsScreen,
+    Other: OtherScreen,
+  },
+});
+
+const tabBarIcon = ({
+  routeName,
+  color,
+  size,
+}: {
+  routeName: string;
+  color: string;
+  size: number;
+}) => {
+  if (routeName === 'Tests') {
+    return <ListCheck color={color} size={size} />;
+  } else if (routeName === 'DemoApps') {
+    return <Gauge color={color} size={size} />;
+  } else if (routeName === 'Other') {
+    return <Waves color={color} size={size} />;
+  }
+  return null;
+};
+
+const MainTabsScreen: FC = () => {
+  return (
+    <MainTabs.Navigator
+      screenOptions={({ route }: { route: { name: string } }) => ({
+        tabBarIcon: ({ color, size }: { color: string; size: number }) =>
+          tabBarIcon({ routeName: route.name, color, size }),
+        tabBarActiveTintColor: '#ff7774',
+        tabBarInactiveTintColor: colors.border,
+        tabBarTransparent: true,
+        tabBarStyle: {
+          backgroundColor: colors.background,
+        },
+        headerShown: false,
+      })}
+    >
+      <MainTabs.Screen
+        name="Tests"
+        component={TestsScreen}
+        options={{
+          title: 'Tests',
+        }}
+      />
+      <MainTabs.Screen
+        name="DemoApps"
+        component={DemoAppsScreen}
+        options={{
+          title: 'Demo Apps',
+        }}
+      />
+      <MainTabs.Screen
+        name="Other"
+        component={OtherScreen}
+        options={{
+          title: 'Other',
+        }}
+      />
+    </MainTabs.Navigator>
+  );
+};
+
 const App: FC = () => {
   return (
     <GestureHandlerRootView style={styles.container}>
@@ -62,14 +168,14 @@ const App: FC = () => {
               backgroundColor: 'transparent',
             },
             headerTintColor: colors.white,
-            headerBackTitle: ' ',
+            headerBackTitle: 'Back',
             headerBackAccessibilityLabel: 'Go back',
           }}
         >
           <Stack.Screen
-            name="Home"
-            component={HomeScreen}
-            options={{ title: 'Audio API examples' }}
+            name="MainTabs"
+            component={MainTabsScreen}
+            options={{ headerShown: false }}
           />
           {Examples.map((item) => (
             <Stack.Screen
@@ -79,12 +185,32 @@ const App: FC = () => {
               options={{ title: item.title }}
             />
           ))}
+          {demos.map((item) => (
+            <Stack.Screen
+              key={item.key}
+              name={item.key}
+              component={item.screen}
+              options={{ title: item.title }}
+            />
+          ))}
         </Stack.Navigator>
       </NavigationContainer>
     </GestureHandlerRootView>
   );
 };
 
+export default App;
+
+const ItemSeparatorComponent = () => <Spacer.Vertical size={16} />;
+
+const ItemSeparatorComponentSmall = () => (
+  <View>
+    <Spacer.Vertical size={6} />
+    <View style={styles.hr} />
+    <Spacer.Vertical size={6} />
+  </View>
+);
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -93,6 +219,7 @@ const styles = StyleSheet.create({
     fontSize: 24,
     fontWeight: '700',
     color: colors.white,
+    lineHeight: 24,
   },
   subtitle: {
     opacity: 0.6,
@@ -104,10 +231,45 @@ const styles = StyleSheet.create({
     borderRadius: layout.radius,
     paddingVertical: layout.spacing * 2,
     paddingHorizontal: layout.spacing * 2,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: layout.spacing,
+  },
+  buttonInner: {
+    flexShrink: 1,
+  },
+  buttonSmall: {
+    padding: layout.spacing,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: layout.spacing,
+    width: '48%',
+    margin: '1%',
+    height: 40,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: colors.white,
+  },
+  titleSmall: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: colors.white,
+    marginLeft: 4,
+    flexShrink: 1,
+  },
+  subtitleSmall: {
+    opacity: 0.6,
+    color: colors.white,
   },
-  scrollView: {
-    padding: layout.spacing * 2,
+  scrollView: {},
+  hr: {
+    // height: StyleSheet.hairlineWidth,
+    // // backgroundColor: colors.border,
+    // marginLeft: 60,
+    // marginRight: '35%',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: layout.spacing,
   },
 });
-
-export default App;

apps/common-app/src/components/BGGradient.tsx

@@ -1,6 +1,6 @@
+import { Canvas, RadialGradient, Rect, vec } from '@shopify/react-native-skia';
 import React, { useCallback, useState } from 'react';
 import { LayoutChangeEvent, StyleSheet, View } from 'react-native';
-import { vec, Rect, Canvas, RadialGradient } from '@shopify/react-native-skia';
 
 import { colors } from '../styles';
 
@@ -19,7 +19,7 @@ const BGGradient = () => {
       <Canvas style={styles.canvas}>
         <Rect x={0} y={0} width={size.width} height={size.height}>
           <RadialGradient
-            r={size.width}
+            r={size.width / 4}
             c={vec(size.width / 2, 0)}
             colors={[colors.backgroundLight, colors.background]}
           />

apps/common-app/src/components/Container.tsx

@@ -1,26 +1,35 @@
 import React, { PropsWithChildren } from 'react';
-import { SafeAreaView } from 'react-native-safe-area-context';
 import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
 
-import BGGradient from './BGGradient';
 import { colors } from '../styles';
 
 type ContainerProps = PropsWithChildren<{
   style?: StyleProp<ViewStyle>;
   centered?: boolean;
   disablePadding?: boolean;
+  headless?: boolean;
 }>;
 
 const headerPadding = 120; // eyeballed
 
 const Container: React.FC<ContainerProps> = (props) => {
-  const { children, style, centered, disablePadding } = props;
+  const { children, style, centered, disablePadding, headless } = props;
 
   return (
     <SafeAreaView
-      edges={['bottom', 'left', 'right']}
-      style={[styles.basic, centered && styles.centered, !disablePadding && styles.padding, style]}>
-      <BGGradient />
+      edges={
+        headless
+          ? ['bottom', 'left', 'right', 'top']
+          : ['bottom', 'left', 'right']
+      }
+      style={[
+        headless ? styles.basicHeadless : styles.basic,
+        centered && styles.centered,
+        !disablePadding && styles.padding,
+        style,
+      ]}
+    >
       {children}
     </SafeAreaView>
   );
@@ -34,8 +43,13 @@ const styles = StyleSheet.create({
     paddingTop: headerPadding,
     backgroundColor: colors.background,
   },
+  basicHeadless: {
+    flex: 1,
+    backgroundColor: colors.background,
+    paddingTop: 20,
+  },
   padding: {
-    padding: 24,
+    paddingHorizontal: 18,
   },
   centered: {
     alignItems: 'center',