Приложение Expo React Native вылетает без ошибок при заполнении формы ⇐ Javascript

[Anonymous]

Я создал собственное приложение Expo React, в котором есть поля TextInput и Picker. При создании пользовательского интерфейса все было хорошо, но как только я начинаю заполнять формы, приложение внезапно вылетает ни в каком конкретном поле. Иногда он вылетает на самом первом экране, а иногда достигает второго экрана, а затем вылетает без ошибок и предупреждений, поэтому я изо всех сил пытаюсь понять, откуда именно возникла проблема. Для хорошего понимания рабочего процесса и воспроизводимости приведу код.
App.tsx
// App.tsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { FontAwesome } from '@expo/vector-icons';
import { Colors } from './src/constants/Colors';

import FormScreen from './src/screens/FormScreen';
import './global.css';

const Tab = createBottomTabNavigator();

export default function App() {
return (


(

),
}}
/>


);
}

FormScreen.tsx
import React from 'react';
import { ImageBackground } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { FormProvider } from '../context/FormContext';
import FormNavigator from '../navigation/FormNavigator';
import Stepper from '../components/Stepper';
import { useNavigationState } from '@react-navigation/native';

import FontAwesome from '@expo/vector-icons/FontAwesome';

const steps: { name: string; icon: keyof typeof FontAwesome.glyphMap }[] = [
{ name: 'Identité', icon: 'user' }
];

const FormScreenContainer = () => {
const currentStepIndex = useNavigationState((state) => state.routes[0]?.state?.index ?? 0);

return (






);
};

export default function FormScreen() {
return (



);
}

FormNavigator.tsx
import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import Step1Identity from '../screens/form-steps/Step1Identity';

const Stack = createStackNavigator();

const FormNavigator = () => {
return (



);
};

export default FormNavigator;

Step1Identity.tsx
import React, { useContext, useCallback } from 'react';
import { View, Text, TextInput, ScrollView, TouchableOpacity } from 'react-native';
import { FormContext } from '../../context/FormContext';
import { useNavigation } from '@react-navigation/native';
import { Picker } from '@react-native-picker/picker';
import StyledDatePicker from '@/components/form/StyledDatePicker';
import countries from '../../../utils/countries.json';

const Step1Identity = () => {
const navigation = useNavigation();
const { formData, setFormData } = useContext(FormContext);

const genderItems = [
{ label: 'Sexe', value: '' },
{ label: 'Masculin', value: 'M' },
{ label: 'Féminin', value: 'F' },
];

const updateField = useCallback(
(field: string, value: any) => {
setFormData((prev) => ({ ...prev, [field]: value }));
},
[setFormData]
);

const handleNext = () => {
// Add validation here later
navigation.navigate('Step2Document');
};

return (

Identité du passager



Nom *

updateField('nom', text)}
/>



Prénom(s) *

updateField('prenom', text)}
/>




Nom de jeune fille
updateField('nomJeuneFille', text)}
/>





Sexe *


selectedValue={formData.sexe}
onValueChange={(itemValue) => updateField('sexe', itemValue)}
mode="dropdown"
style={{ marginVertical: -8 }}>
{genderItems.map((item) => (

))}





updateField('birthDate', date)}
/>





Lieu de naissance *

updateField('birthPlace', text)}
placeholderTextColor="#95a5a6"
/>


Adresse email
updateField('email', text)}
placeholderTextColor="#95a5a6"
keyboardType="email-address"
autoCapitalize="none"
/>


Information supplémentaires




Profession *

updateField('profession', text)}
/>


Fonction
updateField('fonction', text)}
/>






Nationalité *


updateField('nationality', value)}>

{countries.map((country: any) => (

))}






Pays de résidence *


updateField('residence', text)}
mode="dropdown">

{countries.map((country: any) => (

))}






Suivant


);
};

export default Step1Identity;

Countries.json
[
{
"alpha_code": "AFG",
"en_short_name": "Afghanistan",
"nationality": "Afghan"
},
{
"alpha_code": "ALA",
"en_short_name": "Åland Islands",
"nationality": "Åland Island"
}
]


Подробнее здесь: https://stackoverflow.com/questions/798 ... lling-form