What is the equalent for navigationOptions in React Navigation V6.0? - reactjs

In V4.0 we could configure any screen inside it using navigationOptions.
for example.
In HomeScreen component we could configure it using
HomeScreen.navigationOptions = { ...config }
what is the equalent in V6.0?

in v6 if you want to add navigation option you can use the simple option like this
HomeScreen:{
screen:HomeScreen,
navigationOption:{...config}
}

Related

Move from login page to dashboard after successful login in react js

using React js I am trying to move from login page to dashboard page but i am not getting the correct way.
Find an example for authorization flows with react-router-dom here:
https://github.com/remix-run/react-router/tree/main/examples/auth
Are you using router? If yes, you can use useNavigate in react-router-dom to navigate to another path when you've done login
Ex:
import {useNavigate} from 'react-router-dom'
...
export default function App(){
const navaigate = useNavigate()
const handleLogin = () => {
//do something
...
navigate('/dashboard') //or whatever path you wish
}
return (
....
)
}
Note: It is only working if your React App using Router
Please refer https://github.com/VickyDhanwani/ReactJS-App/blob/main/src/App.js if you are not using react router. Navigation is based on state and update in state changes the view after validation.

Is there a way to pass state to pages in Gatsby?

Since Gatsby effectively hides the router, you can't pass props to each page in the way you would with BrowserRouter in Create-React-App. Is there a way to do this in Gatsby? I assume I need to do it somehow in Gatsby-browser.js. I basically want to maintain a state called Step, that is accessible by all pages. Would I have to use Context for this?
You can pass state into a page with Link (docs), but be mindful of pages being built without state (i.e. statically).
<Link
to={`/photos/`}
state={{ tag }}
>
See more {tag}
</Link>
const PhotosPage = ({ location: { state } }) =>
<div>{state?.tag ? `${tag} photos` : "All photos"}</div>
The native (and easiest) way is using React context but you have multiple ways of sharing a global state in Gatsby:
Using global wrappers within the wrapRootElement exposed API:
import React from "react"
import { ThemeProvider } from "./src/context/ThemeContext"
export const wrapRootElement = ({ element }) => (
<ThemeProvider>{element}</ThemeProvider>
)
If you follow this approach, you'll need to use wrapRootElement in both gatsby-browser.js as well gatsby-ssr.js since it's a shared API.
Keep in mind that Gatsby's router extends from #reach/router (from React).
In that way, you'll keep your step state across the application.

React Developer Tools shows all components as "Anonymous"

I've installed the React Developer Tools extension on Google Chrome to debug a React application written in TypeScript, but once I start debugging the application and open the "Components" window, all components are shown as "Anonymous".
Granted, the application uses mostly function components.
Does anyone know if there is a way to get React Developer Tools to show component names in its component tree?
This happens when you define your components like so:
// Default arrow function export
export default () => {
// ...
}
// Default function export
export default function() {
// ...
}
You can replace with the following to fix the issue:
const CustomComponent = () => {
// ...
}
export default CustomComponent;
// or
export default function YourComponent() {
// ...
}
If you're using an exported anonymous functional component or a memo'ed component; it would be shown as Anonymous
Refer this - https://github.com/facebook/react/issues/17876
Or try solutions mentioned here - React Dev tools show my Component as Unknown

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>
);
}
}

Can we have React 16 Portal functionality React Native?

I'm using React Native which ships with React 16 alpha release which supports portals. While in browser and having access to DOM we can use id or classes to access element from anywhere in component/file hierarchy like this:
const modalRoot = document.getElementById('modal-root');
and pass it to createPortal(child, container) container arg. React docs clearly says than container should be DOM element:
The second argument (container) is a DOM element.
This function is also a method of ReactDOM which doesn't exist in React Native.
Is there a way to achieve the similar functionality in React Native?
Use case:
I want to render an animated overlay in the root of my application but pass the Animated values props to it from a parent deep in the tree hierarchy (can't use Redux actions for such things).
I had similar problem where I wanted to render overlay on top of everything from deeply nested child component. I solved my problem with React Native's Modal
It renders its content on top of everything :) Easy to use and no need for extra dependencies
I don't think react-native provides this functionality in its own API.
But there is a library available which provides the similar functionality. react-gateway
As per the docs of react-gateway,
It also works in universal (isomorphic) React applications without any additional setup and in React Native applications.
React Gateway does not directly depend on react-dom, so it works fine with React Native under one condition:
You must pass React Native component like View or similar to component prop of .
import React from 'react';
import { Text, View } from 'react-native';
import {
Gateway,
GatewayDest,
GatewayProvider
} from 'react-gateway';
export default class Application extends React.Component {
render() {
return (
<GatewayProvider>
<View>
<Text>React Gateway Native Example</Text>
<View>
<Gateway into="one">
<Text>Text rendered elsewhere</Text>
</Gateway>
</View>
<GatewayDest name="one" component={View} />
</View>
</GatewayProvider>
);
}
}
The above example is taken from the repo itself. react native example
One way to render the items above the screen can be done using react-native-paper library.
import * as React from 'react';
import { Text } from 'react-native';
import { Portal } from 'react-native-paper';
const MyComponent = () => (
<Portal.Host>
<Text>Content of the app</Text>
</Portal.Host>
);
export default MyComponent;
Portal host renders all of its children Portal elements. For example, you can wrap a screen in Portal.Host to render items above the screen.
Here is the link which describes its usage:
https://callstack.github.io/react-native-paper/portal-host.html

Resources