Develop Reference

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>