Develop Reference

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!

Snapshot test fails for <AnimatedComponent/> in react native and jest

I am using jest to create snapshots of react-native components. I'm using babel 7. I can create snapshots but Snapshot is not created for TouchableOpacity component
I have already tried updating react-test-renderer to latest version but that does not help.
The snapshot test file --
Button.test.js
import React from 'react';
import renderer from 'react-test-renderer';
import Button from '../src/components/Button';
test('renders correctly', () => {
const tree = renderer.create(<Button />).toJSON();
expect(tree).toMatchSnapshot();
});
Button.js
const Button = (props: Props) => {
const { text, disabled, style, onPress } = props
return (
<TouchableOpacity
style={[styles.button, style]}
disabled={disabled}
activeOpacity={disabled ? 1 : 0.5}
onPress={!disabled && onPress}
>
<Text style={styles.buttonText}>{text}</Text>
</TouchableOpacity>
)
}
here's the error message for jest
console.error node_modules/react-test-renderer/cjs/react-test-renderer.development.js:6884
The above error occurred in the <AnimatedComponent> component:
in AnimatedComponent (created by TouchableOpacity)
in TouchableOpacity (created by Button)
in Button
TypeError: Cannot read property 'bind' of undefined
at new bind (node_modules/react-native/Libraries/Animated/src/createAnimatedComponent.js:39:53)
Here's my package.json
{
"name": "",
"version": "0.0.1",
"scripts": {
"test:unit": "jest",
"test": "jest",
},
"jest": {
"preset": "react-native",
"testMatch": [
"**/?(*.)test.js?(x)"
],
"snapshotSerializers": [
"enzyme-to-json/serializer"
],
"setupFiles": [
"<rootDir>/jest/setup.js"
]
},
"dependencies": {
"#babel/runtime": "^7.1.2",
"react": "16.5.0",
"react-native": "0.57.2",
},
"devDependencies": {
"#babel/core": "^7.1.2",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/preset-env": "^7.1.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^9.0.0",
"babel-jest": "^23.6.0",
"babel-preset-flow": "^7.0.0-beta.3",
"detox": "^9.0.4",
"enzyme": "^3.7.0",
"enzyme-adapter-react-16": "1.6.0",
"enzyme-to-json": "^3.3.4",
"eslint": "^5.6.0",
"flow-bin": "0.78.0",
"husky": "^0.14.3",
"jest": "23.6.0",
"jest-snapshot": "^23.6.0",
"lint-staged": "^7.3.0",
"metro-react-native-babel-preset": "0.45.4",
"mocha": "^5.2.0",
"react-test-renderer": "16.5.2",
"regenerator-runtime": "^0.12.1"
}
}
Here's my bable.config.js
module.exports = api => {
api.cache(true);
return {
presets: [
'module:metro-react-native-babel-preset',
'flow',
'#babel/preset-env'
],
plugins: ['#babel/plugin-proposal-class-properties']
};
};
Here's my .babelrc
{
"presets": ["module:metro-react-native-babel-preset", "flow"]
}

Update your babel.config.js plugins list to include "#babel/plugin-transform-flow-strip-types" before the class-properties plugin:
plugins: [
"#babel/plugin-transform-flow-strip-types",
"#babel/plugin-proposal-class-properties"
]
Reference:
https://github.com/facebook/react-native/issues/20150#issuecomment-417858270

Invalid Chai property: matchSnapshot

I've followed instructions here: https://www.npmjs.com/package/chai-jest-snapshot
I'm using the Create-React-App starter kit and am trying to write basic Jest tests for it.
I read here that we are not suppose to install jest if we are using that kit, so here is my full package.json.
{
"name": "bitcoin",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject",
"test": "jest"
},
"now": {
"name": "bitcoin",
"engines": {
"node": "8.11.3"
},
"alias": "leongaban.com"
},
"dependencies": {
"axios": "^0.18.0",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-redux": "^5.0.7",
"react-scripts": "1.1.5",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"chai": "^4.1.2",
"chai-jest-snapshot": "^2.0.0",
"enzyme": "^3.4.4",
"enzyme-adapter-react-16": "^1.2.0",
"react-test-renderer": "^16.4.2",
"sinon": "^6.1.5"
}
}
My Test:
import React from 'react';
import renderer from 'react-test-renderer';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import sinon from 'sinon';
import BitcoinWidget from './bitcoinWidget';
const props = {
logo: 'foo',
coin: {
price: 0
},
refresh: jest.fn()
};
// describe('<BitcoinWidget />', () => {
// it('renders three <BitcoinWidget /> components', () => {
// const wrapper = shallow(<MyComponent {...props}/>);
// expect(wrapper.find('header').length).toBe(1);
// });
// });
describe('Layout', () => {
test('renders children correctly', () => {
const wrapper = renderer
.create(
<BitcoinWidget {...props}/>
)
.toJSON();
expect(wrapper).to.matchSnapshot();
});
});
And finally the component I'm testing:
import React from 'react';
const BitcoinWidget = ({ logo, coin : { price }, refresh }) => {
return (
<div className="bitcoin-wrapper shadow">
<header>
<img src={logo} alt="Bitcoin Logo"/>
</header>
<div className="price">
Coinbase
${price}
</div>
<button className="btn striped-shadow white" onClick={refresh}>
<span>Refresh</span>
</button>
</div>
);
}
export default BitcoinWidget;
Any thoughts?

It was a problem with the packages, I didn't even need to use chai at all.
Here is my new package.json
Note the added "jest": config section:
{
"name": "bitcoin",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject",
"test": "jest src",
"test:watch": "jest src --watch"
},
"now": {
"name": "bitcoin",
"engines": {
"node": "8.11.3"
},
"alias": "leongaban.com"
},
"jest": {
"moduleNameMapper": {
".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"js",
"jsx"
],
"moduleDirectories": [
"node_modules"
]
},
"dependencies": {
"axios": "^0.18.0",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-redux": "^5.0.7",
"react-scripts": "1.1.5",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0"
},
"devDependencies": {
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-es2015": "^6.24.1",
"chai": "^4.1.2",
"chai-jest-snapshot": "^2.0.0",
"enzyme": "^3.4.4",
"enzyme-adapter-react-16": "^1.2.0",
"enzyme-to-json": "^3.3.4",
"identity-obj-proxy": "^3.0.0",
"react-test-renderer": "^16.4.2",
"sinon": "^6.1.5"
}
}
And no my test works without chai:
import React from 'react';
import renderer from 'react-test-renderer';
import Adapter from 'enzyme-adapter-react-16';
import { configure, shallow } from 'enzyme';
import toJson from 'enzyme-to-json';
// import { expect } from 'chai';
// import sinon from 'sinon';
configure({ adapter: new Adapter() });
import BitcoinWidget from './bitcoinWidget';
let wrapper;
const props = {
logo: 'foo',
coin: {
price: 0
},
refresh: jest.fn()
};
describe('<BitcoinWidget /> layout', () => {
beforeEach(() => {
wrapper = shallow(<BitcoinWidget {...props}/>);
});
it('renders correct markup', () => {
expect(wrapper.find('header').length).toBe(1);
expect(wrapper.find('button').length).toBe(1);
});
it('should render a component matching the snapshot', () => {
const tree = toJson(wrapper);
expect(tree).toMatchSnapshot();
expect(wrapper).toHaveLength(1);
});
});

getDerivedStateFromProps not called in React Native

I'm trying to use the new getDerivedStateFromProps lifecycle method in my React Native component but the method never gets called. I've tried looking it up but found no issues in the react-native repo. No results on StackOverflow or Google either.
What I did find are a reddit thread and a StackOverflow issue which both cite updating react-dom as a solution, which would not work in this case since there's no dom in React Native.
Can anyone confirm if this method is supposed to work in React Native? If it can be used, any help with solving this issue will be much appreciated.
Below is a simplified version of my component:
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Auth } from '../redux';
import ChillaAPI from '../api';
const withUserData = WrappedComponent => {
class UserDataLoader extends React.Component {
static getDerivedStateFromProps(props, state) {
console.log('getDerivedStateFromProps');
if (props.uid !== state.uid) {
return {
uid: props.uid,
};
}
return state;
}
state = { uid: null };
render() {
console.log({ propsUid: this.props.uid });
console.log({ stateUid: this.state.uid });
return <WrappedComponent />;
}
}
UserDataLoader.propTypes = {
uid: PropTypes.bool.isRequired,
};
return connect(mapStateToProps)(UserDataLoader);
};
function mapStateToProps(state) {
return {
uid: Auth.selectors.getUid(state),
};
}
export default withUserData;
The log output from the component is as follows:
{ propsUid: null }
{ stateUid: null }
{ propsUid: 'jW78ej3JDgPpheadAlcrkG8UIZB2' }
{ stateUid: null }
Here is my package.json for good measure:
{
"name": "Chilla",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"start:reset": "node node_modules/react-native/local-cli/cli.js start --reset-cache",
"watch:lint": "node node_modules/eslint-watch/bin/esw -w",
"test": "jest",
"precommit": "lint-staged"
},
"lint-staged": {
"*.js": [
"node_modules/.bin/prettier --single-quote --trailing-comma es5 --write",
"eslint",
"git add"
]
},
"dependencies": {
"axios": "^0.18.0",
"firebase": "^4.13.1",
"husky": "^0.14.3",
"lint-staged": "^7.0.4",
"prop-types": "^15.6.1",
"react": "16.3.1",
"react-native": "^0.52.2",
"react-native-fetch-blob": "^0.10.8",
"react-native-image-picker": "^0.26.7",
"react-navigation": "^1.5.11",
"react-redux": "^5.0.7",
"recompose": "^0.27.0",
"redux": "^4.0.0",
"redux-logger": "^3.0.6"
},
"devDependencies": {
"babel-eslint": "^8.2.3",
"babel-jest": "22.4.3",
"babel-preset-react-native": "4.0.0",
"eslint": "^4.19.1",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0",
"eslint-plugin-react-native": "^3.2.1",
"eslint-watch": "^3.1.4",
"jest": "22.4.3",
"prettier": "^1.12.1",
"react-test-renderer": "16.3.1"
},
"jest": {
"preset": "react-native"
}
}

Updating to react-native#0.55.3 solved this issue

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";