Version 1.0.2

app.json

@@ -15,15 +15,13 @@
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true
     },
     "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png",
+        "foregroundImage": "./assets/icon.png",
         "backgroundColor": "#FFFFFF"
       },
       "package": "com.oo_mayr.whatsappdirect"

src/components/IconButton.tsx

@@ -1,14 +1,19 @@
 import { StyleSheet, Pressable } from 'react-native';
 import React from 'react';
-import { FontAwesome, MaterialCommunityIcons } from '@expo/vector-icons';
+import {
+  FontAwesome,
+  MaterialCommunityIcons,
+  MaterialIcons,
+} from '@expo/vector-icons';
 
 import * as Haptics from 'expo-haptics';
 
 interface IconButtonProps {
   iconName:
     | React.ComponentProps<typeof FontAwesome>['name']
-    | React.ComponentProps<typeof MaterialCommunityIcons>['name'];
-  iconLibrary: 'FontAwesome' | 'MaterialCommunityIcons';
+    | React.ComponentProps<typeof MaterialCommunityIcons>['name']
+    | React.ComponentProps<typeof MaterialIcons>['name'];
+  iconLibrary: 'FontAwesome' | 'MaterialCommunityIcons' | 'MaterialIcons';
   onPress: () => void;
 }
 
@@ -22,6 +27,9 @@ const IconButton = ({ iconLibrary, iconName, onPress }: IconButtonProps) => {
     case 'MaterialCommunityIcons':
       DynamicIcon = MaterialCommunityIcons;
       break;
+    case 'MaterialIcons':
+      DynamicIcon = MaterialIcons;
+      break;
   }
 
   const onPressHandler = () => {

src/navigation/AppNavigator.tsx

@@ -9,7 +9,12 @@ import SaveNumber from '../screens/SaveNumber';
 type RootStackParamList = {
   Home: undefined;
   SavedNumbers: undefined;
-  SaveNumber: { number: string };
+  SaveNumber: {
+    id?: string;
+    number: string;
+    name?: string;
+    screen?: string;
+  };
 };
 
 type HomeScreenProps = NativeStackScreenProps<RootStackParamList, 'Home'>;

src/redux/savedNumbersReducer.ts

@@ -27,12 +27,21 @@ const savedNumbersSlice = createSlice({
         (number) => number.id !== action.payload
       );
     },
+    editNumber(state, action) {
+      const { id, name } = action.payload;
+      const numberToEdit = state.savedNumbers.find(
+        (number) => number.id === id
+      );
+      if (numberToEdit) {
+        numberToEdit.name = name;
+      }
+    },
     clearAllNumbers(state) {
       state.savedNumbers = [];
     },
   },
 });
 
-export const { addNumber, removeNumber, clearAllNumbers } =
+export const { addNumber, removeNumber, editNumber, clearAllNumbers } =
   savedNumbersSlice.actions;
 export default savedNumbersSlice.reducer;

src/screens/HomeScreen.tsx

@@ -19,7 +19,6 @@ export default function HomeScreen({ navigation, route }: HomeScreenProps) {
     Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
     if (number.length > 0) {
       Linking.openURL(`https://wa.me/${number}`);
-      setNumber('');
     } else {
       alert('Please enter a valid number');
     }
@@ -29,7 +28,6 @@ export default function HomeScreen({ navigation, route }: HomeScreenProps) {
     Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
     if (number.length > 0) {
       navigation.navigate('SaveNumber', { number });
-      setNumber('');
     } else {
       alert('Please enter a valid number');
     }
@@ -44,15 +42,15 @@ export default function HomeScreen({ navigation, route }: HomeScreenProps) {
         <TextInput
           value={number}
           style={styles.input}
-          placeholder='923321234567'
           keyboardType='numeric'
           onChangeText={(text) => setNumber(text)}
         />
+        <Text style={styles.text}>Example: 923321234567</Text>
         <View style={styles.buttonContainer}>
           <Button onPress={onChatHandler} title='Open Whatsapp' />
         </View>
         <View style={[styles.buttonContainer, { marginTop: '5%' }]}>
-          <Button onPress={onSaveHandler} title='Save Number' />
+          <Button onPress={onSaveHandler} title='Save' />
         </View>
         <Text style={styles.subText}>
           - Number should start with country code {'\n'}- Number should not
@@ -66,7 +64,7 @@ export default function HomeScreen({ navigation, route }: HomeScreenProps) {
         }}
         style={styles.link}
       >
-        Go To Saved Numbers {'->'}
+        Go To Saved Numbers
       </Link>
     </KeyboardAvoidingView>
   );
@@ -100,7 +98,7 @@ const styles = StyleSheet.create({
     fontFamily: 'UbuntuRegular',
   },
   input: {
-    marginTop: '2%',
+    marginVertical: '2%',
     backgroundColor: 'transparent',
     paddingVertical: '3%',
     paddingHorizontal: '5%',

src/screens/SaveNumber.tsx

@@ -9,26 +9,31 @@ import {
 import React from 'react';
 import { SaveNumberProps } from '../navigation/AppNavigator';
 import { useDispatch } from 'react-redux';
-import { addNumber } from '../redux/savedNumbersReducer';
+import { addNumber, editNumber } from '../redux/savedNumbersReducer';
 import { AppDispatch } from '../redux/store';
+import * as Haptics from 'expo-haptics';
 
 export default function SaveNumber({ navigation, route }: SaveNumberProps) {
-  const { number } = route.params;
-  const [name, setName] = React.useState<string>('');
-
+  const { number, name, id, screen } = route.params;
+  const [nameInp, setNameInp] = React.useState<string>(name ?? '');
   const dispatch = useDispatch<AppDispatch>();
 
   const onSaveNumber = () => {
-    if (name === '') {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    if (nameInp === '') {
       alert('Please enter a name');
     } else {
-      dispatch(
-        addNumber({
-          id: Math.random().toString(),
-          name: name.trim(),
-          number: number.trim(),
-        })
-      );
+      if (screen === 'SavedNumbers') {
+        dispatch(editNumber({ id, name: nameInp.trim() }));
+      } else {
+        dispatch(
+          addNumber({
+            id: Math.random().toString(),
+            name: nameInp.trim(),
+            number: number.trim(),
+          })
+        );
+      }
       navigation.goBack();
     }
   };
@@ -39,12 +44,13 @@ export default function SaveNumber({ navigation, route }: SaveNumberProps) {
       <View style={styles.container}>
         <Text style={styles.text}>Enter Name for {number}</Text>
         <TextInput
-          value={name}
+          value={nameInp}
           style={styles.input}
-          placeholder='Enter Name'
-          onChangeText={(text) => setName(text)}
+          onChangeText={(text) => setNameInp(text)}
           keyboardType='default'
+          autoCapitalize='words'
         />
+        <Text style={styles.text}>Example: John Doe</Text>
         <View style={styles.buttonContainer}>
           <Button onPress={onSaveNumber} title='Save' />
         </View>
@@ -74,7 +80,7 @@ const styles = StyleSheet.create({
     fontFamily: 'UbuntuRegular',
   },
   input: {
-    marginTop: '2%',
+    marginVertical: '2%',
     backgroundColor: 'transparent',
     paddingVertical: '3%',
     paddingHorizontal: '5%',

src/screens/SavedNumbers.tsx

@@ -20,14 +20,23 @@ const SavedNumbers = ({ route, navigation }: SavedNumbersProps) => {
   const numbers = useSelector((state: RootState) => state.savedNumbers);
   const dispatch = useDispatch<AppDispatch>();
 
-  const openWhatsApp = (number: string) => {
+  const openWhatsAppHandler = (number: string) => {
     Linking.openURL(`https://wa.me/${number}`);
   };
 
-  const deleteNumber = (id: string) => {
+  const deleteNumberHandler = (id: string) => {
     dispatch(removeNumber(id));
   };
 
+  const editNumberHandler = (id: string, name: string, number: string) => {
+    navigation.navigate('SaveNumber', {
+      id,
+      name,
+      number,
+      screen: 'SavedNumbers',
+    });
+  };
+
   const clearAll = () => {
     Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
     dispatch(clearAllNumbers());
@@ -41,15 +50,20 @@ const SavedNumbers = ({ route, navigation }: SavedNumbersProps) => {
           <Text style={styles.itemText}>{item.number}</Text>
         </View>
         <View style={styles.actionsColumn}>
+          <IconButton
+            iconLibrary='MaterialIcons'
+            iconName='edit'
+            onPress={() => editNumberHandler(item.id, item.name, item.number)}
+          />
           <IconButton
             iconLibrary='FontAwesome'
             iconName='whatsapp'
-            onPress={openWhatsApp.bind(null, item.number)}
+            onPress={openWhatsAppHandler.bind(null, item.number)}
           />
           <IconButton
             iconLibrary='MaterialCommunityIcons'
             iconName='delete-outline'
-            onPress={deleteNumber.bind(null, item.id)}
+            onPress={deleteNumberHandler.bind(null, item.id)}
           />
         </View>
       </View>
@@ -67,6 +81,7 @@ const SavedNumbers = ({ route, navigation }: SavedNumbersProps) => {
         data={numbers}
         renderItem={({ item }) => <RenderItem item={item} />}
         keyExtractor={(item) => item.id}
+        style={styles.listContainer}
       />
     </View>
   );
@@ -98,12 +113,13 @@ const styles = StyleSheet.create({
   container: {
     marginTop: '20%',
   },
+  listContainer: {
+    marginTop: '5%',
+  },
   itemContainer: {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    padding: 10,
-    marginVertical: 8,
-    marginHorizontal: 16,
+    marginVertical: '4%',
     borderRadius: 10,
   },
   detailsColumn: {