isActive style in react-router v.6

In react-router-dom v6 the isActive is a prop value destructured from a function passed to either of the children, className, and style NavLink props. NavLink interface NavLinkProps extends Omit< LinkProps, “className” | “style” | “children” > { caseSensitive?: boolean; children?: | React.ReactNode | ((props: { isActive: boolean }) => React.ReactNode); className?: | string | ((props: … Read more

Using Jest to test a Link from react-router v4

You can wrap your component in the test with the StaticRouter to get the router context into your component: import React from ‘react’; import renderer from ‘react-test-renderer’; import { Link } from ‘react-router-dom’; import { StaticRouter } from ‘react-router’ test(‘Link matches snapshot’, () => { const component = renderer.create( <StaticRouter location=”someLocation” context={context}> <Link to=”#” /> … Read more

Refresh previous screen on goBack()

Adding an Api Call in a focus callBack in the screen you’re returning to solves the issue. componentDidMount() { this.props.fetchData(); this.willFocusSubscription = this.props.navigation.addListener( ‘willFocus’, () => { this.props.fetchData(); } ); } componentWillUnmount() { this.willFocusSubscription.remove(); } UPDATE 2021: componentDidMount() { this.props.fetchData(); this.willFocusSubscription = this.props.navigation.addListener( ‘willFocus’, () => { this.props.fetchData(); } ); } componentWillUnmount() { this.willFocusSubscription(); } … Read more