Best of the best - React Native UI libraries

#react #reactnative #design

In this post I am gonna talk to you about, what I think is the best React Native UI library.

There is an important take away from the sentence above. This is my opinion. It is fine if you disagree.

Over the years I have tried a load of React Native UI libraries and have generally been a little underwhelmed. This is not to say that they are bad. Far from it! They have just either not met my needs or have been overly complicated to override/implement.

Some of the ones I have tried previously and suggest you try too:

Of the ones listed about, React Native Elements has been my current favourite. That is until I discovered React Native Paper.

React Native Paper is from the awesome guys at Callstack, it follows Material design principles and produces really consistent results across platforms.

Granted, Material design is not to everyones taste and is not appropriate in all situations but if you need something wildly different then it is probably worth starting from scratch and not using a library at all. Having said that, if you are happy with Material design or you wanted to knock something up quickly and don't want to spend a longtime on the UI then this is definitely a library for you.

Previously I only really reached for a library when I need to create something quickly but React Native Paper is super flexible and easily overridden that I can see myself using it for bigger projects too. Infact, I am currently using is for an app that I hope to release to the app stores in late November.

Why I love React Native Paper:

Easy to setup

The React Native Paper documentation is great! As are the setup instructions.

All you need to do is:

Install it:

yarn add react-native-paper

# if in a vanilla RN app you need to add icons
yarn add react-native-vector-icons
react-native link react-native-vector-icons

Add it to your project:

import * as React from "react";
import { AppRegistry } from "react-native";
import { Provider as PaperProvider } from "react-native-paper";
import App from "./src/App";

export default function Main() {
  return (
    <PaperProvider>
      <App />
    </PaperProvider>
  );
}

AppRegistry.registerComponent("main", () => Main);

Thats all that is need to get started. There are some optional steps (adding a babel plugin) that can be taken but the above code is all you need to get going.

Theming

We all want our apps to stand out and so we want to be able to easily modify the theme that comes with React Native Paper. This is where it really shines. They make it so easy to change the base theme. You just need to override the parts of the theme you want to change and pass your new theme to the PaperProvider

import * as React from "react";
import { DefaultTheme, Provider as PaperProvider } from "react-native-paper";
import App from "./src/App";

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: "tomato",
    accent: "yellow"
  }
};

export default function Main() {
  return (
    <PaperProvider theme={theme}>
      <App />
    </PaperProvider>
  );
}

What is you want to use the theme in your own custom components? React Native Paper has got your back. You simply wrap your component in the withTheme HOC and boom! You have access to the theme.

import * as React from "react";
import { withTheme } from "react-native-paper";

function MyComponent(props) {
  const { colors } = props.theme;
  return <Text style={{ color: colors.primary }}>Yo!</Text>;
}

export default withTheme(MyComponent);

There are lots more options for theming so check out the documentation

Components

React Native Paper comes with pretty much all the components you might need to build your next project. They also recommend a couple of components that work nicely with the library. A full list, with examples, of the components can be found on the docs website.

As I mentioned before, the API for the components is simple to understand and so the library is a breeze to use.