I wish to add a check to every page in my app. The check is that if a file exists then pull the user to a page.
I think that a HOC is one way to do this (are there others?)
and I have come up with this
import React from "react";
import { NavigationScreenProp } from "react-navigation";
import RNFS from "react-native-fs";
interface MyComponentProps {
navigation: NavigationScreenProp<any, any>;
}
interface MyComponentState {}
const importFileCheck = WrappedComponent => {
class HOC extends React.Component<MyComponentProps, MyComponentState> {
constructor(props) {
super(props);
this.props.navigation.addListener("didFocus", () => {
RNFS.exists(
".\path\I\care\about.xml"
).then(exists => {
if (exists) {
this.props.navigation.navigate("Export");
}
});
});
}
render() {
return <WrappedComponent {...this.props} />;
}
}
return HOC;
};
export default importFileCheck;
When I run the page I get an error
TypeError: undefined is not an object (evaluating this.props.navigation.addListener)
So I guess that the navigation 'thing' is not being passed through properly
For completion I use the HOC like so
importFileCheck(App)
and App has the navigation stuff already in it, and works without the HOC.
Imports are
"react": "16.6.1",
"react-native": "0.57.7",
"react-navigation": "3.2.0"
Further details for the keen :D
First I make a stack navigator that is all the pages in my app
const appNav = createStackNavigator(
{
Calculator: {
screen: Calculator,
navigationOptions: { title: "Calculator" }
},
// more pages
);
export default createAppContainer(appNav);
In App.tsx
this gets 'wrapped' in other components
const WrappedStack = () => {
return <RootStack screenProps={{ t: i18n.getFixedT() }} />;
};
const ReloadAppOnLanguageChange = translate("translation", {
bindI18n: "languageChanged",
bindStore: false
})(WrappedStack);
class App extends React.Component {
public render() {
return (
<I18nextProvider i18n={i18n}>
<StyleProvider style={getTheme(material)}>
<Provider
ManureStore={ManureStore}
SettingsStore={SettingsStore}
FieldStore={FieldStore}
CalculatorStore={CalculatorStore}
FarmStore={FarmStore}
>
<ReloadAppOnLanguageChange />
</Provider>
</StyleProvider>
</I18nextProvider>
);
}
}
and finally we wrap with my new HOC
export default importFileCheck(App)
It's not easy to see what the error is when you have not provided any examples of how the component is used within react-navigation. Since the issue is related to the navigation prop not being passed it would be helpful to see a more complete example of how the HOC is used within the application, with all the react-navigation details.
That said, maybe you could try using the withNavigation HOC to ensure that the navigation prop is present. It is documented here:
https://reactnavigation.org/docs/en/connecting-navigation-prop.html
Well this defeated me (and the navigation event I wanted to use does not fire when an app returns from the background anyway)
this is my solution
import React, { Component } from "react";
import { NavigationScreenProp } from "react-navigation";
import RNFS from "react-native-fs";
import { AppState } from "react-native";
interface Props {
navigation: NavigationScreenProp<any, any>;
}
interface State {}
export default class ImportFileCheck extends Component<Props, State> {
private _handleAppStateChange = nextAppState => {
if (nextAppState === "active") {
RNFS.exists(
RNFS.DocumentDirectoryPath + "/Inbox/Import.json"
).then(exists => {
if (exists) {
this.props.navigation.navigate("Export");
}
});
}
};
constructor(props) {
super(props);
AppState.addEventListener("change", this._handleAppStateChange);
}
public componentWillUnmount() {
AppState.removeEventListener("change", this._handleAppStateChange);
}
public render() {
return null;
}
}
Then within each page files return statement I slap in a <ImportFileCheck navigation={navigation} />
What a hack!
We can use useNavigation hooks of react-navigation with version 5.x.x or later.
import { useNavigation } from '#react-navigation/native';
then initialize the navigation using useNavigation like
const navigation = useNavigation();
and then use navigation for different navigation actions like.
navigation.navigate('ToScreen');
naviagtion.goBack();
Hope this will help someone.
Related
I'm using react native class component and I'm using react-navigation to route in the app. the guide is mostly for the functional component and I'm trying to implement it with class components. but when i trying to get it from reactnavigation it always throws me error that navigation is not a function or undefined. Im sorry if this is an already asked question as I'm really new to this react native.
class component
import React from 'react';
import { useNavigation } from '#react-navigation/native';
import { Button, Divider, Layout, TopNavigation ,Card,Text} from '#ui-kitten/components';
class HomeScreen extends React.Component {
navigateDetails(navigation) {
debugger
navigation('Details');
};
constructor(props) {
super(props);
console.log(this.props);
this.state = { hover: false };
}
render() {
const navigation = this.props;
return(
<Button onPress={this.navigateDetails}>OPEN DETAILS</Button>
);
}
}
export default function (props) {
const navigation = useNavigation();
return <HomeScreen {...props} navigation={navigation} />;
}
First, you have to make sure navigation prop is exist in your class component (As looking in your code its already exist) and the second thing is this.props.navigation is an object, not a function which holds different function like navigate, push etc so you have to execute these functions, here are some changes I did in your code and I hope this will work for you.
class HomeScreen extends React.Component {
constructor(props) {
super(props);
console.log(this.props);
this.state = { hover: false };
}
navigateDetails() {
this.props.navigation.navigate('Details');
};
render() {
const navigation = this.props;
return(
<Button onPress={()=>this.navigateDetails()}>OPEN DETAILS</Button>
);
}
}
export default function (props) {
const navigation = useNavigation();
return <HomeScreen {...props} navigation={navigation} />;
}
Seems I have to pass that navigation to the function as a variable in order to work. so I have changed the function as bellow to pass the navigation to the
function and also changed this.navigateDetails(navigation) to
()=>this.navigateDetails(navigation)
also, I destructed the navigation like const {navigation} = this.props;
full code line
onPress={()=>this.navigateDetails(navigation)}
I see that the next react-navigation version to be released will have the useNavigation() hook, but is there a way in react-navigation#4.x to effectively use this.props.navigation.dispatch() without having to use this.props?
You can use the react-navigation-hooks library with React Navigation 4.
import { useNavigation } from 'react-navigation-hooks';
function MyComponent() {
const navigation = useNavigation();
// ...
}
You can also use the withNavigation HOC from the main package: https://reactnavigation.org/docs/en/with-navigation.html
I figured out a solution myself based on modifying a recommended approach from the official react-navigation 4.x docs. The approach involves making a navigation "app container" component out of the app's stack navigator and creating a reference to that container. This reference is then used by a mediating navigation services object (here I call it NavigationService) that can be imported and used anywhere in my codebase.
// App.js
import { createStackNavigator, createAppContainer } from 'react-navigation';
import NavigationService from './NavigationService';
import HomeScreen from "./HomeScreen";
const TopLevelNavigator = createStackNavigator({
...
Home: {
screen: HomeScreen,
defaultNavigationOptions: { gesturesEnabled: isBackGestureEnabled }
}
...
});
const AppContainer = createAppContainer(TopLevelNavigator);
export default class App extends React.Component {
// ...
render() {
return (
<AppContainer
ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
/>
);
}
}
The dispatching actions I want are defined as follows (here I have methods created for adding to my navigation stack and resetting the navigation stack). (This differs from the react-navigation docs' recommendation; I had to use _navigator.currentNavProp.dispatch() rather than _navigator.dispatch(), which didn't exist for me.)
// NavigationService.js
import { NavigationActions, StackActions } from "react-navigation";
var _navigator;
function setTopLevelNavigator(navigatorRef) {
_navigator = navigatorRef;
}
function navigate(routeName, params) {
_navigator.currentNavProp.dispatch(
NavigationActions.navigate({
routeName,
params
})
);
}
function navigationReset(routeName) {
const resetAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName })]
});
_navigator.currentNavProp.dispatch(resetAction);
}
export default { navigate, navigationReset, setTopLevelNavigator };
And now I can use this in any of my other JavaScript files, whether they are React components or not.
// anyOtherFile.js
import NavigationService from './NavigationService';
...
NavigationService.navigationReset("Home");
// or
NavigationService.navigate("Home");
...
I have two HOCs that add context to a component like so :
const withContextOne = Component => class extends React.Component {
render() {
return (
<ContextOne.Consumer>
{context => <Component {...this.props} one={context} /> }
</ContextOne.Consumer>
);
}
};
export default withContextOne;
Desired Result
I just want an syntactically concise way to wrap a component with this HOC so that it doesn't impact my JSX structure too much.
What I have tried
Exporting a component with the HOC attached export default withContextOne(withContextTwo(MyComponent)) This way is the most concise, but unfortunately it breaks my unit tests.
Trying to evaluate the HOC from within JSX like :
{ withContextOne(withContextTwo(<Component />)) }
This throws me an error saying
Functions are not valid as a React child. This may happen if you return a Component instead of < Component /> from render.
Creating a variable to store the HOC component in before rendering :
const HOC = withContextOne(Component)
Then simply rendering with <HOC {...props}/> etc. I don't like this method as it changes the name of the component within my JSX
You can set the displayName before returning the wrapped component.
const withContextOne = Component => {
class WithContextOneHOC extends React.Component {
render() {
return (
<ContextOne.Consumer>
{context => <Component {...this.props} one={context} /> }
</ContextOne.Consumer>
);
}
}
WithContextOneHOC.displayName = `WithContextOneHOC(${Component.displayName})`;
return WithContextOneHOC;
};
This will put <WithContextOneHOC(YourComponentHere)> in your React tree instead of just the generic React <Component> element.
You can use decorators to ease the syntactic pain of chained HOCs. I forget which specific babel plugin you need, it might (still) be babel-plugin-transform-decorators-legacy or could be babel-plugin-transform-decorators, depending on your version of babel.
For example:
import React, { Component } from 'react';
import { withRouter } from 'react-router';
import { injectIntl } from 'react-intl';
import { connect } from 'react-redux';
import { resizeOnScroll } from './Resize';
#withRouter
#resizeOnScroll
#injectIntl
#connect(s => s, (dispatch) => ({ dispatch }))
export default class FooBar extends Component {
handleOnClick = () => {
this.props.dispatch({ type: 'LOGIN' }).then(() => {
this.props.history.push('/login');
});
}
render() {
return <button onClick={}>
{this.props.formatMessage({ id: 'some-translation' })}
</button>
}
}
However, the caveat with decorators is that testing becomes a pain. You can't use decorators with const, so if you want to export a "clean" undecorated class you're out of luck. This is what I usually do now, purely for the sake of testing:
import React, { Component } from 'react';
import { withRouter } from 'react-router';
import { injectIntl } from 'react-intl';
import { connect } from 'react-redux';
import { resizeOnScroll } from './Resize';
export class FooBarUndecorated extends Component {
handleOnClick = () => {
this.props.dispatch({ type: 'LOGIN' }).then(() => {
this.props.history.push('/login');
});
}
render() {
return <button onClick={}>
{this.props.formatMessage({ id: 'some-translation' })}
</button>
}
}
export default withRouter(
resizeOnScroll(
injectIntl(
connect(s => s, ({ dispatch }) => ({ dispatch }))(
FooBarUndecorated
)
)
)
);
// somewhere in my app
import FooBar from './FooBar';
// in a test so I don't have to use .dive().dive().dive().dive()
import { FooBarUndecorated } from 'src/components/FooBar';
I created a multiscreen app using React Navigator following this example:
import {
createStackNavigator,
} from 'react-navigation';
const App = createStackNavigator({
Home: { screen: HomeScreen },
Profile: { screen: ProfileScreen },
});
export default App;
Now I'd like to add a global configuration state using the new builtin context api, so I can have some common data which can be manipulated and displayed from multiple screens.
The problem is context apparently requires components having a common parent component, so that context can be passed down to child components.
How can I implement this using screens which do not share a common parent as far as I know, because they are managed by react navigator?
You can make it like this.
Create new file: GlobalContext.js
import React from 'react';
const GlobalContext = React.createContext({});
export class GlobalContextProvider extends React.Component {
state = {
isOnline: true
}
switchToOnline = () => {
this.setState({ isOnline: true });
}
switchToOffline = () => {
this.setState({ isOnline: false });
}
render () {
return (
<GlobalContext.Provider
value={{
...this.state,
switchToOnline: this.switchToOnline,
switchToOffline: this.switchToOffline
}}
>
{this.props.children}
</GlobalContext.Provider>
)
}
}
// create the consumer as higher order component
export const withGlobalContext = ChildComponent => props => (
<GlobalContext.Consumer>
{
context => <ChildComponent {...props} global={context} />
}
</GlobalContext.Consumer>
);
On index.js wrap your root component with context provider component.
<GlobalContextProvider>
<App />
</GlobalContextProvider>
Then on your screen HomeScreen.js use the consumer component like this.
import React from 'react';
import { View, Text } from 'react-native';
import { withGlobalContext } from './GlobalContext';
class HomeScreen extends React.Component {
render () {
return (
<View>
<Text>Is online: {this.props.global.isOnline}</Text>
</View>
)
}
}
export default withGlobalContext(HomeScreen);
You can also create multiple context provider to separate your concerns, and use the HOC consumer on the screen you want.
This answer takes in consideration react-navigation package.
You have to wrap your App component with the ContextProvider in order to have access to your context on both screens.
import { createAppContainer } from 'react-navigation'
import { createStackNavigator } from 'react-navigation-stack'
import ProfileContextProvider from '../some/path/ProfileContextProvider'
const RootStack = createStackNavigator({
Home: { screen: HomeScreen },
Profile: { screen: ProfileScreen },
});
const AppContainer = createAppContainer(RootStack)
const App = () => {
return (
<ProfileContextProvider>
<AppContainer />
</ProfileContextProvider>);
}
https://wix.github.io/react-native-navigation/docs/third-party-react-context/
As RNN screens are not part of the same component tree, updating the values in the shared context does not trigger a re-render across all screens. However you can still use the React.Context per RNN screen component tree.
If you need to trigger a re-render across all screens, there are many popular third party libraries such as MobX or Redux.
My situation is, I have the Navigation component, which is the base, and is listening to the Navigations state(Redux). It should be extended to HorizontalNavigation and VerticalNavigation, for easy reusable code in the future.
My problem is, right now I already have the "final" version of Navigation.jsx and I can extend it, as a class, but can't override it's methods. It triggers the super(Navigation) method and not the final one. I need to override the methods in Horizontal or Vertical components.
There is no code erros on console, so it isn't something breaking, but that I don't know how to handle how to extend it.
Navigation.jsx
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import { itemAction, stageAction } from 'Store/Actions/Actions';
class Navigation extends Component {
// ACTIONS
leftAction () {
this.onLeftAction();
}
onLeftAction () {}
rightAction () {
this.onRightAction();
}
onRightAction () {}
downAction () {
this.onDownAction();
}
onDownAction () {}
upAction () {
this.onUpAction();
}
onUpAction () {}
// STAGES
nextStage (slug) {
this.goToStage(slug);
}
previousStage (slug) {
this.goToStage(slug);
}
goToStage (slug) {
// Just for illustration purpose
// let { dispatch } = this.props;
// dispatch(stageAction(slug));
}
// ITEMS
nextItem (index) {
this.goToItem(index);
}
previousItem (index) {
this.goToItem(index);
}
goToItem (index) {
// Just for illustration purpose
// let { dispatch } = this.props;
// dispatch(itemAction(index));
}
render () {
return ();
}
}
function mapStateToProps (state, props) {
navigation: state.Navigations[props.slug]
}
export default connect(mapStateToProps)(Navigation);
Horizontal.jsx
import React from 'react';
import Navigation from 'Components/Navigation/Navigation';
class HorizontalNavigation extends Navigation {
onLeftAction (previousItemIndex) {
this.previousItem(previousItemIndex);
}
onRightAction (nextItemIndex) {
this.nextItem(nextItemIndex);
}
onTopAction (slug) {
this.previousStage(slug);
}
onDownAction (slug) {
this.nextStage(slug);
}
}
export default HorizontalNavigation;
The VerticalNavigation would be the opposite. Left and right for stage; up and down for items.
I don't want to reuse the Navigation component each time I could use Horizontal or Vertical, and rewrite the same exact logic over and over again.
I'm using the Higher-Order Component pattern, exporting a function to connect the extended component, eg:
import { connect as reduxConnect } from 'react-redux'
...
export class Navigation extends Component{
...
export function connect(Component){
return reduxConnect(
(state, props)=>({...})
)(Component);
}
export default connect(Navigation)
And in the Horizontal.jsx you could do
import { Navigation, connect } from './Navigation';
class Horizontal extends Navigation{
...
export default connect(Horizontal);
This way, you keep the connect(mapStateToProps) in one place.
This is a fun one. At the bottom of Navigation, you're exporting the connecting component, which in essence is exporting the class created in connect, which is not the same class as Navigation. So, when you extend the default exported class, you're actually extending the connect class. That's a mouthful.
To get this to work, you could also export your class (in addition to export default connect(mapStateToProps)(Navigation); at the bottom:
export class Navigation extends Component {
Then to extend it, you can do:
import { Navigation } from './Navigation';
class Horizontal extends Navigation {
// ...
However, you would also need connect the Horizontal component as well in order to get the right props from redux.
If you don't want to use connect, you could take in props to your Navigation component that changes how those up/down/left/right actions work, then you could create a Horizontal/Vertical component that passes in the right props. Something like:
class Horizontal extends React.Component {
constructor(props, context) {
super(props, context);
this.onUp = this.onUp.bind(this);
this.onDown = this.onDown.bind(this);
this.onLeft = this.onLeft.bind(this);
this.onRight = this.onRight.bind(this);
}
onUp() {}
onDown() {}
onLeft() {}
onRight() {}
render() {
return (
<Navigation onUp={this.onUp} onDown={this.onDown} onLeft={this.onLeft} onRight={this.onRight} />
);
}
);