Develop Reference

Expo: No native splash screen registered for provided activity. Please configure your application's main Activity to call 'SplashScreen.show'

Unhandled promise rejection: Error: No native splash screen registered for given view controller. Call 'SplashScreen.show' for given view controller first. (https://github.com/expo/expo/tree/main/packages/expo-splash-screen#-configure-android).
I get the following warning only on my android emulator when launching the app.
My Expo SDK is 47 and my React Native version is 0.70.5.
App.tsx
import React, { useCallback } from 'react';
import {ThemeProvider} from 'styled-components'
import { View } from 'react-native';
import { Routes } from './src/routes';
import { AppProvider } from './src/hooks';
import * as SplashScreen from 'expo-splash-screen';
import * as Font from 'expo-font';
import {
Roboto_300Light,
Roboto_400Regular,
Roboto_500Medium,
Roboto_700Bold,
} from '#expo-google-fonts/roboto';
SplashScreen.preventAutoHideAsync();
export default function App() {
const [fontsLoaded] = Font.useFonts({
Roboto_300Light, Roboto_400Regular, Roboto_500Medium, Roboto_700Bold
})
const onLayout = useCallback(async () => {
if(fontsLoaded){
await SplashScreen.hideAsync();
}
}, [fontsLoaded])
if(!fontsLoaded){
return null;
}
return (
<View style={{flex:1}} onLayout={onLayout}>
<ThemeProvider theme={theme}>
<AppProvider>
<Routes />
</AppProvider>
</ThemeProvider>
</View>
)
}
This warning is currently showing in the Android build.
iOS is working fine.

How do I load Next.js App after promise is resolved?

How do I achieve the code below using Next.js.
I believe there is an issue with Next.js not being able to access the window object unless you're inside a useEffect(() => {}) hook.
Changing to regular React, this code worked fine.
What am I missing in the Next.js ecosystem that doesn't allow this type of delayed render to work?
Thank you.
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { initializeContract } from "./utils/near";
window.nearInitPromise = initializeContract()
.then(() => {
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
})
.catch(console.error);
reportWebVitals();
Update: Here is my attempt with Next.js
import { useEffect } from "react";
import { initializeContract } from "../utils/near";
function MyApp({ Component, pageProps }) {
useEffect(() => {
window.nearInitPromise = initializeContract().then(() => renderApp());
}, []);
const renderApp = () => {
return <Component {...pageProps} />;
};
}
export default MyApp;

That's because window object is not available on server-side (nodejs), when you use it inside useHook it's executed client-side. (when the component is mounted).
So if you run your code inside an useEfect this ensures that your code only runs on the client-side.
Window is not defined in Next.js React app

'Router'/'GlobalStyles' cannot be used as a JSX component

I'm having this issue on my React application:
'Router' cannot be used as a JSX component.
Its instance type 'Router' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
It's also happening on a Global Styles component I created
'GlobalStyles' cannot be used as a JSX component.
Its instance type 'Component<ThemedGlobalStyledClassProps<{}>
This is my App.tsx file:
import {BrowserRouter, Router} from 'react-router-dom';
import { Slide, ToastContainer } from "react-toastify";
import Routes from "./routes";
import GlobalStyles from "./styles/global";
import Header from "./components/Header";
import Aside from "./components/Aside";
import { CartProvider } from "./hooks/useCart";
import history from "./history";
import { AuthProvider } from "./Context/AuthContext";
const App = (): JSX.Element => {
return (
<>
<Aside />
<AuthProvider>
<Router history={history}>
<CartProvider>
<GlobalStyles />
<Header />
<Routes />
<ToastContainer autoClose={3000} transition={Slide} />
</CartProvider>
</Router>
</AuthProvider>
</>
);
};
export default App;
I'm using the version 18 of React and there's what I've tried so far:
Deleting node_modules and running yarn install
Reverting React version to 17~
Reinstalling React and React Router

First at all you have to import BrowserRouter as Router like the following code:
import { BrowserRouter as Router, } from "react-router-dom";
GlobalStyles probably it not a component.
Here two way to create a component in React.
1-) Function Components must be like following:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
2-) Class Components:
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}

Your styled-components might be using old versions of #types/react. You can confirm by checking the version of react types in node_modules/types/styled-components.
For me adding yarn resolutions helped to solve the problem (if you are using yarn as well).
Try adding this to your package.json file.
"resolutions": {
"#types/react": "^18.0.0"
}
Unfortunately it will (might???) not work if you are using npm.

"Objects are not valid as a React child" appear only in IE

Objects are not valid as a React child. If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of Root.
This bug only appear in IE, i know a react child can't be an object, but i can't find any error in Root class
// Root.js
import React, { Component, PropTypes } from 'react'
import { Provider } from 'react-redux'
import { Router, browserHistory } from 'react-router'
import { syncHistoryWithStore } from 'react-router-redux'
import routes from './routes'
export default class Root extends Component {
render() {
const { store } = this.props
const history = syncHistoryWithStore(browserHistory, store)
return (
<Provider store={store}>
<div>
<Router history={history} routes={routes} />
</div>
</Provider>
)
}
}
// routes.js
import React from 'react'
import { Route } from 'react-router'
import Cookie from './libs/cookie'
import App from './app'
import MobileRouter from './routes/mobile'
import WebRouter from './routes/web'
export default (
<Route path="/" component={App}>
{ WebRouter }
{ MobileRouter }
</Route>
)
// App.js
import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux'
import { browserHistory } from 'react-router'
class App extends Component {
constructor(props) {
super(props)
}
render() {
const { children } = this.props
return (
<div>
{ children }
</div>
)
}
}

Why
If you are using react-hot-loader v3 for hot-reloading in DEV environment you need to load react-hot-loader/patch after babel-polyfill does.
So Webpack's entry field should look like the following to work correctly with react 15.4.x, react-hot-loader v3 and webpack-dev-server.
Fix
entry: [
'babel-polyfill', // Load this first
'react-hot-loader/patch', // This package already requires/loads react (but not react-dom). It must be loaded after babel-polyfill to ensure both react and react-dom use the same Symbol.
'react', // Include this to enforce order
'react-dom', // Include this to enforce order
'./index.js' // Path to your app's entry file
]
Use
It is very useful to test a feature in your DEV environment on IE. You can now access your local app, with webpack running, on IE from a VM, local network, ngrok, etc.

“Objects are not valid as a React child” appear only in IE
Not true. This error will appear in all browsers if you use an object. You mostly likely have something like the following in your code
{someBool && someObj}
where someBool is only coming out true based on how your application state is in IE. if you did the same actions in any other browser you will get the same error.
Fix
Don't render an object. React can't handle it. And is giving you the correct error which you should fix i.e render something from the obj e.g.
{someBool && someObj.someStringProp}

New version react router doesn't work with redux

maybe this issue is because the new version of the react router have few days, but I have been reading about this issue and I want to clarify what is going on. I am using the last version of the react router and I want to do the routing through redux. I follow the steps that are listed in the documentation of the redux router module: https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux, but I receive this error when I make the implementation: (I know that the issue is in the server render)
Invariant Violation: Browser history needs a DOM
Here is my code (the important parts):
server.js
import { Provider } from 'react-redux';
import store from './store';
lisaApp.get('*', function (req, res) {
const context = {};
const html = renderToString(
<Provider store={store}>
<MuiThemeProvider muiTheme={getMuiTheme()}>
<StaticRouter location={req.url} context={context}>
<Routes />
</StaticRouter>
</MuiThemeProvider>
</Provider>,
);
res.setHeader('Content-Type', 'text/html');
if (context.url) {
res.writeHead(301, {
Location: context.url,
});
res.end();
}
res.write(
renderToStaticMarkup(<Layout title={req.title} content={html} />),
);
res.end();
}
client.js
import { Provider } from 'react-redux';
import createHistory from 'history/createBrowserHistory';
import { BrowserRouter } from 'react-router-dom';
import store from './store';
render((
<Provider store={store}>
<MuiThemeProvider muiTheme={getMuiTheme()}>
<BrowserRouter history={createHistory()}>
<Routes />
</BrowserRouter>
</MuiThemeProvider>
</Provider>),
document.getElementById('app'));
store.js
import { createStore, combineReducers, applyMiddleware } from 'redux'
import createHistory from 'history/createBrowserHistory'
import { ConnectedRouter, routerReducer, routerMiddleware, push } from 'react-router-redux'
import thunk from 'redux-thunk';
import reducer from './reducer';
const history = createHistory()
const middlewareHistory = routerMiddleware(history)
const store = createStore(
combineReducers({
reducer,
router: routerReducer
}),
applyMiddleware(
middlewareHistory,
thunk
)
);
export default store;
component.js (dispatch)
const mapDispatchToProps = dispatch => {
return {
onNavigateTo(dest) {
dispatch(push(dest));
}
};
};
Obviously the dispatch, from my component never is called. Anyone can me clarify me where I am wrong? or maybe this feature is not implemented yet in the react router redux module? In advance Thanks.

Instead of BrowserRouter, use ConnectedRouter from the react-router-redux library:
import { Provider } from 'react-redux';
import createHistory from 'history/createBrowserHistory';
import { ConnectedRouter } from 'react-router-redux';
import store from './store';
render((
<Provider store={store}>
<MuiThemeProvider muiTheme={getMuiTheme()}>
<ConnectedRouter history={createHistory()}>
<Routes />
</ConnectedRouter>
</MuiThemeProvider>
</Provider>),
document.getElementById('app'));

I faced the same issue few days ago. In your BrowserRouter you manually create and pass a browserHistory object. Then, whenever you need access to the history object you import it, like it happens in your store.js, which is shared between the server and the client. However, on the server there is no DOM, hence the error.
I fixed the issue by NOT creating the history object manually, this is not needed since you use the BrowserRouter. As stated in the documentation, the BrowserRouter is:
A <Router> that uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL.
Instead of importing the history manually whenever you need it, just use the handy withRouter higher order component. This way, in your props you will get access not only to the history, but also to the closest <Routes>'s match. Read more about it here.
Regarding your last point about the dispatch, you are right that it's not called. Whenever you create a component via the connect of react-redux, remember to wrap it with the withRouter higher order component. Read more about it here.
I believe the above will fix your issue. I can share a working example if you want me to, but my solution is very similar to what you have, with the exception of my above comments.
I hope this helps.

This has worked for me.
I used ConnectRouter from the "react-router-dom" library. Along with it i used BrowserRouter from the "react-router-dom" library. **Now i am able to use React+Redux+Routing happily.
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";
import rootReducer from "./reducers";
import App from "./App";
import { connectRouter } from "connected-react-router";
import createHistory from "history/createBrowserHistory";
export const history = createHistory();
const store = createStore(connectRouter(history)(rootReducer));
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById("root")
);
I hope this will work for you as well.
Happy coding!!!