vonovak / react-navigation-props-mapper Goto Github PK

I noticed some of the data originally provided in this.props.navigation is not passed
when using withMappedNavigationProps.
i.e:
routeName

For me, it made this library useless as I need the route name to do some flow calculations in my app.

i have params like this

params : {
balance : 20000
}

when i try to console.log(params) its work fine, but when i try console.log(params.balance) i got undefined. what should i do ?

SecondOrderWrapperComponent needs to be optional, marked with a ? in the type definition at least, correct?

 interface withMappedNavigationParamsDecorator {
    (SecondOrderWrapperComponent?: React.ReactNode): WrappedComponent;

Hi.

Please pardon the ignorance, I am rather green when it comes to environment setup.
I started encountering issues with this package after performing a dependency update.
Namely, it complains that "cache" is not a property of undefined.
The code in question lives inside babel.config.js - it appears that "api" is undefined at this stage.

I am able to run everything if I remove the line
api.cache(true);
from the babel.config.js file.

I am using React Native 0.59.5 with yarn 1.17.3. If there are other pertinent packages that you'd like versions for, please let me know.

Thanks in advance!

withMappedNavigationAndConfigProps really is a mouthful. Ideas welcome.

I have a connected component I'd like to wrap, I am not sure if I'm doing it the right way, though:

export default compose(
    withMappedNavigationParams(),
    connect(mapStateToProps, mapDispatcthToProps),
)(CharacterProfile)

I'm trying to use this so I can get props in my navigationProps config, but I'm not seeing the values I'm trying to pass. Am I doing this incorrectly?

Thanks in advanced!

Hey @vonovak - we're really loving this lib for our project at https://github.com/withspectrum/spectrum.

Today I was upgrading some deps and found that upgrading from 0.1.3 to 0.2.0 breaks our app. Here's an example of how we're using this with a stack:

import Thread from '../Thread';
import { withMappedNavigationProps } from 'react-navigation-props-mapper';
import type { NavigationScreenConfigProps } from 'react-navigation';

const BaseStack = {
  Thread: {
    screen: withMappedNavigationProps(Thread),
    navigationOptions: ({ navigation }: NavigationScreenConfigProps) => ({
      headerTitle: navigation.state.params.title || 'Thread',
      tabBarVisible: false,
    }),
  }
};

export default BaseStack;

When I upgrade to 0.2.0 I get this error when navigating to a Thread:

If I change the stack to:

Thread: {
    screen: Thread,
    navigationOptions: ({ navigation }: NavigationScreenConfigProps) => ({
      headerTitle: navigation.state.params.title || 'Thread',
      tabBarVisible: false,
    }),
  }

the view loads, but without the mapped props.

Here are the rest of our deps if it helps:

"dependencies": {
    "expo": "^26.0.0",
    "metro-bundler": "^0.22.1",
    "react": "16.3.0-alpha.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-26.0.0.tar.gz",
    "react-navigation": "^2.0.2",
    "react-navigation-props-mapper": "^0.2.0",
  },
  "devDependencies": {
    "cross-env": "^5.1.1",
    "detox": "^6.0.0",
    "detox-expo-helpers": "^0.2.0",
    "exp": "^52.0.0",
    "jest": "^22.0.3",
    "jest-expo": "^26.0.0",
    "react-test-renderer": "^16.2.0"
  },

In the meantime I'm happy to sit tight on 0.1.3, just wanted to give you a heads up :)

withMappedNavigationAndConfigProps(ChatScreen, AdditionalPropsInjecter) should be withMappedNavigationAndConfigProps(ChatScreen)(AdditionalPropsInjecter) so that it can be nicely used with decorators directly on the component

currently, the package has dev dependency on

    "@react-navigation/bottom-tabs": "^6.0.9",
    "@react-navigation/core": "^6.1.0",
    "@react-navigation/drawer": "^6.1.8",
    "@react-navigation/native-stack": "^6.2.4",
    "@react-navigation/stack": "^6.0.11",

so if installed in an app that only has eg. @react-navigation/stack, browsing its code will give TS errors. Type safety seems to be unaffected though

When using withMappedNavigationParams()inside a nested navigator in React Navigation V5, the wrapped component rerenders every time a navigation event happens in the stack.

Repro:
https://github.com/aarongrider/mappedParamsExampleV5

Example:

const Stack = createStackNavigator();

const StackNavigator = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Screen1"
        initialParams={{testParam: 'This is a test!'}}
        component={withMappedNavigationParams()(Screen1)}
      />
      <Stack.Screen name="Screen2" component={Screen2} />
    </Stack.Navigator>
  );
};

const RootStack = createStackNavigator();

const RootStackNavigator = () => {
  return (
    <RootStack.Navigator>
      <RootStack.Screen name="Root" component={StackNavigator} />
    </RootStack.Navigator>
  );
};

export default function App() {
  return (
    <NavigationContainer>
      <RootStackNavigator />
    </NavigationContainer>
  );
}

Hey

why this is not devDependency?

yarn add react-navigation-props-mapper

I got this error when I used this plugin as in the example.

@withMappedNavigationProps()
export default class LoadingScreen extends Component {

Using the export keyword between a decorator and a class is not allowed. Please use `export @dec class` instead

Then I modified the format of the code

@withMappedNavigationProps()
@decorator class LoadingScreen extends Component {
    ...
}
export default LoadingScreen

But I got another error that I can't solve.

bundling failed: TypeError: Property right of AssignmentExpression expected node to be of a type ["Expression"] but instead got null

please help me :(

On components decorated with withMappedNavigationParams(), static members such as e.g. static navigationOptions do not work.

This should be relatively easy to implement using https://github.com/mridgway/hoist-non-react-statics .

I install this library and code as the following:

import { withMappedNavigationProps } from 'react-navigation-props-mapper'

@withMappedNavigationProps()
export class SomeScreen extends Component {

But I got an error:

Hey!
I faced with an issue Cannot read property 'params' of undefined. Looks like something inside this library.

Do you have an idea what might be wrong?
removed modules, reinstalled 4 times react-navigation-props-mapper v2.

Migrated from react-navigation 3.

now -
react-navigation-props-mapper v2 and react-navigation 5.5.1

Thanks for help!