TypeScript Java Objective-C Ruby JavaScript Material design React Native
Need help with react-native-material-kit?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
xinthink

Description

Bringing Material Design to React Native

4.7K Stars 594 Forks MIT License 496 Commits 165 Opened issues

Services available

Need anything else?

Build Status npm react-native MIT Built with JetBrains IDEs

A set of UI components, in the purpose of introducing Material Design to apps built with React Native, quickly and painlessly.

Getting Started

First,

cd
to your RN project directory, and install RNMK through rnpm . If you don't have rnpm, you can install RNMK from npm with the command
npm i -S react-native-material-kit
and link it manually (see below).

NOTICE:

react-native-material-kit >= 0.4.0 only supports react-native >= 0.40.0

react-native-material-kit < 0.4.0 only supports react-native < 0.40.0

iOS

  • #### React Native < 0.29 (Using rnpm)

rnpm install react-native-material-kit
  • #### React Native >= 0.29
    npm install -S react-native-material-kit

react-native link react-native-material-kit

Manually

  1. Add
    node_modules/react-native-material-kit/iOS/RCTMaterialKit.xcodeproj
    to your xcode project, usually under the
    Libraries
    group
  2. Add
    libRCTMaterialKit.a
    (from
    Products
    under
    RCTMaterialKit.xcodeproj
    ) to build target's
    Linked Frameworks and Libraries
    list

Option: Using CocoaPods

Assuming you have CocoaPods installed, create a

PodFile
like this in your app's project directory. You can leave out the modules you don't need.
xcodeproj 'path/to/YourProject.xcodeproj/'

pod 'React', :subspecs => ['Core', 'RCTText', 'RCTWebSocket'], :path => 'node_modules/react-native' pod 'react-native-material-kit', :path => 'node_modules/react-native-material-kit'

post_install do |installer| target = installer.pods_project.targets.select{|t| 'React' == t.name}.first phase = target.new_shell_script_build_phase('Run Script') phase.shell_script = "if nc -w 5 -z localhost 8081 ; then\n if ! curl -s "http://localhost:8081/status\" | grep -q "packager-status:running" ; then\n echo "Port 8081 already in use, packager is either not running or not running correctly"\n exit 2\n fi\nelse\n open $SRCROOT/../node_modules/react-native/packager/launchPackager.command || echo "Can't start packager automatically"\nfi" end

Now run

pod install
. This will create an Xcode workspace containing all necessary native files, including react-native-material-kit. From now on open
YourProject.xcworkspace
instead of
YourProject.xcodeproject
in Xcode. Because React Native's iOS code is now pulled in via CocoaPods, you also need to remove the
React
,
RCTImage
, etc. subprojects from your app's Xcode project, in case they were added previously.

Android

  • #### React Native < 0.29 (Using rnpm)

rnpm install react-native-material-kit
  • #### React Native >= 0.29
    npm install -S react-native-material-kit

react-native link react-native-material-kit

Manually

  1. JDK 7+ is required
  2. Add the following snippet to your
    android/settings.gradle
    : ```gradle include ':RNMaterialKit' project(':RNMaterialKit').projectDir = file('../node_modules/react-native-material-kit/android')
1. Declare the dependency in your `android/app/build.gradle`
  ```gradle
  dependencies {
      ...
      compile project(':RNMaterialKit')
  }

  1. Import
    com.github.xinthink.rnmk.ReactMaterialKitPackage
    and register it in your
    MainActivity
    (or equivalent, RN >= 0.32 MainApplication.java):
  @Override
  protected List getPackages() {
      return Arrays.asList(
              new MainReactPackage(),
              new ReactMaterialKitPackage()
      );
  }

Manual Installation Issues

If you experience any trouble manually installing

react-native-material-kit
on Android, you should be able to safely skip it.

Finally, you're good to go, feel free to require

react-native-material-kit
in your JS files.

Have fun! :metal:

Resources

Components

Buttons

img-buttons

Apply Material Design Buttons with a few lines of code using predefined builders, which comply with the Material Design Lite default theme.

// colored button with default theme (configurable)
const ColoredRaisedButton = MKButton.coloredButton()
  .withText('BUTTON')
  .withOnPress(() => {
    console.log("Hi, it's a colored button!");
  })
  .build();

...

And you can definitely build customized buttons from scratch.

with builder:

const CustomButton = new MKButton.Builder()
  .withBackgroundColor(MKColor.Teal)
  .withShadowRadius(2)
  .withShadowOffset({width:0, height:2})
  .withShadowOpacity(.7)
  .withShadowColor('black')
  .withOnPress(() => {
    console.log('hi, raised button!');
  })
  .withTextStyle({
    color: 'white',
    fontWeight: 'bold',
  })
  .withText('RAISED BUTTON')
  .build();

...

the jsx equivalent:

 {
    console.log('hi, raised button!');
  }}
  >
  
    RAISED BUTTON
  

👉 props reference and example code

Why builders? See the ‘Builder vs. configuration object’ discussion.

Cards

img-cards

Apply

Card Style
with only few styles !. ```jsx import { getTheme, ... } from 'react-native-material-kit';

const theme = getTheme();

Welcome Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia... {menu} My Action

👉 [example code][card-sample]





Loading

[MDL Loading][mdl-loading] components.

Progress bar

[![progress-demo]][mdl-loading]

```jsx <mdl.progress style="{styles.progress}" progress="{0.2}"></mdl.progress>

👉 props reference and example code

Spinner

spinner-demo


👉 props reference and example code

Sliders

MDL Slider components. slider-demo

…
const SliderWithValue = mdl.Slider.slider()
  .withStyle(styles.slider)
  .withMin(10)
  .withMax(100)
  .build();
…
 this.setState({curValue})}
/>

👉 props reference and example code

Range Slider

range-slider-demo

…
const SliderWithRange = mdl.RangeSlider.slider()
  .withStyle(styles.slider)
  .withMin(10)
  .withMax(100)
  .withMinValue(30)
  .withMaxValue(50)
  .build();
…
 this.setState({
    min: curValue.min,
    max: curValue.max,
    })
  }
  onConfirm={(curValue) => {
    console.log("Slider drag ended");
    console.log(curValue);
  }}
/>

👉 props reference and example code

Text Fields

Built-in textfields, which comply with Material Design Lite.

img-tf

// textfield with default theme (configurable)
const Textfield = MKTextField.textfield()
  .withPlaceholder('Text...')
  .withStyle(styles.textfield)
  .build();

...

Customizing textfields through builder:

const CustomTextfield = mdl.Textfield.textfield()
  .withPlaceholder("Text...")
  .withStyle(styles.textfield)
  .withTintColor(MKColor.Lime)
  .withTextInputStyle({color: MKColor.Orange})
  .build();
...

the jsx equivalent:


👉 props reference and example code

Toggles

Icon toggle & Switch img-toggles

Icon toggle

  Off
  On

The two

Text
tags here, similar to State List in Android development, which can give you the flexibility to decide what content and how it is shown for each state of the toggle. For example, you can use react-native-icons here, or any other sophisticated contents.

👉 props reference and example code

Switch

 console.log('orange switch pressed')}
  onCheckedChange={(e) => console.log('orange switch checked', e)}
/>

👉 props reference and example code

Checkbox

img-checkbox


You can customize the styles by changing the global theme, which affects all checkboxes across the whole app.

setTheme({checkboxStyle: {
  fillColor: MKColor.Teal,
  borderOnColor: MKColor.Teal,
  borderOffColor: MKColor.Teal,
  rippleColor: `rgba(${MKColor.RGBTeal},.15)`,
}});

👉 props reference and example code

Radio button

img-radio

constructor() {
  super();
  this.radioGroup = new MKRadioButton.Group();
}
...

You can customize the styles by changing the global theme, which affects all radio buttons across the whole app.

setTheme({radioStyle: {
  fillColor: `rgba(${MKColor.RGBTeal},.8)`,
  borderOnColor: `rgba(${MKColor.RGBTeal},.6)`,
  borderOffColor: `rgba(${MKColor.RGBTeal},.3)`,
  rippleColor: `rgba(${MKColor.RGBTeal},.15)`,
}});

👉 props reference and example code

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.