Simple, performant & type-safe cross platform navigation in React Native / React Native Web

Overview


react-native-ridge-navigation ( ⚠️ in beta)

Simple and performant cross platform navigation on iOS, Android and the web with simple and type-safe api for React 18 (alpha)

⚠️ This is beta software, things can break.

Things which are not finished yet:

  • useFocus (like useEffect but for when screen is focused)
  • documentation
  • create universal lazyWithPreload for screens (only on web, but callstack/repack can fix it native too)
  • universal modal (web support too)

Features

  • Superior performance (we use wix/react-native-navigation)
  • Simple api
  • Type safety
  • Type safe routes
  • Type safe params (based on url)
  • Android, iOS & web!
  • Preload data on mouseDown (or more sensitive on hover, see example)
  • Preload component on hover (on web)
  • Automatic deep-linking
  • Lazy load components
  • Real-time light/dark mode

Example

Demo of react-native-ridge-navigation

View video in better frame on YouTube

About us

We want developers to be able to build software faster using modern tools like GraphQL, Golang and React Native.

Give us a follow on Twitter: RichardLindhout, web_ridge

Donate

Please contribute or donate so we can spend more time on this library

Donate with PayPal

Demo

See example: reactnativeridgenavigation.com

Source

See source of example app

Register screens

You can register screens with a preload function, the params will be automatically in string format based on the url.

// NavigatorRoutes.ts
const PostScreen = registerScreen(
  '/post/:id',
  PostScreenLazy,
  ({ id }) => {
    queryClient.prefetchQuery(
      queryKeyPostScreen({ id }),
      queryKeyPostScreenPromise({ id })
    );

    // if you return something here it can be used in the screen itself or somewhere else with
    // usePreloadResult(routes.PostScreen)
    // in this case react-query handles it based on queryKey so it's not needed but with Relay.dev it is. 
    // you can put the result of the usePreloadResult in your usePreloadedQuery if you use Relay.dev

  }
);

const routes = {
  PostScreen,
  // ...
}
export default routes

Supported stacks

  • normal
  • bottomTabs
  • sideMenu (in progress)

Installation

1. If you don't have an app yet (optional, but recommended)

Create the app with our tool web-ridge/create-react-native-web-application

npx create-react-native-web-application --name myappname

1. Install deps + library

yarn add react-native-navigation react-native-navigation-hooks react-native-ridge-navigation history && npx rnn-link && npx pod-install

or with npm

npm install react-native-navigation react-native-navigation-hooks react-native-ridge-navigation history && npx rnn-link && npx pod-install

2. Extra (optional)

Add react-native-web-image-loader (see example), this will make sure the images in the BottomBar will be in good quality on the web.

const {
  addWebpackModuleRule,
} = require('customize-cra');

// ...
  addWebpackModuleRule({
    test: /\.(png|jpe?g|gif)$/,
    options: {
      name: 'static/media/[name].[hash:8].[ext]',
      scalings: { '@3x': 1 },
    },
    loader: 'react-native-web-image-loader',
  })
// ...

Usage

import {
  createNormalRoot,
  createNavigation,
  createBottomTabsRoot,
  createScreens,
  defaultTheme,
} from 'react-native-ridge-navigation';

export const NavigationRoots = {
  RootHome: 'home',
  RootAuth: 'auth',
};

// svg to png
// https://webkul.github.io/myscale/
//
// tab icon
// http://nsimage.brosteins.com/Home
export const BottomRoots = {
  Posts: {
    path: '/post',
    title: () => 'Posts',
    icon: require('./img/palette-swatch-outline/icon-20.png'),
    selectedIcon: require('./img/palette-swatch/icon-20.png'),
    child: routes.PostsScreen,
  },
  Account: {
    path: '/account',
    title: () => 'Account',
    icon: require('./img/account-circle-outline/icon-20.png'),
    selectedIcon: require('./img/account-circle/icon-20.png'),
    child: routes.AccountScreen,
  },
};

const Navigator = createNavigation(
  defaultTheme,
  createScreens(routes),
  {
    [NavigationRoots.RootHome]: createBottomTabsRoot(
      [BottomRoots.Posts, BottomRoots.Account],
      // optional settings
      // {
      //   breakingPointWidth: 500, // default is 1200
      //   components: {
      //      start: BottomTabStart,
      //      end: BottomTabEnd,
      //   },
      // }
    ),
    [NavigationRoots.RootAuth]: createNormalRoot(routes.AuthScreen),
    // You can add endless more roots for your app e.g. for different roles of users
    // ...
  },
  AppHOC
);

export default Navigator;

New screen

Use the component as much as possible since it will work with ctrl+click on the web :)

{(linkProps) => ( // or other touchables/buttons go to post )} ">
<Link
  to={routes.PostScreen}
  params={{ id: `${item.id}` }}
  // mode="default" // optional if sensitive the preload will be called on hover instead of mouseDown
>
  {(linkProps) => (
    <Pressable  {...linkProps}> // or other touchables/buttons
      <Text>go to post</Text>
    </Pressable>
  )}
</Link>

Alternative push (or replace)

const { push, replace } = useNavigation();

// call this where if you can't use 
push(routes.PostScreen, {
  id: `${item.id}`
});

// call this if e.g. after a create you want to go to edit screen
// but without pushing history to the url-stack or app-stack :)
replace(routes.PostScreen, {
  id: `${item.id}`
});

Switch root

Switch root can be used to switch from e.g. the auth screen to a different entrypoint of your app. E.g. check the role and switch the stacks to different roots for different user roles.

<SwitchRoot rootKey={NavigationRoots.RootHome} params={{}} />;
// or e.g.
<SwitchRoot rootKey={NavigationRoots.RootAuth} params={{}} />;

useNavigation

All available properties

const {
  refreshBottomTabs, // e.g. after language change and you want to update labels
  updateBadge, // updateBadge(BottomRoots.Projects, '10');
  pop, // go back
  switchBottomTabIndex, // switch bottom tab
  switchRoot,
  preload, // call preload (done automatic on link mouseDown
  push, // calls preload + pushes screen
  replace, // calls preload + pushes screen
} = useNavigation()

Deep linking

You have to enable url schemes etc in your app and it'll work!

More

// global
  DeepLinking // see deep linking documentation
  OnlyRenderOnce // see deep linking documentation
  SwitchRoot
  Link
  BackLink // for now .pop() but we'll update this according to Android guidelines later on (to always go back in hierarchy)
  lazyWithPreload // only available on the web: see example app
  Redirect
  NavigationRoot,
  createNavigation,
  refreshBottomTabs,
  updateBadge,
  createBottomTabsRoot,
  createNormalRoot,
  createSideMenuRoot,
  registerScreen,
  createScreens,
  defaultTheme,
  setTheme,
  getTheme,
  createSimpleTheme,
  setPreloadResult, // should not need this as it is done automatically

  // hooks
  useTheme,
  useParams,
  useNavigation,
  useFocus
  usePreloadResult // e.g. usePreloadResult(routes.PostScreen)

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Releases(v0.7.18)
Owner
webRidge
We make modern software solutions and we provide our base blocks to the open-source community.
webRidge
SVG library for React Native, React Native Web, and plain React web projects.

react-native-svg react-native-svg provides SVG support to React Native on iOS and Android, and a compatibility layer for the web. Check out the demo F

null 5.6k Sep 22, 2021
Pixel–perfect, native–looking typographic styles for React Native ✒️

Pixel–perfect, native–looking typographic styles for React Native. Why Creating great Text Styles in React Native is not a simple task, it requires a

Hector Garcia 3.3k Sep 24, 2021
Smooth and fast cross platform Material Design date and time picker for React Native Paper

Smooth and fast cross platform Material Design date and time picker for React Native Paper

webRidge 288 Sep 18, 2021
A performant customizable bottom sheet component made on top of wix react-native-navigation library.

?? React Native Navigation Bottom Sheet Extension A performant customizable bottom sheet component made on top of wix react-native-navigation library.

CursedWizard 16 Sep 17, 2021
Handy toolbelt to deal nicely with offline/online connectivity in a React Native app. Smooth redux integration ✈️

react-native-offline Handful of utilities you should keep in your toolbelt to handle offline/online connectivity in React Native. It supports iOS, And

Raúl Gómez Acuña 2k Sep 20, 2021
Cross Platform Material Alert and Prompt Dialogs for React Native. Imperative API, Android, IOS, Web

React Native Paper Alerts Cross Platform Material Alert and Prompt for React Native. It tries to follow the API and function signature of React Native

Arafat Zahan 5 Aug 5, 2021
React Native wrappers for https://github.com/afollestad/material-dialogs

react-native-dialogs An Android only module for Material Design dialogs. This is a wrapper over afollestad/material-dialogs. This module is designed f

null 587 Sep 6, 2021
Flexible and lightweight React Native component for UITableView made with pure CSS

react-native-tableview-simple ?? This component is used in my production app Game ideas. Make sure to check it out! ?? This cross-platform component i

Patrick Puritscher 402 Sep 22, 2021
💬 The most complete chat UI for React Native

?? Gifted Chat The most complete chat UI for React Native & Web Demo Web ?? Snack GiftedChat playground Sponsor Coding Bootcamp in Paris co-founded by

Farid Safi 11.1k Sep 20, 2021
A routing library for React Native that strives for sensible API parity with react-router 🤖

React Router Native A routing library for React Native that strives for sensible API parity with react-router. Please note that React Router v4 was ju

Jake Murzy 635 Jun 24, 2021
📈 One library to rule all charts for React Native 📊

react-native-svg-charts Welcome to react-native-svg-charts! react-native-svg-charts provides SVG Charts support to React Native on iOS and Android, an

Jesper Lekland 2k Sep 21, 2021
⚛ Cross-platform React Native dialogs based on the Modal component

React Native Simple Dialogs ⚛ Cross-platform React Native dialogs based on the Modal component. Features Custom Dialog Confirm Dialog Progress Dialog

Douglas Nassif Roma Junior 233 Sep 1, 2021
React-Native image filters using gl-react

react-native-gl-image-filters OpenGL bindings for React Native to implement complex effects over images and components, in the descriptive VDOM paradi

Gregory Galushka 139 Sep 10, 2021
A community maintained router component for React Native

React Native Simple Router Awesome navigation for your React Native app. Install Make sure that you are in your React Native project directory and run

React Native Simple Router Community 266 Jun 29, 2021
The best large list component for React Native.

react-native-largelist React-native-largelist is a very high performance large list component for React-Native. (iOS & Android) Now V3 is available. V

石破天惊 2.1k Sep 22, 2021
Customizable Icons for React Native with support for image source and full styling.

Perfect for buttons, logos and nav/tab bars. Easy to extend, style and integrate into your project. Table of Contents Bundled Icon Sets Installation i

Joel Arvidsson 15.2k Sep 22, 2021
Lottie wrapper for React Native.

Lottie for React Native, iOS, and Android Lottie component for React Native (iOS and Android) Lottie is a mobile library for Android and iOS that pars

Lottie - React Native 14.5k Sep 22, 2021
Animated Pagination For React Native's ListView, FlatList, and SectionList

The best Pagination component for React Native. React Native Pagination Roadmap see: ROADMAP.md Horizontal To try these out yourself its prudy easy, J

garrettmac 317 Sep 16, 2021