In this post I intend to share some reusable helper functions I use with RNN-v2, and hope to also demonstrate how flow types help to improve the developer experience when calling these functions in other React native component files.

React Native Navigation provides us some great native navigational components within our React Native app but can be a bit verbose when navigating to and from screens.

Take for instance this simple example from their docs page:

Navigation.push(this.props.componentId, {
  component: {
    name: ‘example.PushedScreen’,
    passProps: {
      text: ‘Pushed screen’
    },
    options: {
      topBar: {
        title: {
          text: ‘Pushed screen title’
        }
      }
    }
  }
});

Seeing that a lot of this code for presenting modals, pushing to components, etc. would be repeated, I extracted a few of these functions into reusable helper functions, within a separate file I entitled NavigationHelpers.js. I've extracted the two most reused function into a github gist, visible here.

My initial implementation of the showModal() function signature without flow typing was written as:

 static showModal = (    
    modalName,
    modalTitleText,
  ) => {
  //function body... 
  };

which was easy enough to understand when calling that both arguments expected string values.

After adding a third argument of props, then later making it have a default value of an empty object, {}, I began to get fuzzy once in a while on how exactly to call this function.

wat-giphy

This is where flow type annotations helped me, in conjunction with the flow-ide/flow language support VSCode extensions.

My prior experience in languages such as Scala and Swift makes me no stranger to argument types and the benefits they provide. Eventually, I would like to use TypeScript in my React Native projects. Without initializing the project with TypeScript, migrating a large codebase from pure ES6 into TypeScript is a rather gargantuan task to undertake. Flow, on the other hand, is already setup from the start when you initialize a RN project with create-react-native-app.

Flow types go one step beyond standard prop types by allowing us to add types to our function arguments as well as return values and other elements throughout our code base. In order to use flow types, we just have to annotate the function or class with a flow comment as I have done in this NavigationHelpers.js file. The showModal() function signature is now:


// @flow
static showModal = (
    modalName: string,
    modalTitleText: string,
    props?: Object = {}
  ) => {
//...
//function body
//...
}

This helps when calling this function since VSCode can show us exactly what types to provide the arguments when calling this function as we write more code in our app, such as:

vscode-flow

Note:
props?: Object = {} reads as: “the argument
props takes an optional Object, and when not provided will default to an empty Object {}”

I hope to use flow type annotations more in the future in order to make the code a bit easier to read and reuse in the future, and as a result hopefully more maintainable as well.