Im currently facing an issue with my RN project. I updgraded to SDK 51 and RN version 74. I faced an array of issues since these updates. From my app crashing after IOS Bundled and others.
I’ve come down to this particular issue now which im still trying to tackle. Below is the console error and package.json and App.tsx
Console
Check the render method of `App`.
This error is located at:
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent), js engine: hermes
App.tsx
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import Home from './screens/Home';
import ItemDetails from './screens/ItemDetails';
import { SafeAreaProvider } from "react-native-safe-area-context";
import Navigation from './Navigation';
import { useState, useEffect } from 'react';
import * as Font from 'expo-font';
import AppLoading from 'expo-splash-screen';
import './TextConfig';
const getFonts = () => Font.loadAsync({
'Gilroy-Regular': require('./assets/fonts/Gilroy-Regular.ttf'),
'Gilroy-Bold': require('./assets/fonts/Gilroy-Bold.ttf'),
'Gilroy-SemiBold': require('./assets/fonts/Gilroy-SemiBold.ttf'),
'Gilroy-Light': require('./assets/fonts/Gilroy-Light.ttf'),
'Gilroy-Medium': require('./assets/fonts/Gilroy-Medium.ttf'),
'Gilroy-Thin': require('./assets/fonts/Gilroy-Thin.ttf'),
})
export default function App() {
const [fontsLoaded, setFontsLoaded] = useState(false);
if(fontsLoaded) {
return <SafeAreaProvider><Navigation/></SafeAreaProvider> ;
} else {
return (<AppLoading startAsync={getFonts} onFinish={() => setFontsLoaded(true)} onError={console.warn} />)
}
}
Package.json
{
"name": "my-rn-app",
"version": "1.0.0",
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@expo-google-fonts/raleway": "^0.2.3",
"@expo/config-plugins": "^8.0.4",
"@freakycoder/react-native-bounceable": ">=1.0.3",
"@gorhom/bottom-sheet": "^4",
"@react-native-community/checkbox": "^0.5.15",
"@react-native-firebase/app": "^18.2.0",
"@react-native-firebase/auth": "^17.5.0",
"@react-navigation/material-top-tabs": "^6.6.3",
"@react-navigation/native": "^6.1.6",
"@react-navigation/native-stack": "^6.9.12",
"@react-navigation/stack": "^6.3.16",
"@rneui/base": "^0.0.0-edge.2",
"@rneui/themed": "^0.0.0-edge.2",
"expo": "^51.0.8",
"expo-blur": "~13.0.2",
"expo-haptics": "~13.0.1",
"expo-image-picker": "~15.0.5",
"expo-location": "~17.0.1",
"expo-splash-screen": "~0.27.4",
"expo-status-bar": "~1.12.1",
"expo-updates": "~0.25.14",
"firebase": "^9.22.0",
"geolib": "^3.3.3",
"lottie-react-native": "6.7.0",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.74.1",
"react-native-animatable": "^1.3.3",
"react-native-bouncy-checkbox": "^3.0.7",
"react-native-elements": "^3.4.2",
"react-native-floating-label-input": "^1.4.2",
"react-native-gesture-handler": "~2.16.1",
"react-native-google-places-autocomplete": "^2.5.1",
"react-native-image-header-scroll-view": "^0.10.3",
"react-native-keyboard-aware-scroll-view": "^0.9.5",
"react-native-maps": "1.14.0",
"react-native-nested-scroll-view": "^9.0.0",
"react-native-pager-view": "6.3.0",
"react-native-reanimated": "~3.10.1",
"react-native-safe-area-context": "4.10.1",
"react-native-safe-area-view": "^1.1.1",
"react-native-screens": "3.31.1",
"react-native-shared-element": "^0.8.8",
"react-native-svg": "15.2.0",
"react-native-swiper": "^1.6.0",
"react-native-switch": "^1.5.1",
"react-native-tab-view": "^3.5.2",
"react-native-vector-icons": "^9.2.0",
"react-native-web": "~0.19.6",
"react-simple-form-validator": "^0.3.1",
"valtio": "^1.10.5"
},
"devDependencies": {
"@babel/core": "^7.24.0",
"@babel/plugin-transform-template-literals": "^7.24.1",
"@types/react": "~18.2.45",
"@types/react-native-vector-icons": "^6.4.13",
"typescript": "~5.3.3"
},
"private": true
}