React-Native – Citibikes app

Navigation in React-Native (Tab and Stack base Navigation)

Objectives

We have seen navigation in React Native via the navigation stack, namely createStackNavigator. For a review on how it works see createStackNavigator.

Today we will be building upon this knowledge to create a Tab based navigation hierarchy.

createBottomTabNavigator
A simple tab bar on the bottom of the screen that lets you switch between different routes. Routes are lazily initialized — their screen components are not mounted until they are first focused.

CitiBikeAPI.js

The CitiBikeAPI has two functions one fetches the bike station infomation from Citibike API. In the for..in statement we construct a station object which will hold a coordinate object needed by the MapView’s Marker component and the bike station object.

The bikeStationStatus fetches the real time bike status information from Citibike API.

App.js

In App.js the RootStack is setting up a Tab Bar Style Architecture. The List route holds a ListStack object which itself is a Navigation Stack. There are two tab routes: the List tab bar and the Map tab bar.

Imports being used here are createStackNavigator and createBottomTabNavigator from the third party library, react-navigation. For the tab bar icons we use Ionicons from the react-native-vector-icons library. We import our own custom function from the CitiBikeAPI.js, namely the bikeStationInformation and bikeStationStatus functions. The are three routes (screens) in our app.

BikeStationsListScreen: the first tab bar which consist of a FlatList of station items

BikeStationsMapScreen: the second tab bar which is a MapView with station annotations

StationDetailsScreen: shows a MapView with a Marker of the selected station

Completed Screenshots

By far the most attractive part of react-native is being cross-platform. Evident below with screenshots of our citi-bike-app running on both iOS and Android with an identical codebase of Javacript and react-native.