Internationalize remaining TODO-marked UI text in Expo app

Views/NewGroup.js

@@ -3,6 +3,7 @@ import { StyleSheet, SafeAreaView, ImageBackground, View, ScrollView, Alert, Ima
 import { Title, TextInput, Button, Text, Switch } from 'react-native-paper';
 import API from "../API";
 import * as ImagePicker from 'expo-image-picker';
+import i18n from "../i18nMessages.js";
 
 const DefaultPhoto = "https://social.emmint.com/uploads/e6f9be6d665dc43417701bf16a90122c.png";
 
@@ -108,33 +109,33 @@ const NewGroup = ({ navigation }) => {
                 imageStyle={styles.backgroundImage}
             >
                 <ScrollView contentContainerStyle={styles.container}>
-                    <Title style={styles.title}>New Group</Title>
+                    <Title style={styles.title}>{i18n.t("message.newGroup")}</Title>
                     <View style={styles.photoRow}>
                         <Image
                             source={{ uri: selectedPhoto?.uri || DefaultPhoto }}
                             style={styles.photoPreview}
                         />
                         <Button mode="outlined" icon="photo" onPress={pickImage} disabled={isSubmitting}>
-                            {selectedPhoto ? "Change image" : "Add group image"}
+                            {selectedPhoto ? i18n.t("message.changeImage") : i18n.t("message.addGroupImage")}
                         </Button>
                     </View>
                     <TextInput
                         mode="outlined"
-                        label="Group name"
+                        label={i18n.t("message.groupName")}
                         value={title}
                         onChangeText={setTitle}
                         style={styles.input}
                     />
                     <TextInput
                         mode="outlined"
-                        label="Subtitle (optional)"
+                        label={i18n.t("message.subtitleOptional")}
                         value={subtitle}
                         onChangeText={setSubtitle}
                         style={styles.input}
                     />
                     <TextInput
                         mode="outlined"
-                        label="Description"
+                        label={i18n.t("message.description")}
                         value={description}
                         onChangeText={setDescription}
                         multiline
@@ -143,8 +144,8 @@ const NewGroup = ({ navigation }) => {
                     />
                     <View style={styles.switchRow}>
                         <View style={styles.switchTextWrap}>
-                            <Text style={styles.switchTitle}>Private group</Text>
-                            <Text style={styles.switchSubtitle}>Require approval before people can join.</Text>
+                            <Text style={styles.switchTitle}>{i18n.t("message.privateGroup")}</Text>
+                            <Text style={styles.switchSubtitle}>{i18n.t("message.requireApprovalBeforeJoin")}</Text>
                         </View>
                         <Switch value={isPrivate} onValueChange={setIsPrivate} />
                     </View>
@@ -155,7 +156,7 @@ const NewGroup = ({ navigation }) => {
                         disabled={isSubmitting}
                         style={styles.button}
                     >
-                        Create Group
+                        {i18n.t("message.createGroupAction")}
                     </Button>
                 </ScrollView>
             </ImageBackground>