by topherPedersen

Aha! How to build slick user interfaces in React Native! Or… What is the Bootstrap equivalent for React Native?

This blog post is brought to you by the developer of BitBudget. BitBudget is an automated budgeting app for Android and iOS which syncs with your bank account and helps you avoid overspending. If you’d like to quit living paycheck-to-paycheck and get a better handle on your finances, download it today! https://bitbudget.io

Welcome budding React Native developer. If you’re like me and come from a web development background, and are fumbling around trying to figure out how to build slick stylized user interfaces in React Native, you’ve come to the right place!

For the past two days I was stuck trying to figure out how to simply drop in some style into my React Native app like you can easily do with Bootstrap in the web development world. While I was able to find half a dozen or so libraries for adding style to <Text>, <Button>, and <Input> components, I couldn’t really find any full featured UIKits that included things like TabBars/BottomNavigationBars, and make easy slick sliding navigation between screens.

Well you’ve waited long enough, here is what I’ve discovered. What you really need are two (or three) libraries. First, you need the “React Navigation” to handle navigation:

$ npm install react-navigation

Second, you need react-navigation-material-bottom-tabs for adding in your slick sliding/swipable TabBar/BottomNavigationBar:

$ npm install react-navigation-material-bottom-tabs

Last, go ahead and play around with any of the available component libraries for React Native. There are a whole bunch to choose from for adding simple styles to your components. The scarce resource is React-Navigation + React-Navigation-Material-Bottom-Tabs. That’s where the real UI magic comes in! So far I haven’t found any alternatives that allow you to swipe between screens and integrate with the tab bar. So I hope my research helps!

Also, I wasn’t able to find this in any of the React Native books that I looked at, or on the React Native website for that matter. So big shout out to Unsure Programmer on YouTube for his excellent tutorial on implementing swipeable bottom tab navigation in React Native!

(UPDATE: 11/14/2019 => Apparently swipe-able bottom tabs aren’t really a “thing” in iOS or Android development. So the example in the video below uses a top bar which is swipe-able, and is then moved to the bottom position by setting ‘position’ to ‘bottom’. For my own personal React Native projects I plan on ditching the swipe-able tabs design I first envisioned so I can avoid having to use this hacked together work around. For example, if you choose to use this workaround you won’t be able to add a top bar since you already have a top bar that you’ve moved to the bottom, and the bottom bar cannot be moved to the top. So… I’ve gone ahead and left the video here on this post for reference in case anyone really needs this. But I personally plan on sticking with standard iOS and Android navigation, and will make use of swipe-able components where the iOS and Android frameworks offer this feature.)

And here are the Top 5 component styling libraries rated by stars on GitHub:

  1. UI Kitten
  2. Paper
  3. React Native Material Kit
  4. React Native Material UI
  5. Nachos UI

UPDATE 11/15/2019: With a little help from a gentleman on the react-navigation github forum, I was able to figure out how to add a swipeable (swipe enabled) bottom tab bar with a static top title bar in React Native with React Navigation. How this is accomplished is you have to create a MaterialTopTabNavigator and set its position to bottom as described above. And how we are able to also include a static top title bar, is we embed the MaterialTopTabNavigator in a standard StackNavigator which comes with the static top title bar that we want. And voila! A bit overly complicated, but that’s how you do it!

// REFERENCE (TabNavigator with Top Header Bar): https://github.com/react-navigation/react-navigation/issues/741
import React from 'react';
import { Text, View } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createMaterialTopTabNavigator } from 'react-navigation-tabs';
class HomeScreen extends React.Component {
static navigationOptions = {
title: "Home",
};
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Home!</Text>
</View>
);
}
}
class SettingsScreen extends React.Component {
static navigationOptions = {
title: 'Settings',
};
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Settings!</Text>
</View>
);
}
}
const routeConfiguration = {
Home: HomeScreen,
Settings: SettingsScreen,
};
const tabNavigatorConfiguration = {
tabBarPosition: 'bottom',
swipeEnabled: true,
};
const myTabNavigator = createMaterialTopTabNavigator(routeConfiguration, tabNavigatorConfiguration);
const RootStack = createStackNavigator(
{
Home: {
screen: myTabNavigator,
navigationOptions: {title: "Moolabeast"}
}
},
{
initialRouteName: 'Home',
}
);
const AppContainer = createAppContainer(RootStack);
export default class App extends React.Component {
render() {
return(<AppContainer/>);
}
}
view raw App.js hosted with ❤ by GitHub
 

topherPedersen