Are you happy with your logging solution? Would you help us out by taking a 30-second survey? Click here

react-native-material-ui

Highly customizable material design components for React Native

Subscribe to updates I use react-native-material-ui


Statistics on react-native-material-ui

Number of watchers on Github 1546
Number of open issues 105
Average time to close an issue 23 days
Main language JavaScript
Average time to merge a PR 9 days
Open pull requests 22+
Closed pull requests 22+
Last commit about 2 years ago
Repo Created about 4 years ago
Repo Last Updated about 2 years ago
Size 615 KB
Organization / Authorxotahal
Latest Releasev1.21.0
Contributors13
Page Updated
Do you use react-native-material-ui? Leave a review!
View open issues (105)
View react-native-material-ui activity
View on github
Fresh, new opensource launches 🚀🚀🚀
Trendy new open source projects in your inbox! View examples

Subscribe to our mailing list

Evaluating react-native-material-ui for your project? Score Explanation
Commits Score (?)
Issues & PR Score (?)

React Native Material UI (iOS and Android supported)

Highly customizable material design components for React Native!

npm codecov npm GitHub issues Dependencies GitHub license

Getting Started

$ npm i react-native-material-ui --save

Setting of vector icons

You can see this repo for much more information.

React Native Link (recommended)

Make sure you have atleast v0.31.0 react-native version.

$ react-native link react-native-vector-icons

Manual Installation

Android (see original)

Copy the MaterialIcons font file from react-native-vector-icons to your local working directory:

./node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf -> ./android/app/src/main/assets/fonts.

iOS (see original)

Adding Roboto Font

This project uses Roboto as the main font for text. Make sure to add Roboto to your project, as it will give the following error on iOS. Unrecognized font family Roboto.

You can obtain Roboto free from here.

Here is a great tutorial which shows how to add custom fonts.

Usage

To achieve the level of customizability, React Native Material UI is using a single JS object called uiTheme that is passed in via context. By default, this uiTheme object is based on the lightTheme that you can find here. So, you can change almost everything very easily.

The uiTheme object contains the following keys:

spacing: {} // can be used to change the spacing of components.
fontFamily: {} // can be used to change the default font family.
palette: {  // can be used to change the color of components.
    primaryColor: blue500,
    accentColor: red500,
    ...
}
typography: {} // can be used to change the typography of components
// you can change style of every each component
avatar: {}
button: {}
toolbar: {}
...
import React, { Component } from 'react';
import { Navigator, NativeModules } from 'react-native';

import { COLOR, ThemeProvider } from '../react-native-material-ui';

// you can set your style right here, it'll be propagated to application
const uiTheme = {
    palette: {
        primaryColor: COLOR.green500,
    },
    toolbar: {
        container: {
            height: 50,
        },
    },
};

class Main extends Component {
    render() {
        return (
            <ThemeProvider uiTheme={uiTheme}>
                <App />
            </ThemeProvider>
        );
    }
}

It means, if you want to change primary color of your application for example. You can just pass to ThemeProvider object with your own settings. Your settings will be merged with default theme.

What else?

Another great feature is, you can use the uiTheme everywhere. Even in your own components. So if you built your own implementation of Button for example, look how you can get the primary color.

import ...

const contextTypes = {
    uiTheme: PropTypes.object.isRequired,
};

class MyButton extends Component {
    render() {
        // it's really easy to get primary color everywhere in your app
        const { primaryColor } = this.context.uiTheme.palette;

        return ...
    }
}

export ...

Local changes

Of course, sometimes we need to change style of only one component. It means, all buttons have red background, but facebook login button that should have blue background. Every each component have style property. So you can very easily override whatever you want.

<Button style={{ container: { backgroundColor: 'blue' }}} />

Animations are included

Note: You have to allow the animations for Android (see React Native's documentation)

UIManager.setLayoutAnimationEnabledExperimental && 
UIManager.setLayoutAnimationEnabledExperimental(true);

Themes are supported

Toolbar with search feature

Examples

You can try our Demo App!

Example 1 Example 2 Example 3

Components

Here is a list of all component included in this library. (I'm working on documentation for every each component. Be patient please :))

react-native-material-ui open issues Ask a question     (View All Issues)
  • over 3 years Use TouchableOpacity for iOS RippleFeedback
  • over 3 years Menu not working on ios
  • over 3 years Card don't have Media, Body and Action unlike example image
  • over 3 years Badge on icons?
  • over 3 years Bug on Line 281 on Component Toolbar.react.js
  • over 3 years Missing Tabs component
  • over 3 years TypeError:udefined is not a function
  • over 3 years RadioButton does not work
  • over 3 years Web support
  • over 3 years Merge opportunities
  • over 3 years Specify shape proptype for Card component
  • over 3 years Documentation: For ListItem, only centerElement supports setting primary/secondary text content.
  • over 3 years Change proptype validation for Avatar image
  • over 3 years Is iOS supported?
  • almost 4 years press is triggered even when finger is dragged away
react-native-material-ui open pull requests (View All Pulls)
  • Native Toast and SnackBar implementation
  • fix card style
  • BottomNavigation: able to change the styles of active navigation via theme
  • Add autoCaptialize & autoCorrect to Toolbar.searchable
  • avatarIconProps
  • Added tertiaryText Option
  • [ActionButton] Add support for custom icons in actions.
  • Prop types
  • [BottomNavigation] Added show and hide animations
  • [Toolbar] Remove back listener before reassign
  • Replace BackAndroid with BackHandler
  • Support custom accessibility labels and traits in toolbar elements
  • Dialog is having ripple effect
  • Fix snack bar behavior
  • Add Material TextField
  • Updated & fixed documentation a bit
  • Enable custom icon elements in drawer items, make drawer header fixed
  • Icons: use PropTypes.any on style props to support Stylesheet declarations
  • Add support for toggling animated background rendering
  • [Toolbar] background image and show hide
  • Propagate keyboard* props fix for Issue #149
  • Add list item's minHeight into styles
react-native-material-ui list of languages used
Other projects in JavaScript