Develop Reference

Expo app stuck on splash screen after exporting it from snack

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
}

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

The ArcGIS API failed to load

I have downloaded the npm i --save esri-loader #esri/react-arcgis but why is it i cant load the map? did i miss something?
import React from 'react';
import Map from '../../component/Map/Map.js'
const HomePage = () => {
return (
<div>
<Map/>
</div>
);
};
export default HomePage;
component/Map/Map.js
import React , {useRef,useEffect} from 'react';
import {loadModules} from "esri-loader";
function Map() {
const MapElement=useRef(null)
useEffect(()=>{
let view;
loadModules(["esri/views/MapView", "esri/WebMap"],{
css:true
}).then(([MapView, WebMap])=>{
const webmap= new WebMap({
basemap:'topo-vector'
})
view = new MapView({
map:webmap,
center:[],
zoom:8,
container:MapElement.current
})
})
return()=>{
if(!!view){
view.destroy()
view=null
}
}
})
return (
<div style={{height:800}} ref={MapElement}>
</div>
)
}
export default Map
the error i get
the reference i used for this https://www.youtube.com/watch?v=0RC1Xf_0UUk
package.json
{
"name": "#country/app", "private": true, "scripts": {
"start": "webpack serve",
"start:standalone": "webpack serve --port 9003 --env standalone",
"build": "concurrently yarn:build:*",
"build:webpack": "webpack --mode=production",
"analyze": "webpack --mode=production --env analyze",
"lint": "eslint src --ext js",
"format": "prettier --write .",
"check-format": "prettier --check .",
"test": "cross-env BABEL_ENV=test jest",
"watch-tests": "cross-env BABEL_ENV=test jest --watch",
"prepare": "husky install",
"coverage": "cross-env BABEL_ENV=test jest --coverage" }, "devDependencies": {
"#arcgis/webpack-plugin": "^4.20.0",
"#babel/core": "^7.15.0",
"#babel/eslint-parser": "^7.15.0",
"#babel/plugin-transform-runtime": "^7.15.0",
"#babel/preset-env": "^7.15.0",
"#babel/preset-react": "^7.14.5",
"#babel/runtime": "^7.15.3",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.0.0",
"babel-jest": "^27.0.6",
"concurrently": "^6.2.1",
"cross-env": "^7.0.3",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-config-react-important-stuff": "^3.0.0",
"eslint-plugin-prettier": "^3.4.1",
"husky": "^7.0.4",
"identity-obj-proxy": "^3.0.0",
"jest": "^27.4.3",
"jest-cli": "^27.4.3",
"prettier": "^2.3.2",
"pretty-quick": "^3.1.1",
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0",
"webpack-config-single-spa-react": "^4.0.0",
"webpack-dev-server": "^4.0.0",
"webpack-merge": "^5.8.0" }, "dependencies": {
"#esri/react-arcgis": "^5.1.0",
"#material-ui/styles": "^4.11.4",
"#mui/styles": "^5.2.2",
"#reach/router": "^1.3.4",
"arcgis-js-api": "^4.21.2",
"esri-loader": "^3.3.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"single-spa-react": "^4.3.1" }, }

Sorry for not directly responding to your described error, but I would not use esri-loader with newer versions of ArcGIS for JavaScript API. Why not npm as ES modules which do not require a separate script loader?
Build with ES Module
This way you can do simple imports like this:
import WebMap from "#arcgis/core/WebMap";
Here are the initial setup instructions:
Install instructions
Finally, here is a sample react app from Esri using exactly that:
Esri React App example

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

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>