https://github.com/cca-io/bs-react-navigation

Reason bindings for react-navigation
https://github.com/cca-io/bs-react-navigation

bucklescript react react-navigation reason reasonml

Last synced: 3 months ago
JSON representation

Reason bindings for react-navigation

• Host: GitHub
• URL: https://github.com/cca-io/bs-react-navigation
• Owner: cca-io
• License: mit
• Archived: true
• Created: 2018-10-16T08:01:12.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2021-05-16T12:38:56.000Z (over 3 years ago)
• Last Synced: 2024-05-12T00:31:44.122Z (6 months ago)
• Topics: bucklescript, react, react-navigation, reason, reasonml
• Language: Reason
• Size: 16.6 KB
• Stars: 14
• Watchers: 6
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-list - bs-react-navigation - navigation | cca-io | 15 | (Reason)

README

        
# bs-react-navigation

[Reason](https://reasonml.github.io) bindings to [react-navigation](https://github.com/react-navigation/react-navigation).

## Status

Superseded by https://github.com/rescript-react-native/rescript-react-navigation.

## Example

Instantiate a navigation module with your `screenProps` type (Navigation.re):

```reason

include ReactNavigation.Make({

  type screenProps = {

    .

    "someProp": int,

  };

});

```

A screen component with dynamic navigation options (Screen1.re):

```reason

open ReactNative;

open Navigation;

[@react.component]

let make = (~navigation, ~screenProps) => {

   {React.string("Hello world!")} ,

};

make->setDynamicNavigationOptions(params => {

  let navigation = params##navigation;

  let navigationOptions = params##navigationOptions;

  let screenProps = params##screenProps;

  /* More properties can be set dynamically based on navigation, navigationOptions or screenProps. */

  NavigationOptions.t(~title="Screen 1", ~headerTintColor="red", ());

});

```

A stack navigator containing this screen (MyStackNavigator.re):

```reason

open Navigation;

let routes = {

  "Screen1": Screen1.make,

  "Screen2": Screen2.make,

  "Screen3": Screen3.make,

};

let navigator = StackNavigator.make(routes);

navigator->setNavigationOptions(NavigationOptions.t(~gesturesEnabled=false, ()));

```

The main React component of the app (App.re):

```reason

open Navigation;

module AppContainer = (val makeAppContainer(MyStackNavigator.navigator));

[@react.component]

let make = () => {

  let screenProps = {"someProp": 42};

  ;

};

```