Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-navigation-props-mapper
Advanced tools
Readme
Forwards react-navigation
params to your screen component's props directly. Supports type-checking with TypeScript.
use version 3 of this package for
react-navigation
version 6 and neweruse version 2 of this package for
react-navigation
version 5use version 1 of this package for
react-navigation
version 4 and lower
yarn add react-navigation-props-mapper
or
npm i react-navigation-props-mapper
In react-navigation
there were different ways to access navigation params:
props.navigation.state.params
(from version 1)props.navigation.getParam(paramName, defaultValue)
(added in version 3)props.route.params
(the only way to read params in version 5 and later)Example with react-navigation v6:
function SomeComponent({ route }) {
const { params } = route;
return (
<View>
<Text>Chat with {params.user.userName}</Text>
</View>
);
}
This works well but if you don't want your code to be tightly coupled to react-navigation
(maybe because you're migrating from version 4 to 5) or if you simply want to work with navigation params the same way as with any other props, this package will help.
withForwardedNavigationParams
Use this function be able to access the navigation params passed to your screen directly from the props. Eg. instead of props.route.params.user.userName
you'd write props.user.userName
. The function wraps the provided component in a HOC and passes everything from props.route.params
to the wrapped component.
When defining the screens for your navigator, wrap the screen component with the provided function. For example:
import { withForwardedNavigationParams } from 'react-navigation-props-mapper';
function SomeScreen(props) {
// return something
}
export default withForwardedNavigationParams()(SomeScreen);
The package comes with full TS support, so you will get the same level of type checking as you would when using react-navigation
alone.
It exports several TS types that replace the ones exported from react-navigation
. Their name is prefixed by Forwarded
:
original type | replacement type |
---|---|
StackScreenProps | ForwardedStackScreenProps |
NativeStackScreenProps | ForwardedNativeStackScreenProps |
DrawerScreenProps | ForwardedDrawerScreenProps |
BottomTabScreenProps | ForwardedTabScreenProps |
ForwardedTabScreenProps
should work for all types of tab navigators.
For example:
type StackParamList = {
Profile: { userId: string };
};
type ForwardedProfileProps = ForwardedStackScreenProps<
StackParamList,
'Profile'
>;
const ProfileScreen = withForwardedNavigationParams<ForwardedProfileProps>()(
function ProfileScreenWithForwardedNavParams({ userId }) {
// userId is of type string
}
);
See the example app for full code.
This is an advanced use-case and you may not need this. Consider the deep linking guide from react-navigation.
You have a chat screen that expects a userId
parameter provided by deep linking:
config: {
path: 'chat/:userId';
}
you may need to use the userId
parameter to get the respective User
object and do some work with it. Wouldn't it be more convenient to directly get the User
object instead of just the id? withMappedNavigationParams
accepts an optional parameter, of type React.ComponentType
(a React component) that gets all the navigation props and the wrapped component as props. You may do some additional logic in this component and then render the wrapped component, for example:
import React, { useContext } from 'react';
import { withForwardedNavigationParams } from 'react-navigation-props-mapper';
function UserInjecter(props) {
const userStore = useContext(UserStoreContext);
// In this component you may do eg. a network fetch to get data needed by the screen component.
const { WrappedComponent, userId } = props;
const additionalProps = {};
if (userId) {
additionalProps.user = userStore.getUserById(userId);
}
return <WrappedComponent {...props} {...additionalProps} />;
}
export const ChatScreen = withForwardedNavigationParams(UserInjecter)(
({ user }) => {
// return something
}
);
That way, in your ChatScreen
component, you don't have to work with user id, but directly work with the user object.
The original component wrapped by withForwardedNavigationParams
is available as wrappedComponent
property of the created HOC. This can be useful for testing.
FAQs
forward navigation params as regular props
The npm package react-navigation-props-mapper receives a total of 1,462 weekly downloads. As such, react-navigation-props-mapper popularity was classified as popular.
We found that react-navigation-props-mapper demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.