React native : animated node with tag 2 does not exist (not using animation)

Viewed 1354

I don't use any animation in my code but when i start the app on an android device (emulator or real device) the error "Animated node with tag 2 does not exists"

When i start the project on web it does work however

I heard about a fix on internet but it seems like the fix wouldn't work with expo 40+ and just break more things

my app.js:


import React, {useEffect, useState} from 'react';
import {Button, FlatList, StyleSheet, Text, TouchableOpacity, View, Alert} from 'react-native';
import {NavigationContainer} from "@react-navigation/native";
import { createStackNavigator } from '@react-navigation/stack';
import Designation from "./Designation";
import ProjetList from "./Localisation/ProjetList";
import ParcelleList from "./Localisation/ParcelleList";
import AdresseList from "./Localisation/AdresseList";
import EmplacementList from "./Localisation/EmplacementList";
import Segmentlist from "./Localisation/Segmentlist";
import CompartimentList from "./Localisation/CompartimentList";



const Stack = createStackNavigator();


const App = () => {

    return (
        <>
            <View style={styles.Bann}>
                <Text>AGORA</Text>
            </View>
            <NavigationContainer>
                <Stack.Navigator>
                    <Stack.Screen
                        name="ProjetList"
                        component={ProjetList}
                    />
                    <Stack.Screen
                        name="ParcelleList"
                        component={ParcelleList}
                    />
                    <Stack.Screen
                        name="AdresseList"
                        component={AdresseList}
                    />
                    <Stack.Screen
                        name="EmplacementList"
                        component={EmplacementList}
                    />
                    <Stack.Screen
                        name="SegmentList"
                        component={Segmentlist}
                    />
                    <Stack.Screen
                        name="CompartimentList"
                        component={CompartimentList}
                    />

                    <Stack.Screen
                        name="Designation"
                        component={Designation}
                    />
                </Stack.Navigator>
            </NavigationContainer>
        </>
    );
};



let styles = StyleSheet.create({
    Bann: {
        alignItems: "center",
        justifyContent: "center",
        height: 100,
        backgroundColor: "grey",
        fontSize: 35,
    }
});


export default App;

my first page that is shown :

import React, {useEffect, useState} from 'react';
import {createStackNavigator} from "@react-navigation/stack";
import {Alert, Button, StyleSheet, Text, TouchableOpacity, View} from 'react-native';


const ProjetList = ({navigation} ) => {
    let id = 'id :';
    const [data, setData] = useState([]);

    useEffect(() => {
        fetch('http://10.0.2.2:80/projets')
            .then(response => {console.log(response);return response.json();})
            .then((json => {console.log(json);setData(json);}))
            .catch(error => console.error(error));
        console.log(data);
    }, []);


    return(

        <>
            <View>
                <Text>Test fetch : {id + ' '+data}</Text>
            </View>
            <View style={{flexDirection: "row", justifyContent: "center", paddingBottom: 40}}>

                <TouchableOpacity style={styles.BoutonContainer}
                                  title="Localisation"
                                  onPress={() => navigation.navigate('ProjetList')}>

                    <Text>Localisation</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.BoutonContainer}
                                  title="Désignation"
                                  onPress={() => navigation.navigate('Designation')}>

                    <Text>Désignation</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.BoutonContainer}
                                  title="Composition"
                                  onPress={() => navigation.navigate('Composition')}>

                    <Text>Composition</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.BoutonContainer}
                                  title="Condition"
                                  onPress={() => navigation.navigate('Condition')}>

                    <Text>Condition</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.BoutonContainer}
                                  title="Dépose"
                                  onPress={() => navigation.navigate('Dépose')}>

                    <Text>Dépose</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.BoutonContainer}
                                  title="Dimensions"
                                  onPress={() => navigation.navigate('Dimensions')}>

                    <Text>Dimensions</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.BoutonContainer}
                                  title="Illustrations"
                                  onPress={() => navigation.navigate('Illustrations')}>

                    <Text>Illustrations</Text>
                </TouchableOpacity>
            </View>

            <View style={{flexDirection: "row", justifyContent: "center", paddingBottom: 20}}>
                <TouchableOpacity style={styles.BoutonContainer2}
                                  title="ProjetList"
                                  onPress={() => navigation.navigate('ProjetList')}>

                    <Text>Projet</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.BoutonContainer2}
                                  title="ParcelleList"
                                  onPress={() => navigation.navigate('ParcelleList')}>

                    <Text>Parcelle</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.BoutonContainer2}
                                  title="AdresseList"
                                  onPress={() => navigation.navigate('AdresseList')}>

                    <Text>Adresse</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.BoutonContainer2}
                                  title="EmplacementList"
                                  onPress={() => navigation.navigate('EmplacementList')}>

                    <Text>Emplacement</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.BoutonContainer2}
                                  title="SegmentList"
                                  onPress={() => navigation.navigate('SegmentList')}>

                    <Text>Segment</Text>
                </TouchableOpacity>
                <TouchableOpacity style={styles.BoutonContainer2}
                                  title="CompartimentList"
                                  onPress={() => navigation.navigate('CompartimentList')}>

                    <Text>Compartiment</Text>
                </TouchableOpacity>
            </View>

            <View style={{flexDirection: "row"}}>
                <View style={{backgroundColor: "grey", marginLeft: 20, height: 600, width: 300, alignItems:'center'}}>
                    <Text style={{marginVertical: 30}}>Test</Text>
                </View>
                <View>

                </View>
            </View>
        </>
    );
};

let styles = StyleSheet.create({
    BoutonContainer: {
        flex: 1,
        backgroundColor: "#1E90FF",
        alignItems: "center",
        justifyContent: "center",
        margin: 10,
        height: 20,
        paddingHorizontal: 30,
        paddingVertical: 15,
    },
    BoutonContainer2: {
        flex: 1,
        backgroundColor: "#00BFFF",
        alignItems: "center",
        justifyContent: "center",
        margin: 10,
        height: 15,
        paddingHorizontal: 28,
        paddingVertical: 13,
    }
});

export default ProjetList;

also, my package.json just in case :


{
  "main": "index.js",
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "web": "expo start --web",
    "start": "react-native start"
  },
  "dependencies": {
    "@react-native-community/masked-view": "0.1.10",
    "@react-navigation/native": "^5.9.4",
    "@react-navigation/stack": "^5.14.5",
    "body-parser": "^1.19.0",
    "expo": "~41.0.1",
    "expo-splash-screen": "~0.10.2",
    "expo-status-bar": "~1.0.4",
    "expo-updates": "~0.5.4",
    "express": "^4.17.1",
    "mysql": "^2.18.1",
    "node-fetch": "^2.6.1",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "^0.64.1",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-my-sql-connection": "^1.0.4",
    "react-native-reanimated": "~2.1.0",
    "react-native-safe-area-context": "3.2.0",
    "react-native-screens": "~3.0.0",
    "react-native-unimodules": "~0.13.3",
    "react-native-web": "^0.16.3",
    "react-navigation": "^4.4.4"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0"
  },
  "private": true
}


0 Answers
Related