React Navigation integration for NativeScript
npm install react-nativescript-navigationreact-nativescript-navigationReact NativeScript Navigation is the official navigation library for React NativeScript.
For implementing the native stack view, we re-implement the same APIs that react-native-screens implement for React Native, but for NativeScript (and have thus renamed it react-nativescript-screens to reduce bewilderment).
For implementing the native tabs, I've simply followed the React Navigation docs; no Screens library was needed.
This is a provisional implementation; aspects beyond the core functionality of a stack that pushes and pops screens (such as the customisation of its appearance) may not be fully working yet.
``sh`
npm install --save react-nativescript-navigation @react-navigation/native
You do not need to install any of react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view as mentioned in the "Getting Started" section of React Navigation. Those are only for React Native projects. react-nativescript-navigation brings all the dependencies it needs.
* React Navigation: https://reactnavigation.org/docs/getting-started
* React NativeScript: https://react-nativescript.netlify.com/
* Navigation in React NativeScript: https://react-nativescript.netlify.app/docs/core-concepts/navigation
For the full list of configurable options, see the typings:
* for tabNavigator
* for StackNavigator
`tsx
import * as React from "react";
import { BaseNavigationContainer } from '@react-navigation/core';
import { stackNavigatorFactory, tabNavigatorFactory } from "react-nativescript-navigation";
const TabNavigator = tabNavigatorFactory();
const StackNavigator = stackNavigatorFactory();
/ Tabs Navigator. /
const TabsAppContainer = () => (
);
/ Stack Navigator. /
const StackAppContainer = () => (
screenOptions={{
headerShown: true,
}}
>
);
function First({ navigation }){
function onButtonTap(){
navigation.navigate('second');
}
return (
flexGrow: 1,
width: "100%",
height: "100%",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
backgroundColor: "yellow",
}}
>
);
}
function Second({ navigation }){
function onButtonTap(){
navigation.goBack();
}
return (
flexGrow: 1,
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
backgroundColor: "gold",
}}
>
);
}
// export default TabsAppContainer;
export default StackAppContainer;
``
React NativeScript Navigation's TabNavigator and StackNavigator have fewer configurable options than React Navigation's ones – this is because the React NativeScript Navigation navigators are fully native, and so are ultimately limited by the styling options that are possible natively (and the way that NativeScript Core wraps them).
This library is also a work in progress and I simply don't have time to implement everything all on my own. If you need more configurability, please consider making a Pull Request.
To see the full list of configurable options, see the typings:
* for tabNavigator
* for StackNavigator
Disclaimer: the library is young, so there is a very good chance that I've incorrectly implemented some of the configuration options listed in the typings. For the happy path, I recommend starting out simple and being flexible in your design if the navigators just don't appear to be able to support it.