@eimagine/react-native-material-kit-webdevelop

    1.0.3 • Public • Published

    npm react-native MIT bitHound Score Gitter

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

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

    Finally, you're good to go, feel free to require react-native-material-kit in your JS files.

    Have fun! 🤘

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

    Install

    npm i @eimagine/react-native-material-kit-webdevelop

    DownloadsWeekly Downloads

    6

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    258 kB

    Total Files

    58

    Last publish

    Collaborators

    • auflint