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

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

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?

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')
    }

});

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

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

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

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!

Red screen with this error:

Expected dynamic type int64, but had type string

It makes flexbox styling a little awkward:

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

Good job btw! 👍

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.

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

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

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

im using this constructor MKTextField.textfield()

Focusing the textfield renders the floating label.

Hi Team,

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

Best
Timo

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

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?

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 ?

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.

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

Getting this when trying to use it in 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.

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

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

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.

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.

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

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.

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

After upgrading to 0.2.2

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

Is there also a floatedlabel textarea field?

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

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

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

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.

$ 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?

Implement MDL Slider component.

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

Investigating:

• MDL layouts
• Scrolling effects

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

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?

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.

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} />

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

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'

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

Love the work! Some minor styling niggles.

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

The placeholder grey color is 9e9e9e.