feat: allow renaming the recordings

Author: AlirezaHadjar

example/src/components/RecordButton.tsx

@@ -62,7 +62,7 @@ export default function RecordButton({
 const styles = StyleSheet.create({
   container: {
     paddingHorizontal: 16,
-    paddingVertical: 16,
+    marginTop: 16,
   },
   button: {
     flexDirection: 'row',

example/src/components/RecordingItem.tsx

@@ -1,4 +1,11 @@
-import { View, Text, TouchableOpacity, StyleSheet, Share } from 'react-native';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Share,
+  TextInput,
+} from 'react-native';
 import type { RecordedHaptic } from '../types/recording';
 
 interface RecordingItemProps {
@@ -9,6 +16,7 @@ interface RecordingItemProps {
   onPlay: (id: string) => void;
   onPause: (id: string) => void;
   onDelete: (id: string) => void;
+  onNameChange: (id: string, name: string) => void;
 }
 
 export default function RecordingItem({
@@ -19,6 +27,7 @@ export default function RecordingItem({
   onPlay,
   onPause,
   onDelete,
+  onNameChange,
 }: RecordingItemProps) {
   const formatDuration = (seconds: number) => {
     const mins = Math.floor(seconds / 60);
@@ -59,10 +68,22 @@ export default function RecordingItem({
     <TouchableOpacity
       onPress={() => onSelect(recording.id)}
       activeOpacity={0.8}
+      disabled={isSelected}
     >
       <View style={[styles.container, isSelected && styles.selectedContainer]}>
         <View style={styles.info}>
-          <Text style={styles.name}>{recording.name}</Text>
+          <TextInput
+            style={styles.name}
+            editable={isSelected}
+            pointerEvents={isSelected ? 'auto' : 'none'}
+            defaultValue={recording.name}
+            onChangeText={(text) => {
+              onNameChange(recording.id, text);
+            }}
+            returnKeyType="done"
+            placeholderTextColor="#636366"
+            maxLength={50}
+          />
           <View style={styles.meta}>
             <Text style={styles.metaText}>
               {formatDuration(recording.duration)}
@@ -139,6 +160,7 @@ const styles = StyleSheet.create({
     fontWeight: '600',
     color: '#FFFFFF',
     marginBottom: 4,
+    paddingEnd: 16,
   },
   meta: {
     flexDirection: 'row',
@@ -158,9 +180,9 @@ const styles = StyleSheet.create({
     gap: 8,
   },
   button: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
+    width: 30,
+    height: 30,
+    borderRadius: 30 / 2,
     alignItems: 'center',
     justifyContent: 'center',
   },

example/src/components/RecordingsList.tsx

@@ -1,8 +1,15 @@
-import { View, Text, StyleSheet, FlatList, TouchableOpacity } from 'react-native';
+import {
+  View,
+  Text,
+  StyleSheet,
+  FlatList,
+  TouchableOpacity,
+} from 'react-native';
 import type { RecordedHaptic } from '../types/recording';
 import RecordingItem from './RecordingItem';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { Link } from 'expo-router';
+import { KeyboardStickyView } from 'react-native-keyboard-controller';
 
 interface RecordingsListProps {
   recordings: RecordedHaptic[];
@@ -12,6 +19,7 @@ interface RecordingsListProps {
   onPlay: (id: string) => void;
   onPause: (id: string) => void;
   onDelete: (id: string) => void;
+  onNameChange: (id: string, name: string) => void;
 }
 
 export default function RecordingsList({
@@ -22,6 +30,7 @@ export default function RecordingsList({
   onPlay,
   onPause,
   onDelete,
+  onNameChange,
 }: RecordingsListProps) {
   const insets = useSafeAreaInsets();
 
@@ -45,7 +54,7 @@ export default function RecordingsList({
   }
 
   return (
-    <View style={styles.container}>
+    <KeyboardStickyView style={styles.container}>
       <View style={styles.header}>
         <Text style={styles.title}>Recordings</Text>
         <Link href="/import-modal" asChild>
@@ -57,6 +66,8 @@ export default function RecordingsList({
       <FlatList
         data={recordings}
         keyExtractor={(item) => item.id}
+        keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="interactive"
         renderItem={({ item }) => (
           <RecordingItem
             recording={item}
@@ -66,18 +77,23 @@ export default function RecordingsList({
             onPlay={onPlay}
             onPause={onPause}
             onDelete={onDelete}
+            onNameChange={onNameChange}
           />
         )}
         contentContainerStyle={{ paddingBottom: insets.bottom + 16 }}
       />
-    </View>
+    </KeyboardStickyView>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     paddingHorizontal: 16,
+    paddingTop: 16,
+    borderRadius: 30,
+    overflow: 'hidden',
+    backgroundColor: '#000',
   },
   header: {
     flexDirection: 'row',

example/src/contexts/RecorderContext.tsx

@@ -54,6 +54,7 @@ interface RecorderContextValue {
   onUserScrollEnd: () => void;
   deleteRecording: (id: string) => void;
   importRecording: (recording: RecordedHaptic) => void;
+  renameRecording: (id: string, name: string) => void;
 }
 
 const RecorderContext = createContext<RecorderContextValue | null>(null);
@@ -392,6 +393,12 @@ export function RecorderProvider({ children }: { children: ReactNode }) {
     setRecordings([...recordings, recording]);
   };
 
+  const renameRecording = (id: string, name: string) => {
+    setRecordings(
+      recordings.map((r) => (r.id === id ? { ...r, name } : r))
+    );
+  };
+
   return (
     <RecorderContext.Provider
       value={{
@@ -426,6 +433,7 @@ export function RecorderProvider({ children }: { children: ReactNode }) {
         onUserScrollEnd,
         deleteRecording,
         importRecording,
+        renameRecording,
       }}
     >
       {children}

example/src/screens/Recorder.tsx

@@ -47,6 +47,7 @@ function RecorderContent() {
     onUserScrollStart,
     onUserScrollEnd,
     deleteRecording,
+    renameRecording,
   } = useRecorder();
 
   const [playingId, setPlayingId] = useState<string | null>(null);
@@ -212,6 +213,7 @@ function RecorderContent() {
         onPlay={handlePlayRecording}
         onPause={handlePauseRecording}
         onDelete={deleteRecording}
+        onNameChange={renameRecording}
       />
     </View>
   );