feat: add functionalities

Author: lodev09

example/app.json

@@ -29,7 +29,13 @@
       "favicon": "./assets/images/favicon.png"
     },
     "plugins": [
-      "expo-router"
+      "expo-router",
+      [
+        "expo-av",
+        {
+          "microphonePermission": "Allow $(PRODUCT_NAME) to access your microphone."
+        }
+      ]
     ],
     "experiments": {
       "typedRoutes": true

example/app/(tabs)/_layout.tsx

@@ -20,16 +20,7 @@ export default function TabLayout() {
         options={{
           title: 'Home',
           tabBarIcon: ({ color, focused }) => (
-            <TabBarIcon name={focused ? 'home' : 'home-outline'} color={color} />
-          ),
-        }}
-      />
-      <Tabs.Screen
-        name="explore"
-        options={{
-          title: 'Explore',
-          tabBarIcon: ({ color, focused }) => (
-            <TabBarIcon name={focused ? 'code-slash' : 'code-slash-outline'} color={color} />
+            <TabBarIcon name={focused ? 'mic' : 'mic-outline'} color={color} />
           ),
         }}
       />

example/app/(tabs)/explore.tsx

@@ -1,5 +1,6 @@
 import React, { useRef } from 'react'
 import { Image, StyleSheet } from 'react-native'
+import { Audio } from 'expo-av'
 
 import { HelloWave } from '@/components/HelloWave'
 import ParallaxScrollView from '@/components/ParallaxScrollView'
@@ -11,7 +12,10 @@ import { ThemedRecorderSheet, type ThemedRecorderSheetRef } from '@/components/T
 const HomeScreen = () => {
   const recorderRef = useRef<ThemedRecorderSheetRef>(null)
 
-  const openRecorder = () => {
+  const openRecorder = async () => {
+    const permissionStatus = await Audio.requestPermissionsAsync()
+    if (!permissionStatus.granted) return
+
     recorderRef.current?.present()
   }
 
@@ -29,7 +33,7 @@ const HomeScreen = () => {
         <ThemedText type="title">Expo Recorder</ThemedText>
         <HelloWave />
       </ThemedView>
-      <ThemedButton title="Start Recording" onPress={openRecorder} />
+      <ThemedButton title="Open Recorder" onPress={openRecorder} />
       <ThemedRecorderSheet ref={recorderRef} />
     </ParallaxScrollView>
   )

example/app/(tabs)/index.tsx

@@ -1,11 +1,23 @@
-import React, { forwardRef, useRef, type Ref } from 'react'
-import { Pressable, View, type StyleProp, type ViewStyle, TouchableOpacity } from 'react-native'
+import React, { forwardRef, useRef, type Ref, useState } from 'react'
+import {
+  Pressable,
+  View,
+  type StyleProp,
+  type ViewStyle,
+  TouchableOpacity,
+  Text,
+  type TextStyle,
+} from 'react-native'
+import { Audio } from 'expo-av'
+import * as Haptics from 'expo-haptics'
 import Ionicons from '@expo/vector-icons/Ionicons'
 import Animated, {
   Extrapolation,
   interpolate,
   useAnimatedStyle,
   useSharedValue,
+  withSpring,
+  type WithSpringConfig,
 } from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Recorder, type RecorderRef } from '@lodev09/expo-recorder'
@@ -14,12 +26,18 @@ import { type TrueSheetProps, TrueSheet } from '@lodev09/react-native-true-sheet
 import { useThemeColor } from '@/hooks/useThemeColor'
 import { Box } from './Box'
 import { Spacing } from '@/constants/Spacing'
+import { formatTimer } from '@/utils/formatTimer'
 
 const RECORD_BUTTON_SIZE = 60
 const RECORD_BUTTON_BACKGROUND_SIZE = RECORD_BUTTON_SIZE + Spacing.md
 const RECORDING_INDICATOR_COLOR = '#d72d66'
 const RECORDING_INDICATOR_SCALE = 0.5
 
+const SPRING_SHORT_CONFIG: WithSpringConfig = {
+  stiffness: 120,
+  overshootClamping: true,
+}
+
 export interface ThemedRecorderSheetProps extends TrueSheetProps {
   lightColor?: string
   darkColor?: string
@@ -33,19 +51,51 @@ export const ThemedRecorderSheet = forwardRef(
 
     const insets = useSafeAreaInsets()
 
+    const [isRecording, setIsRecording] = useState(false)
+    const [isPlaying, setIsPlaying] = useState(false)
+    const [position, setPosition] = useState(0)
+
     const recorderRef = useRef<RecorderRef>(null)
 
     const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'recorderSheet')
     const iconColor = useThemeColor({}, 'recorderIcon')
     const tintColor = useThemeColor({}, 'recorderTint')
     const timelineColor = useThemeColor({}, 'recorderTimeline')
-    const textColor = useThemeColor({}, 'text')
+    const positionColor = useThemeColor({}, 'text')
     const recordBorderColor = useThemeColor({ light: 'rgba(0,0,0,0.3)' }, 'text')
     const recorderBackgroundColor = useThemeColor({}, 'recorderBackground')
 
     const scale = useSharedValue(1)
 
-    const toggleRecording = async () => {}
+    const toggleRecording = async () => {
+      const permissionStatus = await Audio.getPermissionsAsync()
+      if (!permissionStatus.granted) return
+
+      Haptics.selectionAsync()
+      if (isRecording) {
+        await recorderRef.current?.stopRecording()
+      } else {
+        await recorderRef.current?.startRecording()
+      }
+    }
+
+    const resetRecording = async () => {
+      if (isRecording) return
+
+      Haptics.selectionAsync()
+      await recorderRef.current?.resetRecording()
+    }
+
+    const togglePlayback = async () => {
+      if (isRecording) return
+
+      Haptics.selectionAsync()
+      if (isPlaying) {
+        await recorderRef.current?.stopPlayback()
+      } else {
+        await recorderRef.current?.startPlayback()
+      }
+    }
 
     const $recordIndicatorStyles: StyleProp<ViewStyle> = [
       $recordIndicator,
@@ -72,12 +122,35 @@ export const ThemedRecorderSheet = forwardRef(
           ref={recorderRef}
           tintColor={tintColor}
           timelineColor={timelineColor}
-          textColor={textColor}
           backgroundColor={recorderBackgroundColor}
+          onRecordReset={() => {
+            scale.value = 1
+            setIsRecording(false)
+            setIsPlaying(false)
+          }}
+          onRecordStart={() => {
+            scale.value = withSpring(RECORDING_INDICATOR_SCALE, SPRING_SHORT_CONFIG)
+            setIsRecording(true)
+          }}
+          onRecordStop={(uri) => {
+            scale.value = withSpring(1, SPRING_SHORT_CONFIG)
+            setIsRecording(false)
+
+            // Use this uri. Yay! 🎉
+            console.log(uri)
+          }}
+          onPlaybackStart={() => setIsPlaying(true)}
+          onPlaybackStop={() => setIsPlaying(false)}
+          onPositionChange={(position: number) => setPosition(position)}
         />
+        <View style={{ padding: Spacing.md, marginTop: Spacing.xxl }}>
+          <Text style={[$positionText, { color: positionColor ?? '#333333' }]}>
+            {formatTimer(Math.round(position / 100) * 100, true)}
+          </Text>
+        </View>
         <Box row justify="space-between" align="center" mt={Spacing.lg}>
           <Box>
-            <TouchableOpacity activeOpacity={0.8} style={$recordControl} onPress={() => undefined}>
+            <TouchableOpacity activeOpacity={0.5} style={$recordControl} onPress={resetRecording}>
               <Ionicons name="refresh" size={Spacing.xl} style={{ color: iconColor }} />
             </TouchableOpacity>
           </Box>
@@ -88,8 +161,12 @@ export const ThemedRecorderSheet = forwardRef(
             </Pressable>
           </Box>
           <Box>
-            <TouchableOpacity activeOpacity={0.8} style={$recordControl} onPress={() => undefined}>
-              <Ionicons name="play" size={Spacing.xl} style={{ color: iconColor }} />
+            <TouchableOpacity activeOpacity={0.8} style={$recordControl} onPress={togglePlayback}>
+              <Ionicons
+                name={isPlaying ? 'pause' : 'play'}
+                size={Spacing.xl}
+                style={{ color: iconColor }}
+              />
             </TouchableOpacity>
           </Box>
         </Box>
@@ -124,3 +201,9 @@ const $recordIndicator: ViewStyle = {
 const $recordControl: ViewStyle = {
   padding: Spacing.md,
 }
+
+const $positionText: TextStyle = {
+  fontWeight: 'medium',
+  fontSize: 28,
+  textAlign: 'center',
+}

example/components/ThemedRecorderSheet.tsx

@@ -4,6 +4,7 @@
   "version": "1.0.0",
   "scripts": {
     "start": "expo start",
+    "clean": "expo prebuild --clean",
     "android": "expo run:android",
     "ios": "expo run:ios",
     "web": "expo start --web"
@@ -13,10 +14,12 @@
     "@lodev09/expo-recorder": "workspace:^",
     "@lodev09/react-native-true-sheet": "^0.11.2",
     "@react-navigation/native": "^6.0.2",
+    "date-fns": "^3.6.0",
     "expo": "~51.0.2",
     "expo-av": "~14.0.4",
     "expo-constants": "~16.0.1",
     "expo-font": "~12.0.4",
+    "expo-haptics": "~13.0.1",
     "expo-linking": "~6.3.1",
     "expo-router": "~3.5.11",
     "expo-splash-screen": "~0.27.4",

example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lodev09/expo-recorder",
-  "version": "0.1.0",
+  "version": "0.0.1",
   "description": "Audio recorder sheet for your React Native apps ⏺️",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -55,7 +55,6 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "date-fns": "*",
     "expo-av": "*"
   },
   "devDependencies": {