reason-react-native-navigation

This is a simple react native navigation written in reason. It has been created with an eye to fully utilize Reason type-system. Currently, only stack-navigation (standard slide from left for iOS and slide from button from Android) is implemented. Main problem that we are trying to solve with this is passing props to child components in a straightforward and type-safe way.

How does it look like?

The example app is avaialble at https://github.com/szymonzmyslony/reason-react-native-navigation-exampleApp

This is how this example app looks like:

As you can see the count update (state of the root component) doesn't get rerendered when you click increment or decrement on the second screen. This is the first issue that I will be working on solving.

How to use it (when you want to have a full control over your navigation state)?

StackNavigator is a functor that expects one type for your navigationState variant:

module type Impl = {
  type navigationState;
};

module type Impl  = sig type navigationState end

This is how you create a functor:

module StackNavigator =
  StackNavigator.Make {
    type navigationState = screen;
  };

module StackNavigator =
  StackNavigator.Make(struct type navigationState = screen end)

For example, in my simple app, I had:

type screen =
  | Login
  | MainScreen
  | Player int string;

3536: syntax error, consider adding a `;' before

StackNavigator requires navigation state to be managed by parent component. Thus, we need to pass navigation state, pop, and push methods, and two render functions (header and screen). This is how root render in my app looks like:

 render: fun {state, update, handle} =>
    ReasonReact.element @@
    StackNavigator.make
      navigationState::state.navigationState
      goBack::(update pop)
      getHeaderConfig::headerTitle
      render::(
        renderScreen
          ::handle
          pop::(update pop)
          push::(update push)
          updateProjects::(update updateProjects)
          projects::state.projects
      )

1685: fun is a reserved keyword, it cannot be used as an identifier. Try `fun_' instead

renderScreen and render can take any arguments needed from the root of the app and pass it down to other screens:

let renderScreen
    pop::(pop: 'a => unit)
    push::(push: screen => unit)
    ::projects
    ::handle
    ::updateProjects
    screen =>
  switch screen {
  | Login => ReasonReact.element @@ LoginScreen.make ()
  | Player index _id => DetailViewProject.render project::(List.nth projects index)
  | MainScreen =>
    ReasonReact.element @@ MainScreenContainer.make ::push ::updateProjects ::projects
  };

let headerTitle screen =>
  switch screen {
  | MainScreen => "Shows"
  | _ => "test"
  };

1525: <UNKNOWN SYNTAX ERROR>

New StatefullStackNavigator module avoid boilerplate for push and pop actions. The example app (https://github.com/szymonzmyslony/reason-react-native-navigation-exampleApp) is showing how to use it.