xinthink / react-native-material-kit Goto Github PK

Love the work! Some minor styling niggles.

The default size for a focused textfield underline is 2px.

The placeholder grey color is 9e9e9e.

I've been using this library, but as of 0.1.9, the modules will not load without changing the get/set method of Progress, Slider and Spinner to pure methods.

I have confirmed that changing these to plain functions resolve the issues. I'll send a PR shortly. Thanks!

When I click a TextField: this._bufferedValue || "").trim is not a function

$ npm i -S react-native-material-kit
npm WARN install Couldn't install optional dependency: Unsupported
[email protected] /home/aaa/ReactNative/aaa
└── [email protected]

Does that matter?

hello,
I tried to add a MKButton in Android5.1 like this

            <MKButton
                backgroundColor={MKColor.Silver}
                rippleColor={"rgba(0,0,0,0.1)"}
                rippleDuration={500}
                rippleLocation={'tapLocation'}
                maskColor={'rgba(0,0,0,0.05)'}
                maskDuration={500}
                shadowRadius={2}
                shadowOffset={{width:0, height:2}}
                shadowOpacity={.7}
                shadowColor={"black"}
                onPress={() => {
                console.log('hi, raised button!');
                }}>
                <View style={(this.props.index==0)?styles.navigationItemFirst:styles.navigationItem}>
                    <Text pointerEvents="none" style={styles.navigationItemText}>{this.props.text}</Text>
                </View>
            </MKButton>

when i touched the button(not in center), at first the offset is right, but at the next tick, the offset turned to center point.

after debug, i found that when the animation playing, onLayout event was emitted, and execute this._calcLayers(width / 2, height / 2, width, height)(mdl/Ripple.js line72), so offset was reset.

Is it a bug?

Thanks for this amazing project! This is very easy to use and quite well written.

I started experimenting with MKTextField.Builder(), and I quickly realized that I didn't know the best way to get the text values out of the element, since there doesn't seem to be any withOn... type of handler available for the builder. Looking over the code in https://github.com/xinthink/react-native-material-kit/blob/master/Source/Lib/builder.js#L106, I didn't see anything that popped out.

Would be really nice to have a podspec the same way react-native-fbsdk (https://github.com/facebook/react-native-fbsdk/blob/master/react-native-fbsdklogin/react-native-fbsdklogin.podspec) does.

To install the project in an IOS app with cocoapods woud be as simple as:

pod 'react-native-material-kit', :path => 'node_modules/react-native-material-kit'

Implement MDL Slider component.

Hi, I'm one of the maintainers of https://github.com/callemall/material-ui.
I dream in a world where I could use the same components to target react-dom (the browser) and react-native (iOS and Android).

So, do you think that It could be possible to achieve this?
It would be great if we can find a way to join forces.
I think that we would at least need to share the same API. But since we are using inlined-style, I'm wondering if we can't share more.

Focusing the textfield renders the floating label.

This happens when the current page quick unmounted. The code should be changed more defensive.

_doMeasurement() {
if (this.refs.input) {
this.refs.input.measure(this._onInputMeasured.bind(this));
if (this.props.floatingLabelEnabled) {
this.refs.floatingLabel.measure(this._onLabelMeasured.bind(this));
}
}
}

The following error is raised when using flatButton on Android: TypeError: expected dynamic type 'int64', but had type 'string'.

If I comment out the line containing withBackgroundColor(...) in function flatButton() in Button.js it works fine.

This also raises the error: (new MKButton.Builder()).build()
This is ok: (new MKButton.Builder()).withStyle({}).build()

Investigating:

• MDL layouts
• Scrolling effects

Planning to implement some of them, on both platforms, if possible.

Thanks for your quick fix ⚡ , but I found another issue about TextFiled events.

I did something like this:

_onBlur = ()=> {
  cl(`onBlur`)
  this.setState({
    upper: false,
  })
}

_onFocus = ()=> {
  cl(`onFocus`)
  this.setState({
    upper: true, // let the component upper, avoid hided by keyboard
  })
}

but when I triggered onFocus and ran into setState => render flow, the TextFiled lost focus and triggered onBlur. That not happened with RN.TextInput. Any ideal about that?

Is this project upto date with latest react-native release ?

It seems that over the last week a lot of material designed components appeared.

What about merging those into one library, so that styles and components can be shared and so there is a coherent API?

/cc @aakashns @mastermoo @eyaleizenberg

I try to use textfield and want to get the value
some part of the code

          <ColoredTextfield ref="nameText" onChangeText={(re)=>
            ToastAndroid.show("onChangeText:"+re,ToastAndroid.SHORT)
        }/>
...
  _commit(){
var name = this.refs.nameText.value; //undefined
ToastAndroid.show("success"+JSON.stringify(name),ToastAndroid.SHORT);
}

onChangeText works fine.

this.refs.nameText.value is undefined anyway.

If I do 'npm install react-native-material-kit', I get the following on build.gradle:

dependencies {
    compile project(':ReactAndroid')
//    provided 'com.facebook.react:react-native:0.12.+'
    //provided ('com.facebook.react:react-native:0.11.+') {
    //    exclude module: 'support-v4'
    //    exclude module: 'appcompat-v7'
    //}
    //compile 'com.android.support:design:23.0.1'
}

But I see that in the repo it is correct:

dependencies {
    provided 'com.facebook.react:react-native:0.12.+'
}

Thanks

In my use case of a slider, I need to be able to select an interval between 2 values (range of values). I tried to implement it, but didn't figured out how to do that.

If someone else want to look at this; you'll be more than welcome ;)

I see two issues using Slider.

1. During touch Thumb does follow my finger with some lag.
2. When I move finger outside slider during touch Thumb stop to respond. (https://www.dropbox.com/s/iwb5utzxu9jw7b3/VID_20151106_182304.mp4?dl=0)

I can fix it using standard PanResponder (http://facebook.github.io/react-native/docs/panresponder.html). Will you merge such pull request?

Peculiar. MKCardStyles returns an object with properties containing numbers rather than style objects?

Object {card: 106, image: 107, title: 108, content: 109, action: 110…}

I am logging like this:

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

var {
  MKCardStyles
} = MK;

console.log('MKCardStyles', MKCardStyles)

Thoughts? Ideas?

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

While the Spinner component is shown nothing scheduled via InteractionManager will run. Since it's sensible to wrap loading code in InteractionManager this is a bit of a problem!

I feel like this is more of a problem with Animated than with React Native Material Kit so I've created an issue on the React Native issue tracker also:

facebook/react-native#2434

I thought it would be worth mentioning this issue here also though.

Question as to why you used the builder pattern instead of a configuration object pattern for configuring instances.

The following has ten total method calls just for one button.

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

The MooTools configuration pattern uses just one

var CustomButton = new MKButton({
    backgroundColor : MKColor.Teal,
    shadow : {
        radius  : 2,
        opacity : .7,
        color   : 'black',
        offset  : {
            width  : 0,
            height : 2
        }
    },
    textStyle {
        color      : 'white',
        fontWeight : 'bold'
    },
    onPress : () => {
        console.log('onPress')
    }

});

Is there also a floatedlabel textarea field?

http://www.getmdl.io/components/index.html#toggles-section

Thanks for this awesome project, the material design effect really perfect. But I have some problem with MKTextField: How can I get input area events like onChangeText, onEndEditing and other on* in RN.TextInput? I can't find anything about that in README or MKTextField.js, it's really hard to work without these event callbacks.

Red screen with this error:

Expected dynamic type int64, but had type string

On Android, when you press the back icon, there is this round click effect. Is there a way to achieve this with this library?

NPM assumes that the root directory contains the package. With the npm package within the 'Source' directory, it cannot be installed directly from github. In my case, I want to install my branch while #15 is being considered, but can't.

Please reconsider the directory structure? :-)

Example to reproduce:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict'

var React = require('react-native')
var {
  AppRegistry,
  StyleSheet,
  ScrollView
} = React
var MKTextField = require('react-native-material-kit').MKTextField

var test = React.createClass({
  componentDidMount: function () {
    setTimeout(() => {
      this.refs.one.focus()
    }, 1000)
  },

  render: function () {
    return (
      <ScrollView
        style={styles.container}
        keyboardShouldPersistTaps={false}
        >
        <MKTextField
          ref='one'
          style={ styles.input }
          floatingLabelEnabled={true}
          placeholder='some placeholder'
          />
        <MKTextField
          style={ styles.input }
          floatingLabelEnabled={true}
          placeholder='some placeholder'
          />
      </ScrollView>
    )
  }
})

var styles = StyleSheet.create({
  container: {
    marginTop: 60
  },
  input: {
    flex: 1,
    width: undefined
  }
})

AppRegistry.registerComponent('test', () => test)

This is an issues with react native. Just so you know.

Is there a way to set the focus to a textfieldWithFloatingLabel? Similar to React Native TextInput with a ref and then using this.refs.InputName.focus().

After upgrading to 0.2.2

I just installed material kit on a fresh react-native project (react-native-cli 0.1.4)

  "dependencies": {
    "react-native": "^0.10.1",
    "react-native-material-kit": "^0.1.8"
  }

and I get these warnings:

Warning: Native component for "MKButton" does not existreactConsoleError @ index.ios.bundle:10719
index.ios.bundle:10719 Warning: Native component for "MKIconToggle" does not existreactConsoleError @ index.ios.bundle:10719
index.ios.bundle:10719 Warning: Native component for "MKSwitch" does not existreactConsoleError @ index.ios.bundle:10719

Getting this when trying to use it in android.

Question, and maybe a dumb one..

It looks like both this repo and MaterialKit don't implement cards or lists. Is there a reason for this? Is there something out there for this?

Thanks :)

I realized that in some situation a toggle is a component that can dominate a form too much if it only references a minor aspect. In such situations, a traditional checkbox would be more appropriate. Are there any plans to implement one?

I'm currently implementing some inputs like Radio or Checkbox and I'm trying to use your Ripple component but I got an error...

Here is my render function :

return  (
      <View style={style.input}>
        <Ripple ref="container"
          >
            <View style={style.rounded}></View>
          </Ripple>
        <Text style={style.label}>FOO</Text>
      </View>
    )

And here is the result of a console.log(this.refs.node) in MKTouchable file.

I missed something ?

I'm getting this error from the AccentColoredFab component

This is how I used it.

var AccentColoredFab = MKButton.accentColoredFab()
  .withText('+')
  .build();

and in render

<AccentColoredFab onPress={this.handlePress} />

Hi Team,

are there any plans to integrate FAB buttons / menus.
They are getting more and more relevant.

Best
Timo

I made a break point in the _onLayout function in the Button.js. I found it is not been callback ever.

I checked the props from the constructor function from Ripple. The onLayout prop is undefined.

Hey xinthink can you publish the latest version with the podspec so I can start using it from the npm registry in one of my projects?

Thanks again

You are probably aware of this change.

facebook/react-native@961c1eb

0.9.0-rc adds event counts so RCT_TEXT_EVENT_HANDLER needs to include eventCount

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.

     <Animated.View
              ref="innerCircle"
              style={{
                backgroundColor: MKColor.Indigo,
                width: this._animatedSize,
                height: this._animatedSize,
                borderRadius: this._animatedRadius,
              }}
            />

It looks that I can't have another color for the background of the innerCircle.

I try to follow the guide add RNMK in my Android project .
Build failed with an exception

FAILURE: Build failed with an exception.

* Where:
Settings file '/Users/Pamakids-Dev/js/react/graNote/android/settings.gradle' line: 5

* What went wrong:
A problem occurred evaluating settings 'graNote'.
> No signature of method: java.io.File.toPath() is applicable for argument types: () values: []
  Possible solutions: getPath(), length(), toURI(), toURL(), each(groovy.lang.Closure), with(groovy.lang.Closure)

this is may settings.gradle

rootProject.name = 'xxx'

// resolve the symbolic link if any
def resolve(File dir) {
  dir.toPath().toAbsolutePath().toFile()
}

include ':app'

include ':RNMaterialKit'
project(':RNMaterialKit').projectDir = resolve file('../node_modules/react-native-material-kit/android')

Is there anything I miss?
I install the package from the git

.withFontSize(44) and style={{ fontSize: 44 }} don't work

im using this constructor MKTextField.textfield()

It makes flexbox styling a little awkward:

<MKTextField
  style={{
    flex: 1,
    width: undefined
  }}
  placeholder='should take up the whole screen width'
  />

Good job btw! 👍