I’m making a react native app where the user will push a button (displayed via the render buttons function) and then a modal will pop up containing a form, creating using react hook form. All of this works on the web testing, but when testing on an actual phone (ios), I get an error saying Text strings must be rendered within a <Text> component
As well as this other invariant violation error:
My code is as follows:
import React, {useState, useEffect} from 'react';
import { View, Text, Button, Alert, Modal, Pressable, TextInput } from 'react-native';
import { globalStyles } from '../styles/global';
import { useForm } from "react-hook-form";
export default function IngredientScreen({ navigation }) {
const [modalVisible, setModalVisible, modal2Visible] = useState(false);
const [text, setText] = useState(' ');
const { watch, formState: { errors } } = useForm();
const [ingredientsPair, setIngredientPair] = useState({ingredient: "", category: "", delete: ""});
const { register, handleSubmit, reset } = useForm({
defaultValues: ingredientsPair,
});
//List out ingredients with categories? Prepopulated for now
var ingredientList = [
{
category: "Cooking & Baking Ingredients",
items: ["Flour"]
},
{
category: "Dips & Spreads",
items: ["Cream Cheese"]
},
{
category: "Fresh & Frozen Fruits",
items: ["Passion Fruit", "Apples"]
},
{
category: "Grains, Rice & Cereal",
items: ["Millet"]
},
];
function RenderButtons() {
return ingredientList.map(buttonInfo => (
<>
<Text >{buttonInfo.category}</Text>
{buttonInfo.items.map((item) => {
var orginalIngredient = item;
return (
<View>
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert("Modal has been closed.");
setModalVisible(!modalVisible);
}}
>
<View style={globalStyles.centeredView}>
<View style={globalStyles.modalView}>
<form onSubmit={handleSubmit(editIngredient)}>
<label style={{fontSize: 12, fontWeight: 'bold', color: '#333', fontFamily: 'raleway-bold',}}>
Are you deleting this ingredient?
</label>
<select {...register("delete")} style={{width: 70}}>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<Text>{'n'}</Text>
<Text style={globalStyles.h6}>Edit your ingredient here</Text>
<input
{...register("ingredient")}
placeholder="Input your ingredient"
/>
<select {...register("category")}>
<option value="Condiments & Sauces">Condiments & Sauces</option>
<option value="Cooking & Baking Ingredients">Cooking & Baking Ingredients</option>
<option value="Dips & Spreads">Dips & Spreads</option>
<option value="Fresh & Frozen Fruits">Fresh & Frozen Fruits</option>
<option value="Fresh & Frozen Vegetables">Fresh & Frozen Vegetables</option>
<option value="Grains, Rice & Cereal">Grains, Rice & Cereal</option>
</select>
<Pressable
style={[globalStyles.button, globalStyles.buttonClose]}
onPress={handleSubmit(editIngredient)}
type="submit"
>
<Text style={globalStyles.buttonText}>Submit</Text>
</Pressable>
</form>
</View>
</View>
</Modal>
<Pressable
style={[globalStyles.button, globalStyles.buttonOpen]}
onPress={() => {setModalVisible(true)}
>
<Text style={globalStyles.buttonText} key={item}>{item}</Text>
</Pressable>
</View>
);
})}
</>
));
}
const editIngredient = (data) => {
setModalVisible(!modalVisible)
ingredientList.forEach(item => {
if (data.category == item.category) {
for (var i=0; i < item.items.length; i++) {
if (data.ingredient == item.items[i]) {
if (data.delete == "Yes") {
//Change to connect with users
item.items.splice(i,1);
alert(item.items);
break
} else {
//edit ingredient
break
}
}
}
}
})
};
//Button must be able to select category as well
return (
<View style={globalStyles.container}>
<Text style={globalStyles.h1}>Your Ingredients</Text>
<View>
{ RenderButtons() }
</View>
</View>
);
};
When I changed all the <Text> components in the form to <label>, I still got the error about text rendering, and I’m not sure where the invariant violation error comes from.
Any help would be much appreciated!
