Fix linting errors related to styling

Author: jakmro

examples/speech-to-text/screens/SpeechToTextScreen.tsx

@@ -90,13 +90,7 @@ export const SpeechToTextScreen = () => {
         </View>
         {downloadProgress !== 1 ? (
           <View style={styles.transcriptionContainer}>
-            <Text
-              style={{
-                ...styles.transcriptionText,
-                color: 'gray',
-                textAlign: 'center',
-              }}
-            >
+            <Text style={[styles.transcriptionText, styles.textGreyCenter]}>
               {`Downloading model: ${(Number(downloadProgress.toFixed(4)) * 100).toFixed(2)}%`}
             </Text>
           </View>
@@ -106,11 +100,7 @@ export const SpeechToTextScreen = () => {
               style={
                 sequence
                   ? styles.transcriptionText
-                  : {
-                      ...styles.transcriptionText,
-                      color: 'gray',
-                      textAlign: 'center',
-                    }
+                  : [styles.transcriptionText, styles.textGreyCenter]
               }
             >
               {sequence ||
@@ -121,7 +111,7 @@ export const SpeechToTextScreen = () => {
         )}
         {error && (
           <Text
-            style={{ ...styles.transcriptionText, color: 'red' }}
+            style={[styles.transcriptionText, styles.redText]}
           >{`${error}`}</Text>
         )}
         <InputPrompt
@@ -140,18 +130,14 @@ export const SpeechToTextScreen = () => {
           <View
             style={[
               styles.recordingButtonWrapper,
-              buttonDisabled && {
-                borderColor: 'grey',
-              },
+              buttonDisabled && styles.borderGrey,
             ]}
           >
             <TouchableOpacity
               disabled={buttonDisabled}
               style={[
                 styles.recordingButton,
-                buttonDisabled && {
-                  backgroundColor: 'grey',
-                },
+                buttonDisabled && styles.backgroundGrey,
               ]}
               onPress={async () => {
                 if (!audioUrl) {
@@ -162,7 +148,7 @@ export const SpeechToTextScreen = () => {
                 }
               }}
             >
-              <Text style={{ ...styles.recordingButtonText, fontSize: 13 }}>
+              <Text style={[styles.recordingButtonText, styles.font13]}>
                 {'TRANSCRIBE FROM URL'}
               </Text>
             </TouchableOpacity>
@@ -172,20 +158,17 @@ export const SpeechToTextScreen = () => {
           <View
             style={[
               styles.recordingButtonWrapper,
-              recordingButtonDisabled && {
-                borderColor: 'grey',
-              },
-              isRecording && { borderColor: 'rgb(240, 63, 50)' },
+              recordingButtonDisabled && styles.borderGrey,
+              isRecording && styles.borderRed,
             ]}
           >
+            zRXW
             <TouchableOpacity
               disabled={recordingButtonDisabled || isGenerating}
               style={[
                 styles.recordingButton,
-                recordingButtonDisabled && {
-                  backgroundColor: 'grey',
-                },
-                isRecording && { backgroundColor: 'rgb(240, 63, 50)' },
+                recordingButtonDisabled && styles.backgroundGrey,
+                isRecording && styles.backgroundRed,
               ]}
               onPress={handleRecordPress}
             >
@@ -194,11 +177,7 @@ export const SpeechToTextScreen = () => {
               </Text>
               {DeviceInfo.isEmulatorSync() && (
                 <Text
-                  style={{
-                    ...styles.recordingButtonText,
-                    color: 'rgb(254, 148, 141)',
-                    fontSize: 11,
-                  }}
+                  style={[styles.recordingButtonText, styles.emulatorWarning]}
                 >
                   recording does not work on emulator
                 </Text>
@@ -286,4 +265,30 @@ const styles = StyleSheet.create({
     color: 'white',
     fontWeight: '600',
   },
+  textGreyCenter: {
+    color: 'gray',
+    textAlign: 'center',
+  },
+  redText: {
+    color: 'red',
+  },
+  borderGrey: {
+    borderColor: 'grey',
+  },
+  backgroundGrey: {
+    backgroundColor: 'grey',
+  },
+  font13: {
+    fontSize: 13,
+  },
+  borderRed: {
+    borderColor: 'rgb(240, 63, 50)',
+  },
+  backgroundRed: {
+    backgroundColor: 'rgb(240, 63, 50)',
+  },
+  emulatorWarning: {
+    color: 'rgb(254, 148, 141)',
+    fontSize: 11,
+  },
 });