Expo app stuck on splash screen after exporting it from snack - javascript

I wanted to create a calculator in a snack in expo, but then I tried to use it with an external code editor and It just stopped working. It was stuck on the splash screen and neither android nor web showed anything.
The proyect in snack works perfectly, but when I exported it, it didn't show anything.
My App.js is:
import * as React from 'react';
import { NavigationContainer } from '#react-navigation/native'
import DrawerNavigator from './components/DrawerNavigator'
export default function App(){
return(
<NavigationContainer>
<DrawerNavigator/>
</NavigationContainer>
)
}
My package.json is:
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"expo": "~47.0.8",
"expo-status-bar": "~1.4.2",
"react": "18.1.0",
"react-native": "0.70.5",
"tinydb": "*",
"expo-constants": "~14.0.2",
"#expo/vector-icons": "^13.0.0",
"react-native-paper": "4.9.2",
"react-native-screens": "~3.18.0",
"react-native-reanimated": "~2.12.0",
"#react-navigation/drawer": "^5.7.2",
"#react-navigation/native": "^5.0.5",
"react-native-vector-icons": "*",
"react-native-gesture-handler": "~2.8.0",
"react-native-safe-area-context": "4.4.1",
"react-native-responsive-fontsize": "*",
"react-native-web": "~0.18.9",
"react-dom": "18.1.0",
"#expo/webpack-config": "^0.17.2"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}

Related

when launching the apk, splash screen hangs (expo)

Built an apk for android, splash screen hangs at startup. But when I use the application at the expo itself, everything works fine. I use the stack (react-native expo).
below I indicated the files App.js and paсkage.json
import React from 'react';
import { Provider } from 'react-redux';
import Home from './src';
import store from './src/redux/store/index';
import { LogBox, View } from 'react-native';
import { useEffect, useCallback, useState } from 'react';
import \* as Font from "expo-font";
import \* as SplashScreen from 'expo-splash-screen';
function App() {
const \[fontLoaded, setFontLoaded\] = useState(false);
useEffect(() =\> {
async function prepare() {
try {
await Font.loadAsync({
"sf-pro-text": require("./assets/fonts/sf-pro-text-medium.otf"),
});
await new Promise(resolve =\> setTimeout(resolve, 2000));
} catch (e) {
console.warn(e);
} finally {
setFontLoaded(true);
}
}
prepare();
}, \[\])
const onLayoutRootView = useCallback(async () =\> {
if (fontLoaded) {
await SplashScreen.hideAsync();
}
}, \[fontLoaded\]);
if (!fontLoaded) {
return null;
}
LogBox.ignoreAllLogs();
console.error = (error) =\> error.apply;
return (
\<Provider store={store}\>
\<Home /\>
\</Provider\>
);
}
export default App;
to download fonts I use splashscreen, app.js code
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#expo/ngrok": "^4.1.0",
"#expo/vector-icons": "^13.0.0",
"#react-native-async-storage/async-storage": "\~1.17.3",
"#react-native-community/datetimepicker": "6.5.2",
"#react-native-community/hooks": "^2.8.1",
"#react-native-community/slider": "4.2.4",
"#react-navigation/bottom-tabs": "^6.0.4",
"#react-navigation/native": "^6.0.2",
"#react-navigation/stack": "^6.0.2",
"axios": "^0.21.1",
"dateformat": "^4.6.3",
"expo": "^47.0.0",
"expo-av": "\~13.0.2",
"expo-constants": "\~14.0.2",
"expo-linear-gradient": "\~12.0.1",
"expo-notifications": "\~0.17.0",
"expo-screen-orientation": "\~5.0.1",
"expo-status-bar": "\~1.4.2",
"expo-video-player": "^2.0.1",
"link": "^0.1.5",
"moment": "^2.29.1",
"ngrok": "^4.2.2",
"react": "18.1.0",
"react-dom": "18.1.0",
"react-native": "0.70.5",
"react-native-gesture-handler": "\~2.8.0",
"react-native-maps": "1.3.2",
"react-native-pager-view": "6.0.1",
"react-native-safe-area-context": "4.4.1",
"react-native-svg": "13.4.0",
"react-native-svg-transformer": "^0.14.3",
"react-native-switch": "^2.0.0",
"react-native-tab-view": "^3.1.1",
"react-native-web": "\~0.18.9",
"react-redux": "^7.2.4",
"redux": "^4.1.1",
"redux-thunk": "^2.3.0",
"expo-splash-screen": "\~0.17.5",
"expo-font": "\~11.0.1"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}
this is the package.json all the libraries that I have included

Feather - react-native-vector-icons - possible handled promise rejection (id:9) issue

I have a react native application and in the application, I am trying to call Feather from react-native-vector-icons. When i make the call, I get the following error:
[Unhandled promise rejection: Error: Directory for 'file:///Users/omarjandali/Library/Developer/CoreSimulator/Devices/B09B927C-6596-4403-B931-0C83395BA279/data/Containers/Data/Application/5F76B516-64FE-45C5-8F6D-FA6448DC62BB/Library/Caches/ExponentExperienceData/%2540ohmarj%252Fryppe/ExponentAsset-a76d309774d33d9856f650bed4292a23.ttf' doesn't exist. Please make sure directory '/Users/omarjandali/Library/Developer/CoreSimulator/Devices/B09B927C-6596-4403-B931-0C83395BA279/data/Containers/Data/Application/5F76B516-64FE-45C5-8F6D-FA6448DC62BB/Library/Caches/ExponentExperienceData/%40ohmarj%2Fryppe' exists before calling downloadAsync.]
at node_modules/react-native/Libraries/BatchedBridge/NativeModules.js:106:50 in promiseMethodWrapper
at node_modules/expo-modules-core/build/NativeModulesProxy.native.js:15:23 in moduleName.methodInfo.name
at node_modules/expo-file-system/build/FileSystem.js:105:17 in downloadAsync
at node_modules/expo-file-system/build/FileSystem.js:101:7 in downloadAsync
at node_modules/expo-asset/build/PlatformUtils.js:52:25 in _downloadAsyncManagedEnv
I deleted the node_modules folder and reran npm install with the same issue.
I tried everything to fix the issue but I can not figure out this issue.
Here is where I call it:
import React from 'react'
import {View, Text} from 'react-native'
import Icon from 'react-native-vector-icons/Feather'
const HomeScreen = () => {
return (
<View><Text>Home Screen</Text><Icon name={"home"} color={'#454545'} size={28} /></View>
)
}
export default HomeScreen
Here is my package.json
{
"name": "ryppe",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"#ptomasroos/react-native-multi-slider": "^2.2.2",
"#react-native-async-storage/async-storage": "^1.17.3",
"#react-native-community/checkbox": "^0.5.12",
"#react-native-community/slider": "4.2.1",
"#react-native-picker/picker": "2.4.0",
"#react-navigation/bottom-tabs": "^6.4.0",
"#react-navigation/native": "^6.0.13",
"#react-navigation/stack": "^6.3.1",
"axios": "^0.27.2",
"dotenv": "^16.0.1",
"expo": "~45.0.0",
"expo-status-bar": "~1.3.0",
"expo-updates": "~0.13.4",
"firebase": "^9.6.11",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.68.2",
"react-native-dropdown-picker": "^5.4.2",
"react-native-email": "^2.1.0",
"react-native-gesture-handler": "~2.2.1",
"react-native-maps": "0.30.2",
"react-native-tag-select": "^2.0.0",
"react-native-vector-icons": "^9.2.0",
"react-native-web": "0.17.7",
"react-native-webview": "11.18.1"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}
The package is not working but I have no idea why and it is causing issues with my react native application
-------UPDATE-----------
command to build applcation:
npx create-expo-app ryppe
here is my package.json file:
{
"name": "ryppe",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"#ptomasroos/react-native-multi-slider": "^2.2.2",
"#react-native-async-storage/async-storage": "^1.17.3",
"#react-native-community/checkbox": "^0.5.12",
"#react-native-community/slider": "4.2.1",
"#react-native-picker/picker": "2.4.0",
"#react-navigation/bottom-tabs": "^6.4.0",
"#react-navigation/native": "^6.0.13",
"#react-navigation/stack": "^6.3.1",
"axios": "^0.27.2",
"dotenv": "^16.0.1",
"expo": "~45.0.0",
"expo-status-bar": "~1.3.0",
"expo-updates": "~0.13.4",
"firebase": "^9.6.11",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-native": "0.68.2",
"react-native-dropdown-picker": "^5.4.2",
"react-native-email": "^2.1.0",
"react-native-gesture-handler": "~2.2.1",
"react-native-maps": "0.30.2",
"react-native-tag-select": "^2.0.0",
"react-native-vector-icons": "^9.2.0",
"react-native-web": "0.17.7",
"react-native-webview": "11.18.1"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}
when I run npm run ios I get this:
(base) omarjandali#omars-MacBook-Pro-M1-Max ryppe % npm run ios
> ryppe#1.0.0 ios
> expo start --ios
WARNING: expo-cli has not yet been tested against Node.js v18.10.0.
If you encounter any issues, please report them to https://github.com/expo/expo-cli/issues
expo-cli supports following Node.js versions:
* >=12.13.0 <15.0.0 (Maintenance LTS)
* >=16.0.0 <17.0.0 (Active LTS)
Starting project at /Users/omarjandali/dev/RyppeApp/MobileApp/ryppe
Starting Metro Bundler
› Opening exp://192.168.12.183:19000 on iPhone 14 Pro Max
Started Metro Bundler
› Metro waiting on exp://192.168.12.183:19000
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)
› Press a │ open Android
› Press i │ open iOS simulator
› Press w │ open web
› Press r │ reload app
› Press m │ toggle menu
› Press ? │ show all commands
Logs for your project will appear below. Press Ctrl+C to exit.
iOS Bundling complete 1523ms
iOS Bundling complete 30ms
iOS Running app on iPhone 14 Pro Max
could it be the ```expo-cli`` message
bottomTabnav:
<TabNav.Navigator initialRouteName='HomeScreen'>
<TabNav.Screen
key='Home'
name="Home"
component={HomeStackNav}
options={{
tabBarIcon: ({size, color}) => <Feather name={"home"} color={color} size={size} />
}}/>
...
</TabNav.Navigator>
try :
...
import { Feather } from '#expo/vector-icons';
const HomeScreen = () => {
return (
<View>
<Text>Home Screen</Text>
<Icon name={"home"} color={'black'} size={28} />
<Feather name="home" size={24} color="black" />
</View>
)}
in package.json
change "react-native": "0.68.2" to "react-native": "0.69.6",
then run yarn

TypeError: interpolate is not a function after installing react-nativgation-drawer

I am learning react native and during this i was trying to implement drawer navigation but as soon as i installed the react-navigation-drawer(2.2.0) this error pops up.
Behaviour :
App crash on load
Reproduce :
Just reload the app
Package.js
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~42.0.1",
"expo-app-loading": "^1.1.2",
"expo-status-bar": "~1.0.4",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
"react-native-gesture-handler": "~1.10.2",
"react-native-reanimated": "^2.1.0",
"react-native-screens": "^3.4.0",
"react-native-web": "~0.13.12",
"react-navigation": "^4.4.4",
"react-navigation-drawer": "^2.7.1",
"react-navigation-stack": "^2.10.4"
},
"devDependencies": {
"#babel/core": "^7.9.0"
},
"private": true
}
App.js
import React,{useState} from 'react';
import * as Font from 'expo-font';
import AppLoading from 'expo-app-loading';
//import Navigator from './routes/homestack'
import Navigator from './routes/drawernav';
const loadFont = ()=>Font.loadAsync({
'merrie-regular':require('./assets/fonts/Merriweather-Regular.ttf'),
'merrie-bold':require('./assets/fonts/Merriweather-Bold.ttf')
});
export default function App() {
const [isFontLoaded,setFontLoaded] = useState(false);
if(isFontLoaded){
return (
//initial changes again
<Navigator/>
);
}else{
return(
<AppLoading
startAsync = {loadFont}
onFinish = {()=>setFontLoaded(true)}
onError = {()=>alert('Error')}
/>
);
}
}
Error:
AppLoading threw an unexpected error when loading:
TypeError: interpolate is not a function. (In 'interpolate(this.progress, {
inputRange: [PROGRESS_EPSILON, 1],
outputRange: [0, 1]
})', 'interpolate' is undefined)
**Already Tried:
1.Changing reanimated version
2.Uninstall and install reanimated version.
3.Uninstall and install drawer-navigation**
Note: It's on both android and IOS simulators.
Your react-navigation-drawer version is conflicting with the version of react-native-reanimated. Try to run npm i --save react-native-reanimated#1.0.0.
Downgrade your react-native-reanimated to version 1.1.0
Run this command in terminal
yarn add react-native-reanimated#1.0.0

Invariant Violation: Invariant Violation: requireNativeComponent: "RNCSafeAreaView" was not found in the UIManager."

I get the Error : Invariant Violation: Invariant Violation: requireNativeComponent: "RNCSafeAreaView" was not found in the UIManager." while i want to use stack navigator In react native for android.
this Link didn't help either. this is my package.json file :
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"#react-native-community/masked-view": "^0.1.6",
"expo": "35.0.0",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "0.59.8",
"react-native-gesture-handler": "^1.3.0",
"react-native-reanimated": "^1.2.0",
"react-native-safe-area-context": "^0.3.6",
"react-native-screens": "^1.0.0-alpha.23",
"react-native-web": "~0.11.7",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^2.0.15"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"babel-preset-expo": "~8.0.0",
"jetifier": "^1.6.5"
},
"private": true
}
and here is my Navigation component :
import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";
import Home from "../screens/Home";
import ReviewDetails from "../screens/ReviewDetails";
const screens = {
home: {
screen: Home
},
reviewDetails: {
screen: ReviewDetails
}
};
const homeStack = createStackNavigator(screens);
export default createAppContainer(homeStack);
what should i do?
I had the same issue and to solve it I recreated the project and installed the following dependencies:
expo install react-navigation
expo install react-navigation-stack
expo install react-native-gesture-handler
expo install react-native-safe-area-context
expo install #react-native-community/masked-view
This is my package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~36.0.0",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-web": "~0.11.7",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^2.0.16",
"react-native-gesture-handler": "~1.5.0",
"react-native-safe-area-context": "0.6.0",
"#react-native-community/masked-view": "0.1.5"
},
"devDependencies": {
"babel-preset-expo": "~8.0.0",
"#babel/core": "^7.0.0"
},
"private": true
}
I hope that helps!
rebuild the project
react-native run-android
works for me. :)
I guess, we are all following the same React Navigation tutorial. I was working on React Native (not expo) and as Sumit Rawat suggested rebuilding the project resolves the problem. In my case I ran:
react-native run-ios

Screen is not scrolling Expo web

I have just updated to the latest expo sdk 33, So I can use the expo web capabilities. The project appears to be working and I can navigate onto different screens but I can scroll on any of the screens.
Does anyone have any idea what I might be doing wrong or missing?
Expo-cli version is : '2.19.5'
I'm using Yarn
package.json
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"#expo/vector-icons": "latest",
"expo": "next",
"expo-cli": "^2.19.5",
"expo-codemod": "^1.0.0",
"expo-constants": "latest",
"expo-image-manipulator": "latest",
"expo-image-picker": "latest",
"expo-intent-launcher": "latest",
"expo-permissions": "latest",
"firebase": "^5.8.1",
"native-base": "^2.12.1",
"react": "16.8.3",
"react-dom": "^16.8.6",
"react-firebaseui": "^3.1.2",
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
"react-native-alert-async": "^1.0.3",
"react-native-modal": "^9.0.0",
"react-native-modal-datetime-picker": "^6.0.0",
"react-native-picker-select": "^5.2.3",
"react-native-web": "^0.11.4",
"react-navigation": "^3.5.0-alpha.0",
"react-redux": "^6.0.0",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"rxjs": "^6.3.3",
"schedule": "0.4.0",
"uuid": "^3.3.2"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0",
"prettier": "1.16.4"
},
"prettier": {
"jsxBracketSameLine": true,
"arrowParens": "always",
"bracketSpacing": false
},
"private": true
}
App.js
const AppContainer = createBrowserApp(AppNavigator);
type Props = {};
export default class App extends Component<Props> {
render() {
const store = createStore(reducers, {}, applyMiddleware(ReduxThunk));
return (
<Provider store={store}>
<AppContainer
onNavigationStateChange={(prevState, currentState) => {
const currentScreen = getActiveRouteName(currentState);
const prevScreen = getActiveRouteName(prevState);
}}
ref={(navigatorRef) => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
/>
</Provider>
);
}
}
Solved this wrapping my main View with ScrollView
<ScrollView>
<View>
</View>
</ScrollView>

Categories

Resources