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

React Native Expo - No Splash Screen Showing (White Screen)

Im running an expo managed react native project and I can't figure this out for the life of me. When I first initialized Expo I had the typical splash screen show, but now, I can't see my splash screen at all it just shows a blank white screen (No errors either). Everything else works perfectly in terms of post splash loading, but i really need help getting the splash to show.
What I've Tried:
Running on iOS simulator, iOS device, Android simulator (Same thing)
Remove node_modules and package-lock.json and run 'npm i'
Cleared cache for both Expo and npm
Replaced app.js return statement with just <View><Text>...</Text></View> and still nothing.
Here's my setup:
package.json
{
"name": "placeholder",
"version": "1.0.0",
"description": "placeholder",
"main": "node_modules/expo/AppEntry.js",
"type": "commonjs",
"private": true,
"scripts": {
"type:check": "npx tsc",
"format:check": "prettier --check \"src/**/*\"",
"format:write": "prettier --write \"src/**/*\"",
"lint:check": "eslint \"App.tsx\" \"src/**/*\"",
"lint:fix": "eslint --fix \"App.tsx\" \"src/**/*\"",
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"engines": {
"node": "16.x"
},
"dependencies": {
"#react-native-async-storage/async-storage": "~1.17.3",
"#react-navigation/drawer": "^6.4.3",
"#react-navigation/native": "^6.0.11",
"#react-navigation/native-stack": "^6.7.0",
"#react-navigation/stack": "^6.2.2",
"#reduxjs/toolkit": "^1.8.4",
"dotenv": "^16.0.1",
"expo": "~46.0.6",
"expo-status-bar": "~1.4.0",
"react": "18.0.0",
"react-dom": "18.0.0",
"react-native": "0.69.4",
"react-native-gesture-handler": "~2.5.0",
"react-native-reanimated": "~2.9.1",
"react-native-screens": "~3.15.0",
"react-native-web": "~0.18.7",
"react-redux": "^8.0.2",
"styled-components": "^5.3.5",
"expo-screen-orientation": "~4.3.0",
"expo-splash-screen": "~0.16.1",
"react-native-safe-area-context": "4.3.1"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#redux-devtools/core": "^3.13.1",
"#types/react": "~18.0.14",
"#types/react-native": "~0.69.1",
"#types/react-redux": "^7.1.24",
"#types/styled-components": "^5.1.26",
"#types/styled-components-react-native": "^5.1.3",
"#typescript-eslint/eslint-plugin": "^5.33.1",
"eslint": "^8.22.0",
"eslint-config-standard-with-typescript": "^22.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-n": "^15.2.4",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-react": "^7.30.1",
"eslint-plugin-react-hooks": "^4.6.0",
"prettier": "^2.7.1",
"typescript": "^4.7.4"
}
}
app.json
{
"expo": {
"name": "placeholder",
"slug": "placeholder",
"version": "1.0.0",
"orientation": "portrait",
"icon": "./assets/images/icon.png",
"userInterfaceStyle": "light",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "cover",
"backgroundColor": "#1D1A1F"
},
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": ["**/*"],
"ios": {
"supportsTablet": true,
"requireFullScreen": true
},
"android": {
"adaptiveIcon": {
"foregroundImage": "./assets/images/adaptive-icon.png",
"backgroundColor": "#1D1A1F"
}
},
"web": {
"favicon": "./assets/images/favicon.png"
}
}
}
babel.config
module.exports = function (api) {
api.cache(true)
return {
presets: ['babel-preset-expo'],
plugins: ['react-native-reanimated/plugin']
}
}
app.tsx
import 'react-native-gesture-handler'
import Constants from 'expo-constants'
import { useState, useEffect } from 'react'
import { useFonts } from 'expo-font'
import * as SplashScreen from 'expo-splash-screen'
import * as ScreenOrientation from 'expo-screen-orientation'
import AsyncStorage from '#react-native-async-storage/async-storage'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { Provider } from 'react-redux'
import { ThemeProvider } from 'styled-components/native'
import store from './src/redux/store'
import { lightTheme, darkTheme } from './src/res/theme/theme'
import Loading from './src/screens/loading/loading'
import { logger } from './src/logger/logger'
import Application from './src/components/application/application'
// Function to keep the splash screen visible while we fetch resources
SplashScreen.preventAutoHideAsync()
.then((data) => logger.log(`SplashScreen.preventAutoHideAsync() succeeded: ${data.toString()}`))
.catch(logger.warn)
logger.log('NODE_ENV: ', Constants?.manifest?.extra?.env) //eslint-disable-line
export const App = (): JSX.Element => {
const [fontsLoaded] = useFonts({
SedgwickAveDisplay: require('./assets/fonts/sedgwick-ave-display/SedgwickAveDisplay-Regular.ttf'),
QuicksandRegular: require('./assets/fonts/Quicksand/static/Quicksand-Regular.ttf'),
QuicksandSemiBold: require('./assets/fonts/Quicksand/static/Quicksand-SemiBold.ttf'),
QuicksandBold: require('./assets/fonts/Quicksand/static/Quicksand-Bold.ttf')
})
const [loading, setLoading] = useState(true)
const [theme, setTheme] = useState('light')
const selectedTheme = theme === 'dark' ? darkTheme : lightTheme
// Load the app here
useEffect(() => {
// Hide splash screen after 2 seconds
setTimeout(() => {
SplashScreen.hideAsync()
.then((data) => logger.log(`SplashScreen.hideAsync() succeeded: ${data.toString()}`))
.catch(logger.warn)
}, 2000)
ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP)
.then(() => {
logger.log('ScreenOrientation.lockAsync() succeeded')
return AsyncStorage.getItem('#theme')
})
.then((data) => {
if (data) setTheme(data)
setLoading(false)
})
.catch((e) => {
logger.warn(e)
setLoading(false)
})
}, [])
if (loading || !fontsLoaded) {
return <Loading />
}
return (
<SafeAreaProvider>
<Provider store={store}>
<ThemeProvider theme={selectedTheme}>
<Application />
</ThemeProvider>
</Provider>
</SafeAreaProvider>
)
}
export default App
Any help with this would be greatly appreciated, thank you!

How do I configure the enzym-chai?

I want to use enzym-chai in cypress.
My source code looks like this
ProductList
import React from 'react'
import Product from './Product'
export default class ProductList extends React.Component {
render() { return (<div className = 'ui unstackable items'>
<Product />
</div>);
}
}
Product
import React from 'react'
export default class Product extends React.Component {
render () {
return (
<div className = 'item'>
<div className = 'image'>
<img src="../images/Banana-Snowboard.png" alt="Snow Board" ></img>
</div>
<div className = 'middel aligned content'>
<div className = 'description'>
<a>Snow Board</a>
<p>Cool Snow Board</p>
</div>
<div className = 'extra'>
<span>Submitted by:</span>
<img className = 'ui avatar image' src= './images/avatar.png' alt="Avatar"></img>
</div>
</div>
</div>
)
}
}
An the test looks like this
import React from 'react';
import ReactDOM from 'react-dom';
import Enzyme from 'enzyme';
import { configure, mount,shallow } from 'enzyme'
import chaiEnzyme from 'chai-enzyme'
import chai from 'chai'
import ProductList from '../../src/components/ProductList';
import Product from '../../src/components/Product'
import Adapter from 'enzyme-adapter-react-16'
Enzyme.configure({ adapter: new Adapter() });
chai.use(chaiEnzyme())
function myAwesomeDebug (wrapper) {
let html = wrapper.html()
// do something cool with the html
return html
}
chai.use(chaiEnzyme(myAwesomeDebug))
describe('ProductList component testing', () => {
it('Should display one product in a productlist' , ()=> {
const productList = mount(<ProductList />)
expect(productList).to.be.present()
expect(productList.find('div')).to.be.present()
expect(productList).to.have.descendants(Product)
});
});
The configuration file looks like this:
{
"name": "react-hello-world",
"version": "1.0.0",
"description": "React Hello World",
"main": "index.js",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"cypress": "cypress open",
"cypress:all": "cypress run --browser chrome"
},
"author": "CodeMix",
"license": "ISC",
"dependencies": {
"react-scripts": "^1.1.1"
},
"devDependencies": {
"#cypress/webpack-preprocessor": "^2.0.1",
"ajv": "^6.5.2",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"chai": "^4.1.2",
"chai-enzyme": "^1.0.0-beta.1",
"cheerio": "^1.0.0-rc.2",
"css-loader": "^0.28.7",
"cypress": "^3.0.2",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"eslint": "^4.18.0",
"eslint-config-standard": "^11.0.0",
"eslint-plugin-chai-friendly": "^0.4.1",
"eslint-plugin-cypress": "^2.0.1",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-node": "^6.0.1",
"eslint-plugin-promise": "^3.8.0",
"eslint-plugin-react": "^7.10.0",
"eslint-plugin-standard": "^3.1.0",
"hoek": "^5.0.3",
"lodash": "^4.17.10",
"react": "^16.4.1",
"react-dom": "^16.4.1"
},
"peerDependencies": {
"chai": "^3.0.0 || ^4.0.0",
"cheerio": "0.19.x || 0.20.x || 0.22.x || ^1.0.0-0",
"enzyme": "^2.7.0 || ^3.0.0",
"react": "^0.14.0 || ^15.0.0-0 || ^16.0.0-0",
"react-dom": "^0.14.0 || ^15.0.0-0 || ^16.0.0-0"
}
}
I get following error message when I executing the test TypeError: expect(...).to.be.present is not a function I get a similar error message when I try some of the other assertions describe >in https://github.com/producthunt/chai-enzyme#installation How do I fix the configuration so I can use the chai-enzyme assertions?

Its looks like you forgot to import expect!
import { expect } from 'chai'

Module not found: Can't resolve 'autosuggest-highlight/match'

I am trying to compile my react website. But whenever I try to build, it fails. I keep getting
Module not found: Can't resolve 'autosuggest-highlight/match'
I have react-drawer just outside where this file is, as well as my npm and node modules up to date. Every time I try to update the files, or make a change, it doesn't even start to compile and crashes at "react-script start".
This is the code for the page that crashed:
import React from 'react';
import Autosuggest from 'react-autosuggest';
import * as AutosuggestHighlightMatch from 'autosuggest-highlight/match';
import * as AutosuggestHighlightParse from 'autosuggest-highlight/parse';
import ApiRequest from './ApiRequest.js';
class Search extends React.Component {
componentDidMount() {
new ApiRequest('GET', '/clientlist').send((res, people) => {
if (res.status == 200) {
this.setState({people});
} else if (res.status == 401 || res.status == 403) {
console.log('authentication error');
}
});
}
constructor() {
super();
this.state = {
value: '',
suggestions: [],
people: [],
selection: ''
};
this.renderSuggestion = (suggestion, {query}) => {
const suggestionText = `${suggestion.name}`;
const matches = AutosuggestHighlightMatch(suggestionText,query);
const parts = AutosuggestHighlightParse(suggestionText, matches);
return (
<span className='suggestion-content '
style={{backgroundImage: `url(${suggestion.profileimg || 'http://s3.amazonaws.com/37assets/svn/765-default-avatar.png'})`}}>
<span className="name">
{
parts.map((part, index) => {
const className = part.highlight ? 'highlight' : null;
return (
<span className={className} key={index}>{part.text}</span>
);
})
}
</span>
</span>
)
};
This is the image of my folder hierarchy:
Here is my Package.Json
{
"name": "medimo",
"version": "0.1.0",
"private": true,
"dependencies": {
"autosuggest-highlight": "^3.1.0",
"chart.js": "^2.6.0",
"es6-object-assign": "^1.1.0",
"history": "^1.17.0",
"moment": "^2.18.1",
"parse-react": "^0.5.2",
"parse-server": "^2.5.3",
"parse5": "^3.0.2",
"postcss": "^6.0.9",
"postcss-cssnext": "^3.0.2",
"react": "^15.6.1",
"react-autosuggest": "^9.3.2",
"react-chartjs-2": "^2.5.7",
"react-dom": "^15.6.1",
"react-dropdown": "^1.2.5",
"react-image": "^1.0.1",
"react-motion-drawer": "file:../custom-deps/react-motion-drawer",
"react-router": "^4.1.2",
"react-router-dom": "^4.1.2",
"react-scripts": "1.0.10",
"react-sortable-hoc": "^0.6.7",
"react-tabs": "^1.1.0",
"socket.io-client": "^2.0.3",
"socket.io-react": "^1.2.0",
"utils": "^0.3.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:3001",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^2.30.1",
"postcss-loader": "^2.0.6",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1"
}
}

I had the same problem with the exact same package funnily enough.
This is what I have that fixed it:
import AutosuggestHighlightMatch from "autosuggest-highlight/umd/match";
import AutosuggestHighlightParse from "autosuggest-highlight/umd/parse";

The dependency needs to be added it seems like:
npm i autosuggest-highlight

What solved the problem for me was to:
Delete node_modules directory
run npm install

Check-in official page document, following the way of import also working
import AutosuggestHighlightMatch from "autosuggest-highlight/match";
import AutosuggestHighlightParse from "autosuggest-highlight/parse";

React Native Exportiing

I am getting the following error when I am trying to build my React Native bundle.
Syntax Error components/Example/index.js: Unexpected token, expected ; (1:20)
I am not sure if it's a problem with my eslint/babel configs. Here are the files.
components/Example/index.js
export default from './View'
components/Example/View.js
import React, { Component, PropTypes, Button } from 'react';
import { connect } from 'react-redux'
import { updateExampleData } from '../../actions/example'
class Example extends Component {
static propTypes = {
title: PropTypes.string.isRequired,
navigator: PropTypes.object.isRequired,
exampleProp: PropTypes.object.isRequired
}
const incrementData = () => {
const newIncrement = this.props.exampleProp + 1
updateExampleData(newIncrement)
}
render() {
return (
<View>
<Text>exampleData: {this.props.exampleProp} </Text>
<Button
onPress={incrementData}
title="Increment Data"
color="#841584"
/>
</View>
)
}
}
const mapStateToProps = (state, props) => {
const exampleProp = state.example.example
const newProps = {
exampleProp: exampleProp
}
return newProps
}
export default connect(mapStateToProps)(Example)
package.json
{
"name": "SportsApp",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-eslint": "^7.2.3",
"babel-preset-react-native": "^3.0.2",
"eslint": "^4.5.0",
"eslint-config-standard": "^10.2.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.1.1",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-react": "^7.3.0",
"eslint-plugin-standard": "^3.0.1",
"jest-expo": "~19.0.0",
"react-native-orientation": "^3.0.0",
"react-native-orientation-listener": "0.0.4",
"react-native-scripts": "1.1.0",
"react-native-tableview-simple": "^0.16.8",
"react-redux": "^5.0.5",
"react-test-renderer": "16.0.0-alpha.12",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.2.0"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"expo": "^19.0.0",
"react": "16.0.0-alpha.12",
"react-native": "^0.46.1"
}
}
eslint.json
{
"parser": "babel-eslint",
"env": {
"browser": true
},
"plugins": [
"react"
],
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"rules": {
}
}
.babelrc
{
"presets": ["react-native"]
}
I have written react-redux before but I did not do the parsing configurations for that project so I am wondering if the syntax error has something to do with that. I am pretty sure my index.js files for the components were written with the same syntax as that in the provided file where the syntax error is.

Can you try the following?
export { default } from './View'
In your index.js