Bringing Material Design to React Native

Overview

Build Status npm react-native MIT Built with JetBrains IDEs

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! 🤘

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:

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

Comments
  • Doesn't compatible with react-native 0.26

    Doesn't compatible with react-native 0.26

    Error Info:

    ExceptionsManager.js:61 Module AppRegistry is not a registered callable module. ExceptionsManager.js:61 Super expression must either be null or a function, not undefined

    opened by rongzhou 22
  • Button Does Not Work (Native component for

    Button Does Not Work (Native component for "MKTouchable"/"Tickview" does not exist)

    When running I receive the 2 warnings mentioned in the subject and the button does not react when clicked: no visual feedback and the console.log in the onPress event is not executed. (I tried on iOS simulator).

    I used the following code copy pasted from the documentation example:

    const MK = require('react-native-material-kit');
    const {
      MKButton,
      MKColor,
      MKTouchable
    } = MK;
    ...
    <MKButton
                backgroundColor={MKColor.Red}
                shadowRadius={2}
                shadowOffset={{width:0, height:2}}
                shadowOpacity={.7}
                shadowColor="black"
                onPress={() => {
                  console.log('hi, raised button!');
                }}
                >
                <Text pointerEvents="none"
                      style={{color: 'red', fontWeight: 'bold',}}>
                  RAISED BUTTON
                </Text>
              </MKButton>
    

    Warnings:

    ExceptionsManager.js:78Warning: Native component for "MKTouchable" does not existreactConsoleError @ ExceptionsManager.js:78console.error @ YellowBox.js:49warning @ warning.js:42requireNativeComponent @ requireNativeComponent.js:53(anonymous function) @ MKTouchable.js:62requireImpl @ require.js:61require @ require.js:21(anonymous function) @ Ripple.js:12requireImpl @ require.js:61require @ require.js:21(anonymous function) @ IconToggle.js:20requireImpl @ require.js:61require @ require.js:21(anonymous function) @ index.js:5requireImpl @ require.js:61require @ require.js:21(anonymous function) @ index.js:7requireImpl @ require.js:61require @ require.js:21(anonymous function) @ screen-lovers-profile.js:3requireImpl @ require.js:61require @ require.js:21(anonymous function) @ main.js:9requireImpl @ require.js:61require @ require.js:21(anonymous function) @ index.ios.js:4requireImpl @ require.js:61requireImpl @ require.js:29require @ require.js:21(anonymous function) @ index.ios.js.js:1messageHandlers.executeApplicationScript @ debuggerWorker.js:18onmessage @ debuggerWorker.js:33
    
    ExceptionsManager.js:78Warning: Native component for "TickView" does not exist
    

    Any ideas?

    Thanks!

    opened by Sexycrets 16
  • Setting fillColor of Checkbox component but color does not change

    Setting fillColor of Checkbox component but color does not change

    I am trying set the fillColor prop and the component still using Indigo color.

     <MKCheckbox checked={true} fillColor="#f00" />
    

    I tried setTheme too like the doc suggest but the result was the same. I think that could be something with TickView widget but its just a guess.

    opened by leandrost 14
  • React-native 0.49.2 cannot read property 'bool' of undefined

    React-native 0.49.2 cannot read property 'bool' of undefined

    I received this error when i updated react-native 0.49.2 from 0.43.4.

    But it worked fine in the react-native 0.43.4 version. i just added this import library code but it gives error.

    const MK = require('react-native-material-kit');

    	"react": "16.0.0-beta.5",
    	"react-native": "^0.49.2",
    	"react-native-elements": "^0.17.0",
    	"react-native-material-kit": "^0.4.1",
    	"react-native-push-notification": "^3.0.1",
    	"react-native-sensitive-info": "^5.1.0",
    	"react-native-switch": "^1.1.2",
    	"react-native-toast-easy": "^1.0.4",
    	"react-native-vector-icons": "^4.4.0",
    	"react-navigation": "^1.0.0-beta.13"
    	"babel-jest": "21.2.0",
    	"babel-preset-react-native": "4.0.0",
    	"jest": "21.2.1",
    	"react-test-renderer": "16.0.0-beta.5" 
    

    20171007_143655

    ## I Fixed it my problem was Proptypes define.

    i changed : Node_modules->react-native-material-kit->lib

    and replace proptypes define import Proptypes from 'react' to import PropTypes from 'prop-types'

    MkTouchable.js Thumb.js Tick.js builder.js mkproptypes.js utils.js /mdl/ Button.js Checkbox.js IconToggle.js IndeterminateProgress.js Progress.js RadioButton.js RangeSlider.js Ripple.js Slider.js Spinner.android.js Spinner.ios.js Switch.js Textfield.js

    Replace All Define Type.

    and for android-
    node_modules->react-native-material-kit->android->src->main->java->com->ReactMaterialPackager.java file

    and delete @Override from this code blog.

     @Override
        public List<Class<? extends JavaScriptModule>> createJSModules() {
            return Collections.emptyList();
        }
    
    opened by milkercaki 10
  • fix `no propType for native prop` error on Android on RN 0.36

    fix `no propType for native prop` error on Android on RN 0.36

    Add nativeBackgroundAndroid and nativeForegroundAndroid (added in React-Native 0.36 (6d175f2)) as nativeOnly props to fix no propType for native prop error on Android

    opened by youennPennarun 10
  • "Warning: Native component for "MKTouchable" does not exist"

    Hi!

    For some reason, whenever I try to use any of the buttons I get the following error on the console and touch events aren't triggered.

    Warning: Native component for "MKTouchable" does not exist
    

    I am using react-native 0.14.1 and react-native-material-kit 0.2.2 Anyone else running into this issue?

    Thanks :)

    opened by harrisrobin 10
  • React Native Android?

    React Native Android?

    Hi! How would one go about installing this for React Native Android? Is it supported? Perhaps a silly question since it's material design, but it'd be nice to be able to use this for a consistent app look on both platforms.

    enhancement 
    opened by zth 9
  • text in basic MKTextField is not visible while typing

    text in basic MKTextField is not visible while typing

    
    styles.textfield = {
        height: 48, // have to do it on iOS
        marginTop: 60
    }
    
    ...
    
      render() {
            return (
                <View>
                    <View style={{
                        margin: 20,
                        padding: 20,
                        backgroundColor: "#CCC"
                    }}>
                        <MKTextField tintColor={MKColor.Orange} textInputStyle={{
                            color: MKColor.Blue
                        }} placeholder="Text…" style={styles.textfield}/>
                    </View>
                    <View style={{
                        margin: 20,
                        padding: 20,
                        backgroundColor: "#CCC"
                    }}>
                        <TextfieldWithFloatingLabel ref="defaultInput"/>
                        <Text style={styles.legendLabel}>With floating label</Text>
                    </View>
                </View>
            )
        }
    

    When focus is on another text box:

    image

    When focus is on top text box:

    image

    When triple clicking top text box's text:

    image

    So the text is there, definitely, but I can't see it. Also that placeholder text is right in the middle of the line.

    $ react-native --version
    react-native-cli: 1.2.0
    react-native: 0.39.2
    ...
    "react-native-material-kit": "~0.3.4",
    
    opened by jcollum 8
  • TextField: Cannot read property 'measure' of undefined

    TextField: Cannot read property 'measure' of undefined

    I'm having a problem that occurs from time to time on the TextField with Floating Label.

    This started occurring when I upgraded to redux-form v6.

    screen shot 2016-09-13 at 14 56 01

    The associated jsx is:

    <View style={formStyles.formGroup.normal}>
        <TextInput
          {...field.input}
          type={field.type}
          placeholder={field.placeholder}
          secureTextEntry={field.secureTextEntry}
          autoCorrect={field.autoCorrect}
          error = {(field.meta.touched && field.meta.error) || null}
        />
        {field.meta.touched && field.meta.error && <AText style={formStyles.errorBlock}>{field.meta.error}</AText>}
    </View>
    

    The field object looks like this

    screen shot 2016-09-13 at 15 00 00 fixed need to be released 
    opened by mschipperheyn 8
  • fix

    fix "Can't tap into a field if I tap its placeholder, when floatingLbelEnabled={true}"

    Issue #208.

    When I tap on placeholder the input not focus, because is rendering before the floatingLabel. In react, which it is rendered first matter.

    opened by chicojasl 8
  • Debug in Chrome causes UI to become unresponsive in Android

    Debug in Chrome causes UI to become unresponsive in Android

    First, I'd like to say that this is a great project. Really well executed

    However, I've got a little bug. I think it's to do with RNMK and not React Native itself as I've only seen this behaviour in projects using RNMK.

    If I have RNMK components in my view and enable Debug in Chrome in Android, the UI becomes unresponsive. If I console.log the results of onPress, I will often get the results of the first press – but all subsequent animations freeze and the UI is unresponsive until I Reload JS.

    I'm using 0.2.4 of RNMK on RN 0.1.7 on Android 5.1.

    My app is pretty simple at the moment – it's here.

    FWIW, the packager also seems to freeze when this happens – the screenshot below shows white lines with successful loads of the JS package – and the bottom line is what happened when I've tried to debug in Chrome – it seems to be hung waiting for the JS package. screen shot 2016-01-02 at 10 23 28

    opened by shankie-codes 8
  • 'limits' file not found

    'limits' file not found

    Hi. I'm working with React Native and when I want to build iOS project I get this error: image

    It seems like there is a missing library but I do not know how to fix it.

    opened by Mocteyy 0
  • Bump simple-plist from 1.1.0 to 1.3.1 in /example

    Bump simple-plist from 1.1.0 to 1.3.1 in /example

    Bumps simple-plist from 1.1.0 to 1.3.1.

    Release notes

    Sourced from simple-plist's releases.

    TypeScript

    This release is a rewrite of the JavaScript code into TypeScript code to add strong typing for those who would choose to use it.

    As this is a minor release there should be minimal risk in upgrading from v1.1.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump async from 2.6.3 to 2.6.4 in /example

    Bump async from 2.6.3 to 2.6.4 in /example

    Bumps async from 2.6.3 to 2.6.4.

    Changelog

    Sourced from async's changelog.

    v2.6.4

    • Fix potential prototype pollution exploit (#1828)
    Commits
    Maintainer changes

    This version was pushed to npm by hargasinski, a new releaser for async since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump plist from 3.0.1 to 3.0.4 in /example

    Bump plist from 3.0.1 to 3.0.4 in /example

    Bumps plist from 3.0.1 to 3.0.4.

    Changelog

    Sourced from plist's changelog.

    3.0.4 / 2021-08-27

    3.0.3 / 2021-08-04

    • update xmldom to 0.6.0 to patch critical vulnerability (Mike Reinstein)
    • remove flaky saucelabs teseting badge (Mike Reinstein)

    3.0.2 / 2021-03-25

    • update xmldom to 0.5.0 to patch critical vulnerability (Mike Reinstein)
    • update saucelab credentials to point at mreinstein's saucelabs account (Mike Reinstein)
    • remove a bunch of test versions from the matrix because they weren't working in zuul + sauce (Mike Reinstein)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump ajv from 6.11.0 to 6.12.6 in /example

    Bump ajv from 6.11.0 to 6.12.6 in /example

    Bumps ajv from 6.11.0 to 6.12.6.

    Release notes

    Sourced from ajv's releases.

    v6.12.6

    Fix performance issue of "url" format.

    v6.12.5

    Fix uri scheme validation (@​ChALkeR). Fix boolean schemas with strictKeywords option (#1270)

    v6.12.4

    Fix: coercion of one-item arrays to scalar that should fail validation (failing example).

    v6.12.3

    Pass schema object to processCode function Option for strictNumbers (@​issacgerges, #1128) Fixed vulnerability related to untrusted schemas (CVE-2020-15366)

    v6.12.2

    Removed post-install script

    v6.12.1

    Docs and dependency updates

    v6.12.0

    Improved hostname validation (@​sambauers, #1143) Option keywords to add custom keywords (@​franciscomorais, #1137) Types fixes (@​boenrobot, @​MattiAstedrone) Docs:

    Commits
    • fe59143 6.12.6
    • d580d3e Merge pull request #1298 from ajv-validator/fix-url
    • fd36389 fix: regular expression for "url" format
    • 490e34c docs: link to v7-beta branch
    • 9cd93a1 docs: note about v7 in readme
    • 877d286 Merge pull request #1262 from b4h0-c4t/refactor-opt-object-type
    • f1c8e45 6.12.5
    • 764035e Merge branch 'ChALkeR-chalker/fix-comma'
    • 3798160 Merge branch 'chalker/fix-comma' of git://github.com/ChALkeR/ajv into ChALkeR...
    • a3c7eba Merge branch 'refactor-opt-object-type' of github.com:b4h0-c4t/ajv into refac...
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump ajv from 6.10.2 to 6.12.6

    Bump ajv from 6.10.2 to 6.12.6

    Bumps ajv from 6.10.2 to 6.12.6.

    Release notes

    Sourced from ajv's releases.

    v6.12.6

    Fix performance issue of "url" format.

    v6.12.5

    Fix uri scheme validation (@​ChALkeR). Fix boolean schemas with strictKeywords option (#1270)

    v6.12.4

    Fix: coercion of one-item arrays to scalar that should fail validation (failing example).

    v6.12.3

    Pass schema object to processCode function Option for strictNumbers (@​issacgerges, #1128) Fixed vulnerability related to untrusted schemas (CVE-2020-15366)

    v6.12.2

    Removed post-install script

    v6.12.1

    Docs and dependency updates

    v6.12.0

    Improved hostname validation (@​sambauers, #1143) Option keywords to add custom keywords (@​franciscomorais, #1137) Types fixes (@​boenrobot, @​MattiAstedrone) Docs:

    v6.11.0

    Time formats support two digit and colon-less variants of timezone offset (#1061 , @​cjpillsbury) Docs: RegExp related security considerations Tests: Disabled failing typescript test

    Commits
    • fe59143 6.12.6
    • d580d3e Merge pull request #1298 from ajv-validator/fix-url
    • fd36389 fix: regular expression for "url" format
    • 490e34c docs: link to v7-beta branch
    • 9cd93a1 docs: note about v7 in readme
    • 877d286 Merge pull request #1262 from b4h0-c4t/refactor-opt-object-type
    • f1c8e45 6.12.5
    • 764035e Merge branch 'ChALkeR-chalker/fix-comma'
    • 3798160 Merge branch 'chalker/fix-comma' of git://github.com/ChALkeR/ajv into ChALkeR...
    • a3c7eba Merge branch 'refactor-opt-object-type' of github.com:b4h0-c4t/ajv into refac...
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(v0.6.0-beta.1)
  • v0.6.0-beta.1(Feb 18, 2020)

    React Native Version

    Compatible react-native version :arrow_up: v0.61.

    Breaking Changes

    The package is ported to TypeScript and refactored a lot, which makes several breaking changes:

    Naming Convention

    The alias pattern MK<Component> is obsoleted. Use <Component> directly.

    Buttons

    Builders & factory methods are replaced with prebuilt button variances, e.g., ColoredRaisedButton and Fab. Predefined props and styles are also available, such as raisedButton() or coloredButtonText(), upon which you can define reusable button components or themes. Please see the buttons example for details.

    Text Fields

    Likewise, builders for the TextField component is also removed, you can customize a TextField using props directly. For example:

    Textfield
      password
      placeholder="Password"
      textInputStyle={…}
      highlightColor={MKColor.DeepPurple}
    />
    

    Please see the text-fields example for details.

    Documentation

    The package documentation is re-written completely, complying with the TSDoc standard. The annotated source will not be updated anymore. The new API docs can be accessed here.

    Source code(tar.gz)
    Source code(zip)
  • v0.3.4(Dec 18, 2016)

    Fix bugs & merged PRs

    There may be a breaking change due to PR #274 If you encounter layout issue with Textfield components, you may specify flex: 1 with the textInputStyle prop.

    A lot thanks to all the contributors!

    Source code(tar.gz)
    Source code(zip)
  • v0.3.3(Oct 17, 2016)

    Finally the v0.3.3 is up. With bunches of bugs fixed, and PRs merged.

    Thanks for the contributions of @Crash-- @alexprice91 and all the contributors!

    Source code(tar.gz)
    Source code(zip)
  • v0.3.2(Jun 5, 2016)

    Bug fixes. Compatible with RN v0.26, actually, it passed the tests against RN v0.27.0-rc.

    Sorry for releasing so late. And thanks @Crash-- @alexprice91 and anyone who helped me fixing/managing issues, so that I can publish this release finally.

    Tons of 🍻 cheers!

    Source code(tar.gz)
    Source code(zip)
  • v0.3.1(Apr 9, 2016)

  • v0.3.0(Feb 12, 2016)

    New component

    Enhanced theme system

    Most of the components has it's own theme, which inherits the global style attributes e.g. primaryColor, accentColor...

    • Please take a look of theme.js, and how to customize the system-wide theme (affects all the components) in the demo.
    • MKCardStyles is removed, they're now included in the theme c426722

    And also some bug fixes.

    Source code(tar.gz)
    Source code(zip)
  • v0.2.5(Jan 5, 2016)

  • v0.2.4(Dec 5, 2015)

  • v0.2.2(Oct 25, 2015)

  • v0.2.1(Oct 13, 2015)

  • v0.2.0(Oct 10, 2015)

    Android support

    Finally, all components are available on Android. :tada:

    Limitations

    New Component: Cards

    Thanks the great work of @Crash--

    Breaking changes

    Source code(tar.gz)
    Source code(zip)
  • v0.1.8(Aug 15, 2015)

  • v0.1.7(Aug 5, 2015)

    Replaced the native-implemented MKTextField with a pure-jsx version.

    I tried hard to keep the consistence, but in order to make the api more concise and self-describing, there's still some breaking changes:

    • ripple-related props removed, 'cause no ripple effect in the MDL Textfield specification
    • bottomBorder renamed to underline, e.g. bottomBorderWidth should be underlineWidth now
    • arguments of onXXX callbacks comply with RN.TextInput

    Please find more details from the Textfields Example and the Annotated Source

    Source code(tar.gz)
    Source code(zip)
  • v0.1.6(Aug 1, 2015)

Owner
Yingxin Wu
Software engineer, swimmer, scuba diver
Yingxin Wu
Material Design for React Native (Android & iOS)

Material design for React Native. reactnativepaper.com Features Follows material design guidelines Works on both iOS and Android following platform ad

Callstack 9.8k Sep 25, 2022
React Native TextInput styled with Material Design.

React Native Material Design TextInput React Native TextInput styled with Material Design. Installation npm install react-native-md-textinput Usage I

Evan Johnson 316 Jul 12, 2022
Smooth and fast cross platform Material Design date and time picker for React Native Paper

Smooth and fast cross platform Material Design date and time picker for React Native Paper

webRidge 395 Sep 24, 2022
Modular and customizable Material Design UI components for React Native

react-native-material Modular and customizable Material Design UI components for React Native Try it out Take a look at our example app: iOS Android W

Yaman KATBY 116 Sep 22, 2022
A material design card component, customizable and versatile

react-native-material-cards A material design card component, customizable and versatile. See Google Material Design for more info on Cards. Installat

Swapnil Devesh 127 Sep 15, 2022
A FAB button component for Android and iOS, customizable, simple and as per material design specs.

react-native-fab A FAB button component for Android and iOS, customizable, simple and as per material design specs. See Google Material Design for mor

Swapnil Devesh 74 Jun 22, 2022
Material Design "Backdrop" component for Android and iOS.

react-native-material-backdrop-modal Material Design "Backdrop" component for Android and iOS. Setup Usage Props Setup Install: Using npm: npm install

Bruno Castro 38 Jul 4, 2022
React Native wrappers for https://github.com/afollestad/material-dialogs

react-native-dialogs An Android only module for Material Design dialogs. This is a wrapper over afollestad/material-dialogs. This module is designed f

null 590 Jun 24, 2022
Pure JavaScript material menu component for React Native

react-native-material-menu · Pure JavaScript material menu component for React Native with automatic RTL support. Install Using yarn yarn add react-na

Maksim Milyutin 451 Sep 1, 2022
A simple material-themed calendar for react native android

react-native-calendar-android A simple material-themed calendar for react native android Installation Android npm install --save react-native-calendar

Tu Do 41 Dec 11, 2021
Cross Platform Material Alert and Prompt Dialogs for React Native. Imperative API, Android, IOS, Web

React Native Paper Alerts Cross Platform Material Alert and Prompt for React Native. It tries to follow the API and function signature of React Native

Arafat Zahan 11 Aug 2, 2022
:boom: React Native UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode

UI Kitten Documentation UI Kitten is a React Native UI Library that allows you creating stunning multi-brand cross-platform mobile applications. The l

Akveo 9.3k Sep 30, 2022
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

FuYaoDe 3.2k Sep 29, 2022
A marquee label for react-native(if you use js pure marquee, use remobile/react-native-marquee[ https://github.com/remobile/react-native-marquee ])

React Native MarqueeLabel (remobile) A marquee label for react-native if you use js pure marquee, use remobile/react-native-marquee[ https://github.co

YunJiang.Fang 114 Jul 18, 2022
react-native-swiper2 ★86 - Swiper component for React Native. Supersede react-native-swiper

react-native-swiper2 react-native-swiper is now active again, so swiper2 will stop maintaining. Changelogs [v2.0.7] correct onPageChange index. https:

Sunny Luo 84 Feb 23, 2022
react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swiper , similar to the one found in Google's app like Sheet, Drive, Docs...

react-native-app-intro react-native-app-intro is a react native component implementing a parallax effect welcome page using base on react-native-swipe

Shinix 62 Jul 15, 2022
A React Native module that allows you to crop photos, built with react native Animated api and react-native-gesture-handler.

react-native-image-cropview A React Native module that allows you to crop photos, built with react native Animated api and react-native-gesture-handle

Cristian Tomescu 12 Aug 30, 2022
Use the iOS and Android native Twitter and Facebook share popup with React Native https://github.com/doefler/react-native-social-share

React Native Social Share Use the built-in share view from iOS and Android to let the user share on Facebook and Twitter. It will use the user's exist

Kim Døfler 414 Aug 29, 2022
SVG library for React Native, React Native Web, and plain React web projects.

react-native-svg react-native-svg provides SVG support to React Native on iOS and Android, and a compatibility layer for the web. Check out the demo F

null 6.3k Sep 21, 2022