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.
navigation
Advanced tools
Readme
Scene-Based Navigation for React and React Native
import { StateNavigator } from 'navigation';
const stateNavigator = new StateNavigator([
{ key: 'hello', route: '' },
{ key: 'world' }
]);
You create one State
for each scene (page) in your app. You don't need to define your routes yet. The Navigation router generates interim routes. You can define your real routes at any time without changing any code. With scene-based navigation, there aren't any hard-coded Urls for you to update.
<NavigationHandler stateNavigator={stateNavigator}>
<SceneView active="hello"><Hello /></SceneView>
<SceneView active="world"><World /></SceneView>
</NavigationHandler>
For each State
, you create a SceneView
component that renders the UI. All the other routers for React force you to think in terms of routes. But this is hard becasue routes can be nested, for example, a master/details page. Scenes, on the other hand, are always flat. The Navigation router still supports nested routes because a Scene can have more than one route.
import { NavigationLink } from 'navigation-react';
const Hello = () => (
<NavigationLink
stateKey="world"
navigationData={{ size: 20 }}>
Hello
</NavigationLink>
);
The NavigationLink
component changes scene. You pass the name of the scene and the data. The Navigation router builds the Url. If you've configured more than one route it uses the best match.
import { NavigationContext } from 'navigation-react';
const World = () => {
const { data } = useContext(NavigationContext);
return (
<div style={{ fontSize: data.size }}>
World
</div>
);
};
In the next scene, you access the data from the NavigationContext
. The Navigation router passes strongly-typed data. Here, the size is a number.
import { StateNavigator } from 'navigation';
const stateNavigator = new StateNavigator([
{ key: 'hello' },
{ key: 'world', trackCrumbTrail: true }
]);
You create one State
for each scene (screen) in your app. You can think of the stack of scenes as a trail of breadcrumbs. Each scene is one crumb. Like Hansel and Gretel in the fairy story, the Navigation router drops a crumb every time it visits a scene (if you set 'trackCrumbTrail' to true).
<NavigationHandler stateNavigator={stateNavigator}>
<NavigationStack>
<Scene stateKey="hello"><Hello /></Scene>
<Scene stateKey="world"><World /></Scene>
</NavigationStack>
</NavigationHandler>
For each State
, you create a Scene
component that renders the UI. The Navigation router provides React components to help you build your scenes. All of these components render to the same native primitives as other native apps. For example, the TabBar
component renders to a BottomNavigationView
on Android and a UITabBarController
on iOS.
import { NavigationContext } from 'navigation-react';
const Hello = () => {
const { stateNavigator } = useContext(NavigationContext);
return (
<Button title="Hello"
onPress={() => {
stateNavigator.navigate('world', { size: 20 });
}} />
);
};
You use the stateNavigator
from the NavigationContext
to change scenes. You pass the name of the scene and the data. The navigation is 100% native on Android and iOS.
import { NavigationContext } from 'navigation-react';
const World = () => {
const { data } = useContext(NavigationContext);
return (
<Text style={{ fontSize: data.size }}>
World
</Text>
);
};
In the next scene, you access the data from the NavigationContext
. You can return to the 'hello' scene via the Android back button or swiping/pressing back on iOS.
FAQs
The data-first JavaScript router
The npm package navigation receives a total of 329 weekly downloads. As such, navigation popularity was classified as not popular.
We found that navigation demonstrated a healthy version release cadence and project activity because the last version was released less than 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.