feat: clear list button and disabled buttons logic for apps/text-embeddings

Author: mlodyjesienin

apps/text-embeddings/App.tsx

@@ -100,6 +100,14 @@ export default function App() {
     setTopMatches([]);
   };
 
+  const clearList = async () => {
+    if (!model.isReady) return;
+    try {
+      setSentencesWithEmbeddings([]);
+    } catch (error) {
+      console.error('Error clearing the list:', error);
+    }
+  };
   const getModelStatusText = () => {
     if (model.error) {
       return `Oops! Error: ${model.error}`;
@@ -118,18 +126,16 @@ export default function App() {
       >
         <ScrollView contentContainerStyle={styles.scrollContainer}>
           <Text style={styles.heading}>Text Embeddings Playground</Text>
-
           <Text style={styles.sectionTitle}>{getModelStatusText()}</Text>
 
           <View style={styles.card}>
-            <Text style={styles.sectionTitle}>Existing Sentences</Text>
+            <Text style={styles.sectionTitle}>List of Existing Sentences</Text>
             {sentencesWithEmbeddings.map((item, index) => (
               <Text key={index} style={styles.sentenceText}>
                 - {item.sentence}
               </Text>
             ))}
           </View>
-
           <View style={styles.card}>
             <Text style={styles.sectionTitle}>Try Your Sentence</Text>
             <TextInput
@@ -139,24 +145,80 @@ export default function App() {
               onChangeText={setInputSentence}
               multiline
             />
-
-            <View style={styles.buttonGroup}>
+            <View style={styles.buttonContainer}>
               <TouchableOpacity
                 onPress={checkSimilarities}
-                style={styles.buttonPrimary}
-              >
-                <Ionicons name="search" size={16} color="white" />
-                <Text style={styles.buttonText}> Find Similar</Text>
-              </TouchableOpacity>
-              <TouchableOpacity
-                onPress={addToSentences}
-                style={styles.buttonSecondary}
+                style={[
+                  styles.buttonPrimary,
+                  !inputSentence && styles.buttonDisabled,
+                ]}
+                disabled={!inputSentence}
               >
-                <Ionicons name="add-circle-outline" size={16} color="navy" />
-                <Text style={styles.buttonTextOutline}> Add to List</Text>
+                <Ionicons
+                  name="search"
+                  size={16}
+                  color={!inputSentence ? 'gray' : 'white'}
+                />
+                <Text
+                  style={[
+                    styles.buttonText,
+                    !inputSentence && styles.buttonTextDisabled,
+                  ]}
+                >
+                  Find Similar
+                </Text>
               </TouchableOpacity>
+              <View style={styles.buttonGroup}>
+                <TouchableOpacity
+                  onPress={addToSentences}
+                  style={[
+                    styles.buttonSecondary,
+                    !inputSentence && styles.buttonDisabled,
+                  ]}
+                  disabled={!inputSentence}
+                >
+                  <Ionicons
+                    name="add-circle-outline"
+                    size={16}
+                    color={!inputSentence ? 'gray' : 'navy'}
+                  />
+                  <Text
+                    style={[
+                      styles.buttonTextOutline,
+                      !inputSentence && styles.buttonTextDisabled,
+                    ]}
+                  >
+                    Add to List
+                  </Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  onPress={clearList}
+                  style={[
+                    styles.buttonSecondary,
+                    sentencesWithEmbeddings.length === 0 &&
+                      styles.buttonDisabled,
+                  ]}
+                  disabled={sentencesWithEmbeddings.length === 0}
+                >
+                  <Ionicons
+                    name="close-outline"
+                    size={16}
+                    color={
+                      sentencesWithEmbeddings.length === 0 ? 'gray' : 'navy'
+                    }
+                  />
+                  <Text
+                    style={[
+                      styles.buttonTextOutline,
+                      sentencesWithEmbeddings.length === 0 &&
+                        styles.buttonTextDisabled,
+                    ]}
+                  >
+                    Clear List
+                  </Text>
+                </TouchableOpacity>
+              </View>
             </View>
-
             {topMatches.length > 0 && (
               <View style={styles.topMatchesContainer}>
                 <Text style={styles.sectionTitle}>Top Matches</Text>
@@ -220,6 +282,10 @@ const styles = StyleSheet.create({
     minHeight: 40,
     textAlignVertical: 'top',
   },
+  buttonContainer: {
+    width: '100%',
+    gap: 10,
+  },
   buttonGroup: {
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -245,6 +311,10 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  buttonDisabled: {
+    backgroundColor: '#f0f0f0',
+    borderColor: '#d3d3d3',
+  },
   buttonText: {
     color: 'white',
     textAlign: 'center',
@@ -255,6 +325,9 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     fontWeight: '500',
   },
+  buttonTextDisabled: {
+    color: 'gray',
+  },
   topMatchesContainer: {
     marginTop: 20,
   },

apps/text-embeddings/ios/Podfile.lock

@@ -1,9 +1,9 @@
 PODS:
   - boost (1.84.0)
   - DoubleConversion (1.1.6)
-  - EXConstants (17.1.5):
+  - EXConstants (17.1.6):
     - ExpoModulesCore
-  - Expo (53.0.9):
+  - Expo (53.0.11):
     - DoubleConversion
     - ExpoModulesCore
     - glog
@@ -38,7 +38,7 @@ PODS:
     - ExpoModulesCore
   - ExpoKeepAwake (14.1.4):
     - ExpoModulesCore
-  - ExpoModulesCore (2.3.13):
+  - ExpoModulesCore (2.4.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1999,19 +1999,19 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   boost: 7e761d76ca2ce687f7cc98e698152abd03a18f90
   DoubleConversion: cb417026b2400c8f53ae97020b2be961b59470cb
-  EXConstants: a1112af878fddfe6acc0399473ac56a07ced0f47
-  Expo: a9fc723f6c8f673f0e7e036c9021772d3a1a0707
+  EXConstants: 9f310f44bfedba09087042756802040e464323c0
+  Expo: 4e8bda07d30b024b1732f87843a5349a3ecc1316
   ExpoAsset: 3bc9adb7dbbf27ae82c18ca97eb988a3ae7e73b1
   ExpoFileSystem: c36eb8155eb2381c83dda7dc210e3eec332368b6
   ExpoFont: abbb91a911eb961652c2b0a22eef801860425ed6
   ExpoKeepAwake: bf0811570c8da182bfb879169437d4de298376e7
-  ExpoModulesCore: 5d37821c36f3781dcd0ea9a393800c90eaa6259d
+  ExpoModulesCore: d431ffe83c8673d02cb38425594a5f5480fd3061
   fast_float: 06eeec4fe712a76acc9376682e4808b05ce978b6
   FBLazyVector: 84b955f7b4da8b895faf5946f73748267347c975
   fmt: a40bb5bd0294ea969aaaba240a927bd33d878cdd
   glog: 5683914934d5b6e4240e497e0f4a3b42d1854183
   hermes-engine: 314be5250afa5692b57b4dd1705959e1973a8ebe
-  opencv-rne: 2305807573b6e29c8c87e3416ab096d09047a7a0
+  opencv-rne: 63e933ae2373fc91351f9a348dc46c3f523c2d3f
   RCT-Folly: e78785aa9ba2ed998ea4151e314036f6c49e6d82
   RCTDeprecation: 83ffb90c23ee5cea353bd32008a7bca100908f8c
   RCTRequired: eb7c0aba998009f47a540bec9e9d69a54f68136e
@@ -2043,7 +2043,7 @@ SPEC CHECKSUMS:
   React-logger: 8edfcedc100544791cd82692ca5a574240a16219
   React-Mapbuffer: c3f4b608e4a59dd2f6a416ef4d47a14400194468
   React-microtasksnativemodule: 054f34e9b82f02bd40f09cebd4083828b5b2beb6
-  react-native-executorch: 4ee7537b9840b13ff8ee178affba1b2c73b5dc2a
+  react-native-executorch: a8c94a990bfdd03caf0f468948c0d5efdca0e1be
   React-NativeModulesApple: 2c4377e139522c3d73f5df582e4f051a838ff25e
   React-oscompat: ef5df1c734f19b8003e149317d041b8ce1f7d29c
   React-perflogger: 9a151e0b4c933c9205fd648c246506a83f31395d