React Native Navigation helper functions with Flow Typing

Srihari Rao
Mar 31 · 3 min read

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 overall developer experience when calling these functions in other React native component files.

pc: livingstills

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 used functions 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.

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

My prior experience with languages such as Scala and Swift make me no stranger to typed arguments and the benefits they provide. Eventually, I would like to use TypeScript in my React Native projects. Without initializing the project in TypeScript, however, migrating a large codebase from pure ES6 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:

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, and as a result hopefully more maintainable as well.

Originally published at srihari.dasu.io on March 31, 2019.

Srihari Rao

Written by

I ❤ functional programming. I am a blockchain evangelist, musician and creative spirit. React Native Developer making iOS/Android apps