UI design for native Android and iOS applications can be complex and demanding. However, the importance of sleek and responsive UI cannot be overstated. With the introduction of the Material Design concept in 2014, Google established a standard for mobile and web development that makes life easier for developers and UI designers.

As one of the most popular frameworks for building native Android and iOS applications, React Native ships with a lot of libraries for Material Design. With over 46,000 downloads per week, Paper is the most popular React Native library based entirely on Material UI. A fast library, Paper makes the UI design process easy, seamless and efficient.

Here is a synopsis of what we will cover:

• Setting up React Native app using the expo CLI
• Installing React Native Paper and other dependencies
• Creating custom themes in React Native Paper
• Using custom themes in React Native Paper
• Using Material icons in React Native
• Material UI-based components in React Native paper (eg. cards, bottom navigation, etc)

Let’s get started.

Create a new React Native project

If you don’t have the expo CLI, install it globally in your computer using the following command:

npm install -g expo-cli

Then, install a blank React Native (expo) project:

expo init --template bare-minimum

Open the project in your favorite editor. To open it in Visual Studio Code, navigate to the project root and enter the following command:

code .

The project structure will look like this:

#react native #react #material ui