All Projects → callstackincubator → Bs React Navigation

callstackincubator / Bs React Navigation

Licence: mit
A fast, declarative navigation for React Native, based on React Navigation

Programming Languages

ocaml
1615 projects

Projects that are alternatives of or similar to Bs React Navigation

Duckduckgo
DuckDuckGo App built in React-Native (Unofficial)
Stars: ✭ 320 (+481.82%)
Mutual labels:  react-navigation
React Navigation Header Buttons
Easily render header buttons for react-navigation.
Stars: ✭ 545 (+890.91%)
Mutual labels:  react-navigation
Neteasecloudmusic
React Native 模仿网易云音乐手机客户端,兼容安卓和IOS两个平台。
Stars: ✭ 793 (+1341.82%)
Mutual labels:  react-navigation
React Native Messenger
Facebook Messenger Implementation using react-native
Stars: ✭ 351 (+538.18%)
Mutual labels:  react-navigation
Chatty
A WhatsApp clone with React Native and Apollo (Tutorial)
Stars: ✭ 481 (+774.55%)
Mutual labels:  react-navigation
Ignite Bowser
Bowser is now re-integrated into Ignite CLI! Head to https://github.com/infinitered/ignite to check it out.
Stars: ✭ 586 (+965.45%)
Mutual labels:  react-navigation
Expo Spotify
Spotify UI Clone with React Native & Expo || web support => https://expo-spotify.vercel.app
Stars: ✭ 287 (+421.82%)
Mutual labels:  react-navigation
React Native Workshop
Prototyping Airbnb with React Native
Stars: ✭ 21 (-61.82%)
Mutual labels:  react-navigation
Mozi
此项目致力于构建一套最基础,最精简,可维护的react-native项目,支持ios,android 🌹
Stars: ✭ 501 (+810.91%)
Mutual labels:  react-navigation
Expo Crossy Road
🐥🚙 Crossy Road game clone made in Expo (iOS, Android, web), THREE.js, Tween, React Native. 🐔
Stars: ✭ 701 (+1174.55%)
Mutual labels:  react-navigation
React Native Boilerplate
🚀 Type Based Architecture for developing React Native Apps using react, redux, sagas and hooks with auth flow
Stars: ✭ 375 (+581.82%)
Mutual labels:  react-navigation
React Native Template Rocketseat Basic
Template básica para aplicações React Native com a estrutura utilizada na Rocketseat 🚀
Stars: ✭ 431 (+683.64%)
Mutual labels:  react-navigation
React Native Dva Starter
a React Native starter powered by dva and react-navigation
Stars: ✭ 637 (+1058.18%)
Mutual labels:  react-navigation
Reading
iReading App Write In React-Native
Stars: ✭ 3,435 (+6145.45%)
Mutual labels:  react-navigation
React Native Animated Tabbar
A 60FPS animated tab bar with a variety of cool animation presets 😎
Stars: ✭ 890 (+1518.18%)
Mutual labels:  react-navigation
Expo Netflix
Netflix UI Clone with React Native & Expo || web support => https://expo-netflix.vercel.app
Stars: ✭ 297 (+440%)
Mutual labels:  react-navigation
Surmon.me.native
📱 My blog app, powered by react-native
Stars: ✭ 579 (+952.73%)
Mutual labels:  react-navigation
React Native Redux Navigation
A demo use react-navigation and redux。[Thx for your star !!!]
Stars: ✭ 40 (-27.27%)
Mutual labels:  react-navigation
React Native Boilerplate
🚀 React Native Boilerplate Updated
Stars: ✭ 9 (-83.64%)
Mutual labels:  react-navigation
React Navigation Shared Element
React Navigation bindings for react-native-shared-element 💫
Stars: ✭ 694 (+1161.82%)
Mutual labels:  react-navigation

bs-react-navigation

Build Status Version MIT License PRs Welcome

A fast, declarative navigation for React Native, based on React Navigation

Status

Currently we are not supporting the nested navigators.

Supported navigators:

Installation

Open a Terminal in your project's folder and run,

yarn add bs-react-navigation

After installation, you will need to install react-navigation and its peer dependencies. Please follow official installation instructions here.

Examples

  • example built-in library - check /example

API

For all navigator you need follow some steps:

Config

First of all, create a config file like Config.re and there define your all routes. It sould be a simple Variant Type with your routes/tabs/items

type route =
  | Home
  | UserDetails;

It is important to create a separate file in order to avoid circular dependencies when you try to import navigation dependencies.

Navigation prop for compoenents

For our components we need to create navigationProp type, which is created from a list of our routes defined in Config.re.

type navigationProp = StackNavigator.navigation(route);

Each Navigator provides their own navitationProp type.

Example:

let make = (~navigation: Config.navigationProp, _children) => {
  ...component,
  render: _self =>
    <View>
      <Button
        title="Go to home screen"
        onPress={() => navigation.push(Home)}
      />
      <Button
        title="Go back"
        onPress={() => navigation.goBack()}
      />
    </View>,
};

StackNavigator

Configuration

Use a functor Create from StackNavigator module and pass a configuration module which needs to include a few pieces:

  • route - list of your routes, use variant from your Config.re
  • initialRoute - the first screen of your navigation state
  • getScreen - it's a function which as a parameters get the currentRoute and navigation props. As a return, you should create a tuple where the first element is a screen component and the second is screen configuration.

Route Params

If your route has a parameter you should pass them to you component inside getScreen function.

exmaple:


let getScreen = (currentRoute, navigation) =>
  switch (currentRoute) {
  | Home => (<Screen navigation />, screenOptions(~title="Home", ()))
  | UserDetails(userId) => (
      <Screen navigation text={"Browsing profile of: " ++ userId} />,
      screenOptions(~title="Hello " ++ userId, ()),
    )
  };

SwitchNavigator

The API for creating navigator is almost the same as in Stack Navigator:

module Switch =
  SwitchNavigator.Create({
    open SwitchNavigator;

    type route = Config.route;

    let initialRoute = Login;

    let getScreen = (currentRoute, navigation) =>
      switch (currentRoute) {
      | Login => (<Login navigation />, screenOptions())
      | LoggedIn => (<LoggedIn navigation />, screenOptions())
      };
  });

TabNavigator

Tab needs one additional setting compared to the Switch or Stack Navigator.

let order: list(tabs);

Full example:

module Tabs =
  TabNavigator.Create({
    open TabNavigator;

    type tabs = Config.tabs;

    let options = options(~activeTintColor="#847", ());

    let order = [Info, Profile, Settings];

    let getTab = tab => {
      switch (tab) {
      | Info => (<Tabs.Info navigation/>, screenOptions(~title="Info"))
      | Profile => (<Tabs.Profile navigation/>, screenOptions(~title="Profile"))
      | Settings => (<Tabs.Settings navigation/>, screenOptions(~title="Settings"))
      };
    };
  });

DrawerNavigator

Drawer needs one additional setting compared to the Switch or Stack Navigator.

let items: list(item);

Full example:

module Drawer =
  DrawerNavigation.Create({
    open DrawerNavigation;
    type item = Config.item;

    let items = [Dashbord, Settings];

    let options = options(~width=150, ());

    let order = [Dashbord, Settings];

    let getItem = currentItem =>
      switch (currentItem) {
      | Dashbord => (<Items.Dashboard />, screenOptions(~title="Info")
      | Settings => (<Items.Settings />, screenOptions(~title="Settings")
      };
  });

Prior art

This library is a continuation of our efforts to provide a first-class navigation for bs-react-native applications.

If you are coming from rebolt-navigation or reroute-native (our previous attempts at solving this problem), please open an issue and let us know. We will help you find the best migration path to adopt this library.

Developing example app

Inside the root folder, run BS build script:

yarn start

next, go to the example app and start the watch script for building the ReasonML code:

yarn watch

The last step is to start the Expo packager inside your example app

yarn start

License

See Reason license in LICENSE.txt.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].