npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@sector-labs/react-native-material-kit

v0.5.1-sl.5

Published

Bringing Material Design to React Native

Downloads

8

Readme

npm react-native MIT

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:
include ':RNMaterialKit'
project(':RNMaterialKit').projectDir = file('../node_modules/react-native-material-kit/android')
  1. Declare the dependency in your android/app/build.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<ReactPackage> 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();

...
<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.

Cards

img-cards

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

Loading

MDL Loading components.

Progress bar

progress-demo

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

👉 props reference and example code

Spinner

spinner-demo

<mdl.Spinner />

👉 props reference and example code

Sliders

MDL Slider components. slider-demo

<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

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

...
<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 reference and example code

Toggles

Icon toggle & Switch img-toggles

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

Checkbox

img-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 reference and example code

Radio button

img-radio

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

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!🎉🍻