!npmnpm-badgenpm
!react-nativern-badgern
!MITlicense-badgelicense
!bitHound Scorebithound-badgebithound
!Gittergitter-badgegitter-rnmk
A set of UI components, in the purpose of introducing Material Designmd to apps built with React Nativern, quickly and painlessly.
Now run
``
``
```java @Override protected List getPackages() {
Finally, you're good to go, feel free to require
Have fun! :metal:
Apply Material Design Buttonsmdl-buttons with a few lines of code using predefined builders, which comply with the Material Design Lite default thememdl-theme.
And you can definitely build customized buttons from scratch.
with builder:
the jsx equivalent:
👉 props referencebutton-props-doc and example codebuttons-sample
Apply
👉 example codecard-sample
👉 props referenceprog-props-doc and example codeprogress-sample
👉 props referencespinner-props-doc and example codeprogress-sample
👉 props referenceslider-props-doc and example codeslider-sample
👉 props referencerange-slider-props-doc and example codeslider-sample
!img-tfmdl-tf
Customizing textfields through builder:
the jsx equivalent:
👉 props referencetf-props-doc and example codetf-sample
The two
👉 props referenceicon-toggle-props-doc and example codetoggles-sample
👉 props referenceswitch-js-props-doc and example codetoggles-sample
You can customize the styles by changing the global theme, which affects all checkboxes across the whole app.
👉 props referencecheckbox-props-doc and example codetoggles-sample
You can customize the styles by changing the global theme, which affects all radio buttons across the whole app.
👉 props referenceradio-props-doc and example codetoggles-sample
But I rewrote almost all the components in JSX, with limited help of native code.
And lastly, it’s lots of work to be done, contributions are welcome!🎉🍻
A set of UI components, in the purpose of introducing Material Designmd to apps built with React Nativern, 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).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
- Add
node_modules/react-native-material-kit/iOS/RCTMaterialKit.xcodeproj
to your xcode project, usually under theLibraries
group - Add
libRCTMaterialKit.a
(fromProducts
underRCTMaterialKit.xcodeproj
) to build target'sLinked Frameworks and Libraries
list
Option: Using CocoaPods
Assuming you have CocoaPods installed, create aPodFile
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
- JDK 7+ is required
- Add the following snippet to your
android/settings.gradle
:
``
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):```java @Override protected List getPackages() {
return Arrays.asList(
new MainReactPackage(),
new ReactMaterialKitPackage()
);
}
```Finally, you're good to go, feel free to require
react-native-material-kit
in your JS files.Have fun! :metal:
Resources
- Release Notes
- Refer to the Annotated Sourcedocs as API docs
- Source code of Demo app
- For contributors, please refer to How to debug local RNMK moduledebug-with-demo
- Chat about bugs/features on Gittergitter-rnmk
Components
- Progress bar - Spinner - Range Slider - Checkbox - Radio button - Icon toggle - SwitchButtons
!img-buttonsmdl-buttonsApply Material Design Buttonsmdl-buttons with a few lines of code using predefined builders, which comply with the Material Design Lite default thememdl-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 referencebutton-props-doc and example codebuttons-sample
Why builders? See the ‘Builder vs. configuration objectissue-3’ discussion.
Cards
!img-cardscards-mdlApply
Card Style
cards-mdl with only few styles !.
import {
getTheme,
...
} from 'react-native-material-kit';
const theme = getTheme();
<View style={theme.cardStyle}>
<Image source={{uri : base64Icon}} style={theme.cardImageStyle} />
<Text style={theme.cardTitleStyle}>Welcome</Text>
<Text style={theme.cardContentStyle}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris sagittis pellentesque lacus eleifend lacinia...
</Text>
<View style={theme.cardMenuStyle}>{menu}</View>
<Text style={theme.cardActionStyle}>My Action</Text>
</View>
👉 example codecard-sample
Loading
MDL Loadingmdl-loading components.Progress bar
!progress-demomdl-loading<mdl.Progress
style={styles.progress}
progress={0.2}
/>
👉 props referenceprog-props-doc and example codeprogress-sample
Spinner
!spinner-demomdl-loading<mdl.Spinner />
👉 props referencespinner-props-doc and example codeprogress-sample
Sliders
MDL Slidermdl-slider components. !slider-demomdl-slider<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 referenceslider-props-doc and example codeslider-sample
Range Slider
!range-slider-demo<mdl.RangeSlider style={styles.slider} />
…
const SliderWithRange = mdl.RangeSlider.slider()
.withStyle(styles.slider)
.withMin(10)
.withMax(100)
.withMinValue(30)
.withMaxValue(50)
.build();
…
<SliderWithRange
ref=“sliderWithRange”
onChange={(curValue) => this.setState({
min: curValue.min,
max: curValue.max,
})
}
onConfirm={(curValue) => {
console.log("Slider drag ended");
console.log(curValue);
}}
/>
👉 props referencerange-slider-props-doc and example codeslider-sample
Text Fields
Built-in textfields, which comply with Material Design Litemdl-tf.!img-tfmdl-tf
// textfield with default theme (configurable)
const Textfield = MKTextField.textfield()
.withPlaceholder('Text...')
.withStyle(styles.textfield)
.build();
...
<Textfield />
Customizing textfields through builder:
const CustomTextfield = mdl.Textfield.textfield()
.withPlaceholder(‘Text…’)
.withStyle(styles.textfield)
.withTintColor(MKColor.Lime)
.withTextInputStyle({color: MKColor.Orange})
.build();
...
<CustomTextfield />
the jsx equivalent:
<MKTextField
tintColor={MKColor.Lime}
textInputStyle={{color: MKColor.Orange}}
placeholder=“Text…”
style={styles.textfield}
/>
👉 props referencetf-props-doc and example codetf-sample
Toggles
Icon togglemdl-icon-toggle & Switchmdl-switch !img-togglesmdl-togglesIcon 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 Listandroid-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-iconsrn-icons here, or any other sophisticated contents.👉 props referenceicon-toggle-props-doc and example codetoggles-sample
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 referenceswitch-js-props-doc and example codetoggles-sample
Checkbox
!img-checkboxmdl-checkbox<MKCheckbox
checked={true}
/>
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 referencecheckbox-props-doc and example codetoggles-sample
Radio button
!img-radiomdl-radioconstructor() {
super();
this.radioGroup = new MKRadioButton.Group();
}
...
<MKRadioButton
checked={true}
group={this.radioGroup}
/>
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 referenceradio-props-doc and example codetoggles-sample
About
This project is inspired by MaterialKit, thanks @nghialv for the great work!👍🖖But I rewrote almost all the components in JSX, with limited help of native code.
And lastly, it’s lots of work to be done, contributions are welcome!🎉🍻