use pressable instead of touchableOpacity

liglig99 · May 5, 2024 · f528863 · f528863
1 parent 34cfe5b
commit f528863
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 38 deletions.
diff --git a/frontend/app/home.tsx b/frontend/app/home.tsx
@@ -1,4 +1,4 @@
-import { TouchableOpacity, Text, SafeAreaView } from 'react-native';
+import { Text, SafeAreaView, Pressable } from 'react-native';
 import { Stack, useRouter } from 'expo-router';
 import React, { useState } from 'react';
 import ProfileButton from '../components/ProfileButton';
@@ -50,18 +50,18 @@ const HomeScreen = () => {
           showAllAction={() => router.navigate('workouts')}
         >
           {workouts.map((workout, index) => (
-            <TouchableOpacity
+            <Pressable
               onPress={() => router.navigate(`/workout/${workout._id}`)}
               key={index}
             >
               <Card key={index}>
                 <Text style={styles.buttonText}>{workout.name}</Text>
               </Card>
-            </TouchableOpacity>
+            </Pressable>
           ))}
-          <TouchableOpacity onPress={() => router.navigate('workout/create')}>
+          <Pressable onPress={() => router.navigate('workout/create')}>
             <AddCard />
-          </TouchableOpacity>
+          </Pressable>
         </HorizontalScrollView>
       </SafeAreaView>
     </>

diff --git a/frontend/app/login.tsx b/frontend/app/login.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useRouter } from 'expo-router';
-import { Text, TextInput, TouchableOpacity, SafeAreaView } from 'react-native';
+import { Text, TextInput, Pressable, SafeAreaView } from 'react-native';
 import instance from '../interceptors';
 import styles from '../styles';
 
@@ -51,10 +51,9 @@ const LoginScreen = () => {
         underlineColorAndroid="transparent"
         autoCapitalize="none"
       />
-      {/* TODO: use Pressable */}
-      <TouchableOpacity style={styles.buttonContainer} onPress={handleLogin}>
+      <Pressable style={styles.buttonContainer} onPress={handleLogin}>
         <Text style={styles.buttonText}>Login</Text>
-      </TouchableOpacity>
+      </Pressable>
     </SafeAreaView>
   );
 };

diff --git a/frontend/app/workout/[id].tsx b/frontend/app/workout/[id].tsx
@@ -1,6 +1,6 @@
 import { useLocalSearchParams } from 'expo-router';
 import React, { useEffect, useState } from 'react';
-import { SafeAreaView, Text, TouchableOpacity } from 'react-native';
+import { SafeAreaView, Text, Pressable } from 'react-native';
 import styles from '../../styles';
 import ExerciseCard from '../../components/ExerciseCard';
 import HorizontalScrollView from '../../components/HorizontalScollView';
@@ -36,9 +36,9 @@ const WorkoutPage = () => {
           <ExerciseCard key={index} exercise={exercise} />
         ))}
       </HorizontalScrollView>
-      <TouchableOpacity style={styles.buttonContainer}>
+      <Pressable style={styles.buttonContainer}>
         <Text style={styles.buttonText}>Start Workout</Text>
-      </TouchableOpacity>
+      </Pressable>
     </SafeAreaView>
   );
 };

diff --git a/frontend/app/workout/create.tsx b/frontend/app/workout/create.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Text, TextInput, TouchableOpacity, SafeAreaView } from 'react-native';
+import { Text, TextInput, Pressable, SafeAreaView } from 'react-native';
 import styles from '../../styles';
 import AddExerciseModal from '../../components/AddExerciseModal';
 import AddCard from '../../components/AddCard';
@@ -76,20 +76,17 @@ const CreateWorkout = () => {
       />
       <HorizontalScrollView title="Exercises">
         {exercises.map((exercise, index) => (
-          <TouchableOpacity
-            key={index}
-            onPress={() => handleExerciseClick(exercise)}
-          >
+          <Pressable key={index} onPress={() => handleExerciseClick(exercise)}>
             <ExerciseCard exercise={exercise} />
-          </TouchableOpacity>
+          </Pressable>
         ))}
-        <TouchableOpacity onPress={() => setModalVisible(true)}>
+        <Pressable onPress={() => setModalVisible(true)}>
           <AddCard />
-        </TouchableOpacity>
+        </Pressable>
       </HorizontalScrollView>
-      <TouchableOpacity style={styles.buttonContainer} onPress={handleSubmit}>
+      <Pressable style={styles.buttonContainer} onPress={handleSubmit}>
         <Text style={styles.buttonText}>Create Workout</Text>
-      </TouchableOpacity>
+      </Pressable>
       <AddExerciseModal
         modalVisible={modalVisible}
         onClose={() => setModalVisible(false)}

diff --git a/frontend/components/AddExerciseModal.tsx b/frontend/components/AddExerciseModal.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Modal, Text, TextInput, TouchableOpacity } from 'react-native';
+import { Modal, Text, TextInput, Pressable } from 'react-native';
 import styles from '../styles';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import NumericInput from './NumericInput';
@@ -36,17 +36,17 @@ const AddExerciseModal = ({
         />
         <NumericInput title="Reps" value={reps} onChange={setReps} />
         <NumericInput title="Sets" value={sets} onChange={setSets} />
-        <TouchableOpacity
+        <Pressable
           style={styles.buttonContainer}
           onPress={() =>
             onAddExercise({ exercise: { name: exerciseName }, reps, sets })
           }
         >
           <Text style={styles.buttonText}>Add Exercise</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={styles.buttonContainer} onPress={onClose}>
+        </Pressable>
+        <Pressable style={styles.buttonContainer} onPress={onClose}>
           <Text style={styles.buttonText}>Cancel</Text>
-        </TouchableOpacity>
+        </Pressable>
       </SafeAreaView>
     </Modal>
   );

diff --git a/frontend/components/HorizontalScollView.tsx b/frontend/components/HorizontalScollView.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ScrollView, View, Text, TouchableOpacity } from 'react-native';
+import { ScrollView, View, Text, Pressable } from 'react-native';
 
 import styles from '../styles';
 
@@ -19,9 +19,9 @@ const HorizontalScrollView: React.FC<HorizontalScrollViewProps> = ({
       <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
         <Text style={styles.subtitile}>{title}</Text>
         {showAllAction && (
-          <TouchableOpacity onPress={showAllAction}>
+          <Pressable onPress={showAllAction}>
             <Text style={styles.subtitile}>Show all</Text>
-          </TouchableOpacity>
+          </Pressable>
         )}
       </View>
       <ScrollView

diff --git a/frontend/components/NumericInput.tsx b/frontend/components/NumericInput.tsx
@@ -1,4 +1,4 @@
-import { View, Text, TouchableOpacity } from 'react-native';
+import { View, Text, Pressable } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
 import styles from '../styles';
 
@@ -28,27 +28,27 @@ const NumericInput = ({ title, value, onChange, min = 0, max = 100 }) => {
           justifyContent: 'center',
         }}
       >
-        <TouchableOpacity style={styles.buttonContainer} onPress={handleMinus}>
+        <Pressable style={styles.buttonContainer} onPress={handleMinus}>
           <MaterialIcons
             style={{ padding: 10 }}
             name="remove"
             size={24}
             color="black"
           />
-        </TouchableOpacity>
+        </Pressable>
         <View
           style={[styles.buttonContainer, { marginLeft: 0, marginRight: 0 }]}
         >
           <Text style={[styles.buttonText, { width: 100 }]}>{value}</Text>
         </View>
-        <TouchableOpacity style={styles.buttonContainer} onPress={handlePlus}>
+        <Pressable style={styles.buttonContainer} onPress={handlePlus}>
           <MaterialIcons
             style={{ padding: 10 }}
             name="add"
             size={24}
             color="black"
           />
-        </TouchableOpacity>
+        </Pressable>
       </View>
     </View>
   );

diff --git a/frontend/components/ProfileButton.js b/frontend/components/ProfileButton.js
@@ -1,17 +1,17 @@
 import React from 'react';
-import { TouchableOpacity } from 'react-native';
+import { Pressable } from 'react-native';
 import { MaterialIcons } from '@expo/vector-icons';
 import styles from '../styles';
 
 export default function ProfileButton({ onPress }) {
   return (
-    <TouchableOpacity onPress={onPress}>
+    <Pressable onPress={onPress}>
       <MaterialIcons
         style={styles.headerButton}
         name="person"
         size={24}
         color="black"
       />
-    </TouchableOpacity>
+    </Pressable>
   );
 }