TextInput react native component rendering on web but not on Expo Go with Expo and React Native

I'm using React Native and Expo to create an android app with text fields. When I test on a web server, everything works, but not on Expo Go. Text components are in red and TextInput in blue.

Nothing in the debug DevTools of Expo Go (by pressing j).

package.json/dependencies

"dependencies": {
    "@expo/webpack-config": "^18.0.1",
    "@react-native-async-storage/async-storage": "^1.18.2",
    "@react-navigation/bottom-tabs": "^6.5.7",
    "@react-navigation/material-top-tabs": "^6.6.2",
    "expo": "~48.0.18",
    "expo-dev-client": "~2.2.1",
    "expo-status-bar": "~1.4.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.71.8",
    "react-native-web": "~0.18.10",
    "sass": "^1.63.3"
  },

CharacterScreen.js

import { useContext, useState, useEffect } from 'react';
import { Text, View } from 'react-native';

import { TextField } from '../UI';
import { app } from '../../utils/stylesheet';
import { DataContext } from '../../utils/DataContext';


function CharacterScreen() {
    const { data, setData } = useContext(DataContext)

    const onLastNameChange = text => setData({ ...data, char: { ...data.char, lastName: text }})
    const onNameChange = text => setData({ ...data, char: { ...data.char, name: text }})
    const onBreedChange = text => setData({ ...data, char: { ...data.char, breed: text }})
    const onClasseChange = text => setData({ ...data, char: { ...data.char, classe: text }})
    const onCareerChange = text => setData({ ...data, char: { ...data.char, career: text }})
    const onLevelChange = text => setData({ ...data, char: { ...data.char, level: text }})
    const onCareerPathChange = text => setData({ ...data, char: { ...data.char, careerPath: text }})
    const onStatusChange = text => setData({ ...data, char: { ...data.char, status: text }})
    const onAgeChange = text => setData({ ...data, char: { ...data.char, age: text }})
    const onHeightChange = text => setData({ ...data, char: { ...data.char, height: text }})
    const onHairChange = text => setData({ ...data, char: { ...data.char, hair: text }})
    const onEyesChange = text => setData({ ...data, char: { ...data.char, eyes: text }})
    const onSTAmbChange = text => setData({ ...data, char: { ...data.char, sTAmb: text }})
    const onLTAmbChange = text => setData({ ...data, char: { ...data.char, lTAmb: text }})


    return (
        <View style={app.screen}>
            <Text style={app.title}>Informations générales</Text>
            {
                data ? (<>
                    <TextField text='Prénom' value={data.char.lastName} update={onLastNameChange} />
                    <TextField text='Nom' value={data.char.name} update={onNameChange} />
                    <TextField text='Race' value={data.char.breed} update={onBreedChange} />
                    <TextField text='Classe' value={data.char.classe} update={onClasseChange} />
                    <TextField text='Carrière' value={data.char.career} update={onCareerChange} />
                    <TextField text='Echelon' value={data.char.level} update={onLevelChange} />
                    {/* <TextField text='Schéma de carrière value={data.char.careerPath} update={onCareerPathChange} /> */}
                    <TextField text='Statut' value={data.char.status} update={onStatusChange} />
                    <TextField text='Age' value={data.char.age} update={onAgeChange} />
                    <TextField text='Taille' value={data.char.height} update={onHeightChange} />
                    <TextField text='Cheveux' value={data.char.hair} update={onHairChange} />
                    <TextField text='Yeux' value={data.char.eyes} update={onEyesChange} />


                    <TextField text='A court terme' value={data.char.sTAmb} update={onSTAmbChange} />
                    <TextField text='A long terme' value={data.char.lTAmb} update={onLTAmbChange} />

                </>) : null
            }
        </View>
    );
}

export default CharacterScreen;

UI.js/TextField a custom functional component that I've made

export function TextField({ text, value, update }) {
    return (
        <Text style={textField.text}>{text} : <TextInput style={textField.style} value={value} onChangeText={update} placeHolder='...' /></Text>
    )
}

stylesheet.js/textField

export const textField = StyleSheet.create({
    style: {
        fontSize: 17,
        color: 'black',
        backgroundColor: 'blue'
    },
    text: {
        fontSize: 15,
        color: 'rgb(80, 80, 80)',
        backgroundColor: 'red'
    }
})

Nothing found on Internet about the problem ... Thanks for your help.

It doesn't seem like you can have a <TextInput/> as the child of a <Text> component. Instead, move <TextInput/> out of the <Text> as such:

export function TextField({text, value, update}) {
    return (
        <> {/* or <View style={...}> */}
            <Text style={textField.text}>{text} : </Text>
            <TextInput
                style={textField.style}
                value={value}
                onChangeText={update}
                placeHolder="..."
            />
        </> {/* or </View> */}
    );
}