A set of UI components, in the purpose of introducing Material Design to apps built with React Native, quickly and painlessly.
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).
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
-
rnpm install react-native-material-kit
-
npm install -S react-native-material-kit
react-native link react-native-material-kit
- 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 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.
-
rnpm install react-native-material-kit
-
npm install -S react-native-material-kit
react-native link react-native-material-kit
- JDK 7+ is required
- Add the following snippet to your
android/settings.gradle
:
include ':RNMaterialKit'
project(':RNMaterialKit').projectDir = file('../node_modules/react-native-material-kit/android')
- Declare the dependency in your
android/app/build.gradle
dependencies {
...
compile project(':RNMaterialKit')
}
- Import
com.github.xinthink.rnmk.ReactMaterialKitPackage
and register it in yourMainActivity
(or equivalent, RN >= 0.32 MainApplication.java):
@Override
protected List<ReactPackage> getPackages() {
return Arrays.asList(
new MainReactPackage(),
new ReactMaterialKitPackage()
);
}
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! ๐ค
- Release Notes
- Refer to the Annotated Source as API docs
- Source code of Demo app
- For contributors, please refer to How to debug local RNMK module
- Chat about bugs/features on Gitter
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.
Apply Card Style
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 code
MDL Loading components.
<mdl.Progress
style={styles.progress}
progress={0.2}
/>
๐ props reference and example code
<mdl.Spinner />
๐ props reference and example code
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
<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 reference and example code
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 CustomTextfield = mdl.Textfield.textfield()
.withPlaceholder("Text...")
.withStyle(styles.textfield)
.withTintColor(MKColor.Lime)
.withTextInputStyle({color: MKColor.Orange})
.build();
...
<CustomTextfield />
the jsx equivalent:
<Textfield
tintColor={MKColor.Lime}
textInputStyle={{color: MKColor.Orange}}
placeholder=โTextโฆโ
style={styles.textfield}
/>
๐ props reference and example code
<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
<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
<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 reference and example code
constructor() {
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 reference and example code