15 React Native Material Design you Should Know

1. React Native Material Buttons

Material buttons with consistent behaviour on iOS and Android.

React Native Material Buttons

Features

Easy to use
Consistent look and feel on iOS and Android
Animated state transitions
Ripple animation on touch
Pure javascript implementation

View On GitHub

2.React Native Material Ripple

Base component for touchable elements.

React Native Material Ripple

Features

Easy to use
Configurable
Consistent look and feel on iOS and Android
Can be used as drop-in replacement for TouchableWithoutFeedback
Pure javascript implementation

View On GitHub

3.Material Bread

Highly customizable React Native Material Design Components.

Material Bread

Features

Highly Customizable React Native Components.
Cross platform support: React Native (iOS, Android), React-native-web (Browsers), Electron (Windows, Mac, Linux), react-native-windows, react-native-macos, Next.js, Expo, Vue Native
Support for Material Design 2.0 components.
Live react native demos you can edit in in your browser.
Typescript support

View On GitHub

4.React Native Material Dialog

Material design dialog components for React Native. JavaScript-only, for iOS and Android.

React Native Material Dialog

View On GitHub

5.React Native js Bottom Sheet

Modal bottom sheet component for Android and iOS that follows the guidelines of Material Design.

React Native js Bottom Sheet

View On GitHub

6.React Native Material Selectize

A React Native component inspired to Selectize which follows Material Design guidelines.
React Native Material Selectize

Working examples are provided within the project. After downloading it, navigate to any subfolder of examples and run either “npm install” or “yarn”.

Features

Type definitions with Typescript
Material design guidelines compliance
Consistent look and feel on iOS and Android
State transitions (normal, focused and errored)
Highly customizable styles and props of inner TextInput component
Pure javascript implementation
Minimal setup (no props required)

View On GitHub

7.React Native Material Dropdown

Material dropdown with consistent behaviour on iOS and Android
React Native Material Dropdown

Features

Easy to use
Consistent look and feel on iOS and Android
Customizable font size, colors and animation duration
Dynamic dropdown size and position
Configurable visible item count
RTL support
Pure javascript implementation

View On GitHub

8.React Native Material Menu

Pure JavaScript material menu component for React Native.

React Native Material Menu

Demo: https://snack.expo.io/@mxck/react-native-material-menu-demo

View On GitHub

9.React Native Floating Action

Material design action button for React Native

React Native Floating Action

View On GitHub

10.React Native Paper

Cross-platform Material Design for React Native.

React Native Paper

Features

Follows material design guidelines
Works on both iOS and Android following platform adaptation guidelines
Full theming support

Demo: https://reactnativepaper.com

View On GitHub

11.React Native: Native App Tour Library

This library is a React Native bridge around native app tour libraries. It allows show/guide beautiful tours:

React Native: Native App Tour Library
This library is a React Native bridge around native app tour libraries. It allows show/guide beautiful tours:

Native App Tour Library

View On GitHub

12.React Native Material Bottom Navigation

React Native Material Bottom Navigation

A beautiful, customizable and easy-to-use
Material Design Bottom Navigation for react-native.

Pure JavaScript. No native dependencies. No linking. No obstacles.
Looks beautiful. Stunning and fluid animations. You won’t believe it’s not a native view.
Customize it. You can adjust nearly everything to make it fit perfectly to your app.
Easy to use. Uses established React patterns for both simple and advanced usage.
Pluggable. Includes customizable Tabs and Badges. Not enough? Create and use your own!

Demo: https://timomeh.gitbook.io/material-bottom-navigation/

View On GitHub

13.React Native: Lock Screen

An easy-to-use, customizable and Material Design ready Pattern/Pin Lock view for Android & iOS.

Lock Screen

View On GitHub

14.React Native Material UI

Highly customizable material design components for React Native

React Native Material UI

View On GitHub

15.React Native Material Tabs

Material Design implementation of Tabs

React Native Material Tabs

View On GitHub

16.React Native: Material Shadows

This library is a thin React Native Bridge around harjot-oberai/MaterialShadows library. It seamlessly integrats with Material shadows. The library takes existing material shadows to next level by adding the following features :

Convex shadows: The shadows are not only rectangular or circular, they can take any convex shape depending on the view and its content.
Support for shadow offsets: The library allows developers to set X and Y offset for the shadows.
Support for shadow intensity: The library also has support for setting shadow intensity via shadowAlpha attribute.
Shadows for semi-transparent views : The library allows shadows for semi-transparent views.
Support for Async Shadow calculations : The library allows the operations to be async to avoid blocking the UI thread for long calculations.
Shadow animations : The library supports fade out animation for shadow.

View On GitHub

#reactjs #react-native