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

Getting Started

cd to your RN project directory,

1. npm i -S react-native-material-kit
2. Add node_modules/react-native-material-kit/iOS/RCTMaterialKit.xcodeproj to your xcode project, usually under the Libraries group
3. Add libRCTMaterialKit.a (from Products under RCTMaterialKit.xcodeproj) to build target's Linked Frameworks and Libraries list
4. require('react-native-material-kit') to start using the components, in js files
5. Have fun!

Looking for api docs? Try the Annotated Source. Debugging local module? Refer to Debuggin local RNMK module

Components

• Buttons
• Textfields
• Toggles
  • Icon toggle
  • Switch
• Loading
  • Progress bar
  • Spinner
• Sliders

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();

...
<ColoredRaisedButton/>

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();

...
<CustomButton/>

the jsx equivalent:

<MKButton
  backgroundColor={MKColor.Teal}
  shadowRadius={2}
  shadowOffset={{width:0, height:2}}
  shadowOpacity={.7}
  shadowColor="black"
  onPress={() => {
    console.log('hi, raised button!');
  }}
  >
  <Text pointerEvents="none"
        style={{color: 'white', fontWeight: 'bold',}}>
    RAISED BUTTON
  </Text>
</MKButton>

👉 props reference and example code

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

Text Fields

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

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

...
<Textfield/>

Customizing textfields through builder:

const ColoredTextfield = mdl.Textfield.textfield()
  .withPlaceholder(‘Text…’)
  .withStyle(styles.textfield)
  .withTintColor(MKColor.Lime)
  .withTextInputStyle({color: MKColor.Orange})
  .build();
...
<CustomTexfield/>

the jsx equivalent:

<MKTextField
  tintColor={MKColor.Lime}
  textInputStyle={{color: MKColor.Orange}}
  placeholder=“Text…”
  style={styles.textfield}/>

👉 props reference and example code

Toggles

Icon toggle & Switch

Icon toggle

<MKIconToggle
  checked={true}
  onCheckedChange={this._onIconChecked}
  onPress={this._onIconClicked}
  >
  <Text pointerEvents="none"
        style={styles.toggleTextOff}>Off</Text>
  <Text state_checked={true}
        pointerEvents="none"
        style={[styles.toggleText, styles.toggleTextOn]}>On</Text>
</MKIconToggle>

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

<mdl.Switch style={styles.appleSwitch}
          onColor="rgba(255,152,0,.3)"
          thumbOnColor={MKColor.Orange}
          rippleColor="rgba(255,152,0,.2)"
          onPress={() => console.log('orange switch pressed')}
          onCheckedChange={(e) => console.log('orange switch checked', e)}
/>

👉 props reference and example code

Loading

MDL Loading components.

Progress bar

<mdl.Progress
  style={styles.progress}
  progress={0.2}
  />

👉 props reference and example code

Spinner

<mdl.Spinner/>

👉 props reference and example code

Sliders

MDL Slider components.

<mdl.Slider style={styles.slider}/>
…
const SliderWithValue = mdl.Slider.slider()
  .withStyle(styles.slider)
  .withMin(10)
  .withMax(100)
  .build();
…
<SliderWithValue
	ref=“sliderWithValue”
  onChange={(curValue) => this.setState({curValue})}
  />

👉 props reference and example code

About

This project began with porting MaterialKit, thanks @nghialv for the great work!👍🖖

But before long, I decided to rewrite all the components in JSX, with no or limited help of native code, and the rewriting is in progress.

And lastly, it’s the very beginning of the project, lots of work to be done, contributions are welcome!🎉🍻