Displaying white screen when opening React-Native from existing native android App - reactjs

In Android, integrating react native to an existing app. Basically, my android app was originally developed in Java. From the java side, I click on the button to go to another screen that is using React Native.
Then, there is a problem, every time I click the button that opens the App.js (which contains stack navigation), it takes 2 or 3 seconds in a white screen (loading the bundle). so how to avoid this white screen?
Updated Code
const Navigation = StackNavigator({
home:{
screen: HomeScreen,
}
})
class MyApp extends Component {
render() {
return (
<Navigation/>
);
}
}
export default MyApp;
AppRegistry.registerComponent('MyApp', () => Navigation);

Related

Material UI breaks NextJS app in production

I created a NextJS app which uses server-side rendering and Material UI. It works fine in development.
The app compiles and builds without errors when I run "next build". When I run it with NODE_ENV=production, the webpage renders just fine but many features no longer work. For example:
The "Hidden" component for Material UI never shows any of its sub-components nested within even when it should (in my development app, it hides and shows certain divs depending on screen size).
None of the buttons on the webpage work. All these buttons have "onClick" events whose callback functions modify the React state object in some way when clicked. However, nothing happens when these are clicked. The state remains the same, so I'm assuming these functions never get called when these click events occur. This is true for Material UI's Button components as well as plain old HTML buttons (as JSX).
Everything works completely fine when I run this in dev mode on my laptop. However, when I build the NextJS app and deploy it to the server in production mode, I encounter the problems listed above. So far, my research has only turned up the possibility of class name conflicts during builds (this was said on Material UI's FAQ page). Has anyone had the same problem as I'm having?
EDIT: I just started a barebones NextJS app containing only one index page and minimal dependencies with one state parameter and one button to modify the parameter via an onClick event. I'm having the same problem. The button works in development but not in production. So this would be a NextJS issue rather than a Material UI problem. But that still doesn't explain why the "Hidden" component for Material UI always remains hidden regardless of screen size. Maybe it's both a Next JS and Material UI problem.
I think this can help you.
in _document.js
import React from 'react';
import Document, {
Html, Main, NextScript,
} from 'next/document';
import { ServerStyleSheets } from '#material-ui/core/styles';
export default class MyDocument extends Document {
render() {
return (
<Html lang="en">
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with server-side generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
// Render app and page and get the context of the page with collected side effects.
const sheets = new ServerStyleSheets();
const originalRenderPage = ctx.renderPage;
ctx.renderPage = () => originalRenderPage({
enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
});
const initialProps = await Document.getInitialProps(ctx);
return {
...initialProps,
// Styles fragment is rendered after the app and page rendering finish.
styles: [...React.Children.toArray(initialProps.styles), sheets.getStyleElement()],
};
};
and in add in _app.js
React.useEffect(() => {
// Remove the server-side injected CSS.
const jssStyles = document.querySelector('#jss-server-side');
if (jssStyles) {
jssStyles.parentElement.removeChild(jssStyles);
}
}, []);
Hope it work !
About the first Question, Because you open the ssr, The material ui can't judge the breakpointer in server side. Here's an official example。server-sider-rendering. You need to determine the user device based on the UA header to determine the page sizer. Use matches to determine what you need to display
_document.js -> MaterialUI styles for SSR.
import React from 'react'
import NextDocument from 'next/document'
import { ServerStyleSheet as StyledComponentSheets } from 'styled-components'
import { ServerStyleSheets as MaterialUiServerStyleSheets } from '#material-
ui/styles'
export default class Document extends NextDocument {
static async getInitialProps(ctx) {
const styledComponentSheet = new StyledComponentSheets()
const materialUiSheets = new MaterialUiServerStyleSheets()
const originalRenderPage = ctx.renderPage
try {
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: App => props =>
styledComponentSheet.collectStyles(
materialUiSheets.collect(<App {...props} />),
),
})
const initialProps = await NextDocument.getInitialProps(ctx)
return {
...initialProps,
styles: [
<React.Fragment key="styles">
{initialProps.styles}
{materialUiSheets.getStyleElement()}
{styledComponentSheet.getStyleElement()}
</React.Fragment>,
],
}
} finally {
styledComponentSheet.seal()
}
}
}

How to open new Screen in React Native

In my react native project I have BottomTabNavigation with 5 bottom tabs but i want to add new screens not a tab (like login,signup, change password ,cart,sign out ) but i dont know 😢 how to do this , can anyone tell me how this will happen. Thanks in Advance.
Here is my app screenshot https://ibb.co/4fqgXwp
React Native doesn't provide a navigation solution as robust as you're asking for. Take a look at react-navigation for a solution that should be easy to follow and meet your needs.
You should use Stack Navigator as your main navigator . Add Bottom Tab navigator as stack navigator scene
Code For AppNavigator React Navigation
const TabNavigator = createBottomTabNavigator({
Tab1: Tab1,
Tab2: Tab2,
Tab3: Tab3,
Tab4: Tab4,
Tab5: Tab5
});
const AppNavigator = createStackNavigator({
Home: TabNavigator,
Login: Login
});
export default createAppContainer(AppNavigator);
Working Demo
You can use react-native-navigation library as mentioned in official documentation.

react create app console will not output anything

i'm using react create app. ejected project.
When I console.log('hello') in the home component, nothing output. And it seem the server restart every time I save somethig.
This is my component
import React from 'react';
const css = {
}
export default function Home(props) {
console.log('hello')
return (
<div> something</div>
)
}
This is what the console shows every-time I save some change. it does nothing. I expect it show 'hello in the console'
Try to open http://localhost:3000 in your browser, after that open your browser devtools and select console tab, there you will see the console output.

Next.js - route based modal

When using Next.js, I want to show a modal based on a url, on top of another page.
If gallery.js is the page component, I want /gallery/image/1232132 to display a modal with an image, on top of the gallery page.
Is that possible?
This question is a bit old, but since March 2020 there's a full example on the official Next.js repo (you should probably use this since it must be the "recommended way" by the maintainers):
https://github.com/vercel/next.js/tree/canary/examples/with-route-as-modal
Here's the original issue:
https://github.com/vercel/next.js/issues/8023
And the related PR:
https://github.com/vercel/next.js/pull/11473
If I understand your question correctly you want to add deep links to the individual gallery items. This is possible, but you need a custom server to handle custom routes.
The first thing you need to do is setup the routes. I shared an example here: using React router with Next JS route.
const nextRoutes = require('next-routes');
const routes = (module.exports = nextRoutes());
routes
.add('gallery', '/gallery')
.add('gallery-item', '/gallery/image/:image', 'gallery')
Then you can access this parameter in the getInitialProps method, and render the modal if the image parameter is set:
import React from 'react';
import PropTypes from 'prop-types';
export default class Gallery extends React.Component {
static propTypes = {
image: PropTypes.string
};
static getInitialProps({query: {image}}) {
return {image};
}
render() {
const {image} = this.props;
return (
<div>
{image &&
// render modal
}
// render gallery
</div>
);
}
}

React Navigation trigger when routeName changed

I'm using react navigation for navigate screen. I used nested navigation, TabNavigator and StackNavigator. How can I know in current screen has been swipe / change to other screen and change the state inside the screen without using Redux . I try to get this.props.navigation.state.routeName , it get the routeName of the screen, but how to trigger when routeName has change
const mainNav = TabNavigator({
Home: {
screen: HomeScreen,
},
Live: {
screen: LiveScreen,
},
Radio: {
screen: RadioScreen,
},
} );
export const mainStack = StackNavigator({
Home: { screen: mainNav},
Content: { screen: ContentScreen },
});
At present there is no way to track swipe gestures in react navigation. You can use hacks to achieve this, But mostly all of them requires hooking react navigation with redux.
Best way to track your screens will be to use react redux and hook the state with appState. This will give you most control over navigation and you can also use redux actions to control navigations along with other business stuff f in the app.
Simplest method to use react navigation with redux
You can refer
https://github.com/react-community/react-navigation/issues/1063

Resources