xinthink / rnmk-demo

react-native-material-kit demo

⚠️ Deprecated

This repo is deprecated, for its place, an example app is added inside the react-native-material-kit repo.

---

react-native-material-kit demo

RNMK resources

• GitHub
• Docs (annotated source)
• Change logs

Debugging local RNMK module

• Checkout RNMK Demo
• Clone RNMK into the Libraries directory (inside the demo project)
• Edit react-native.config.js file, replace <absolute_project_root> with your local project directory
• Link your local RNMK module to the demo project

  cd rnmk-demo
  yarn
  
  (cd Libraries/react-native-material-kit && yarn && yarn build)
  (cd iOS && pod install)

• Commands
  • yarn start to start the dev server
  • yarn iosx build your app and starts it on iOS simulator
  • yarn android build your app and starts it on a connected Android emulator or device
  • or run any react-native commands: yarn cli [options] [command]

License

MIT

rnmk-demo's Issues

packager.sh fails when nvm is being used

RNMK source is in a directory next to RNMK-demo dir. Following instructions (note that I added in some echos):

collumj@por-collumj-m ~/research (master) 06:38:35  
$ cd rnmk-demo/

collumj@por-collumj-m ~/research/rnmk-demo (master) 06:38:47  
$ npm link ../react-native-material-kit/
/Users/collumj/.nvm/versions/node/v6.9.1/lib/node_modules/react-native-material-kit -> /Users/collumj/research/react-native-material-kit
/Users/collumj/research/rnmk-demo/node_modules/react-native-material-kit -> /Users/collumj/.nvm/versions/node/v6.9.1/lib/node_modules/react-native-material-kit -> /Users/collumj/research/react-native-material-kit

collumj@por-collumj-m ~/research/rnmk-demo (master) 06:38:54  
$ npm install --quiet

collumj@por-collumj-m ~/research/rnmk-demo (master) 06:39:03  
$ npm start 

> [email protected] start /Users/collumj/research/rnmk-demo
> ./scripts/packager.sh

/Users/collumj/research/rnmk-demo
RNMK_DIR node_modules/react-native-material-kit
DIR: node_modules/react-native-material-kit
RNMK_PATH ../../../.nvm/versions/node/v6.9.1/lib/node_modules/react-native-material-kit
solved RNMK -> ../../../.nvm/versions/node/v6.9.1/lib/node_modules/react-native-material-kit
Scanning 400 folders for symlinks in /Users/collumj/research/rnmk-demo/node_modules (7ms)
 ┌────────────────────────────────────────────────────────────────────────────┐ 
 │  Running packager on port 8081.                                            │ 
 │                                                                            │ 
 │  Keep this packager running while developing on any JS projects. Feel      │ 
 │  free to close this tab and run your own packager instance if you          │ 
 │  prefer.                                                                   │ 
 │                                                                            │ 
 │  https://github.com/facebook/react-native                                  │ 
 │                                                                            │ 
 └────────────────────────────────────────────────────────────────────────────┘ 
Looking for JS files in
   /Users/collumj/research/rnmk-demo
   /Users/collumj/research/rnmk-demo/.nvm/versions/node/v6.9.1/lib/node_modules/react-native-material-kit
   /Users/collumj/research/react-native-material-kit 


ENOENT: no such file or directory, stat '/Users/collumj/research/rnmk-demo/.nvm/versions/node/v6.9.1/lib/node_modules/react-native-material-kit'

Unable to build on iOS

I cloned the repo. Ran npm install
Then opened the rnmk-demo project in XCode and clicked run/play.

I think I'm missing this step:

Link your local RNMK module to the demo project but not sure exactly how? What is my RNMK module??

ld: library not found for -lRCTMaterialKit

Ld /Users/kristianmandrup/Library/Developer/Xcode/DerivedData/RNMKDemo-cqlnwjhtkogrsccizingawuxfwiy/Build/Products/Debug-iphoneos/Example.app/Example normal arm64
    cd /Users/kristianmandrup/repos/react-projs/rnmk-demo
    export IPHONEOS_DEPLOYMENT_TARGET=7.0
    export PATH="/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/usr/bin:/Applications/Xcode.app/Contents/Developer/usr/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin"
    /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/clang -arch arm64 -isysroot /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS9.2.sdk -L/Users/kristianmandrup/Library/Developer/Xcode/DerivedData/RNMKDemo-cqlnwjhtkogrsccizingawuxfwiy/Build/Products/Debug-iphoneos -F/Users/kristianmandrup/Library/Developer/Xcode/DerivedData/RNMKDemo-cqlnwjhtkogrsccizingawuxfwiy/Build/Products/Debug-iphoneos -filelist /Users/kristianmandrup/Library/Developer/Xcode/DerivedData/RNMKDemo-cqlnwjhtkogrsccizingawuxfwiy/Build/Intermediates/RNMKDemo.build/Debug-iphoneos/RNMKDemo.build/Objects-normal/arm64/Example.LinkFileList -Xlinker -rpath -Xlinker @executable_path/Frameworks -miphoneos-version-min=7.0 -dead_strip -fembed-bitcode-marker -ObjC -fobjc-arc -fobjc-link-runtime -lRCTMaterialKit /Users/kristianmandrup/Library/Developer/Xcode/DerivedData/RNMKDemo-cqlnwjhtkogrsccizingawuxfwiy/Build/Products/Debug-iphoneos/libReact.a /Users/kristianmandrup/Library/Developer/Xcode/DerivedData/RNMKDemo-cqlnwjhtkogrsccizingawuxfwiy/Build/Products/Debug-iphoneos/libRCTActionSheet.a /Users/kristianmandrup/Library/Developer/Xcode/DerivedData/RNMKDemo-cqlnwjhtkogrsccizingawuxfwiy/Build/Products/Debug-iphoneos/libRCTGeolocation.a /Users/kristianmandrup/Library/Developer/Xcode/DerivedData/RNMKDemo-cqlnwjhtkogrsccizingawuxfwiy/Build/Products/Debug-iphoneos/libRCTImage.a /Users/kristianmandrup/Library/Developer/Xcode/DerivedData/RNMKDemo-cqlnwjhtkogrsccizingawuxfwiy/Build/Products/Debug-iphoneos/libRCTLinking.a /Users/kristianmandrup/Library/Developer/Xcode/DerivedData/RNMKDemo-cqlnwjhtkogrsccizingawuxfwiy/Build/Products/Debug-iphoneos/libRCTNetwork.a /Users/kristianmandrup/Library/Developer/Xcode/DerivedData/RNMKDemo-cqlnwjhtkogrsccizingawuxfwiy/Build/Products/Debug-iphoneos/libRCTSettings.a /Users/kristianmandrup/Library/Developer/Xcode/DerivedData/RNMKDemo-cqlnwjhtkogrsccizingawuxfwiy/Build/Products/Debug-iphoneos/libRCTText.a /Users/kristianmandrup/Library/Developer/Xcode/DerivedData/RNMKDemo-cqlnwjhtkogrsccizingawuxfwiy/Build/Products/Debug-iphoneos/libRCTVibration.a /Users/kristianmandrup/Library/Developer/Xcode/DerivedData/RNMKDemo-cqlnwjhtkogrsccizingawuxfwiy/Build/Products/Debug-iphoneos/libRCTWebSocket.a -Xlinker -dependency_info -Xlinker /Users/kristianmandrup/Library/Developer/Xcode/DerivedData/RNMKDemo-cqlnwjhtkogrsccizingawuxfwiy/Build/Intermediates/RNMKDemo.build/Debug-iphoneos/RNMKDemo.build/Objects-normal/arm64/Example_dependency_info.dat -o /Users/kristianmandrup/Library/Developer/Xcode/DerivedData/RNMKDemo-cqlnwjhtkogrsccizingawuxfwiy/Build/Products/Debug-iphoneos/Example.app/Example

ld: library not found for -lRCTMaterialKit
clang: error: linker command failed with exit code 1 (use -v to see invocation)

To focus a text box needs two tap

First of all, thank you for this useful tools and demo app.

I've initialized a new react-native project to run rnmk-demo.
Then I copied everything to the new project except Android folder.
I applied the instructions for Android of react-native-material-kit library.

Now, I can run the demo app on the Android emulator.

However to enter a textfield in the demo, I have to tap two times. But I should enter the textfield to text something by tapping just one time.

What's wrong with my demo app?

The plus_dark and plus_white files are missing

It is required on buttons.js but not coming with the project.

Removing the source={require('image!plus_dark')} solve the runtime error, but, some in interface will be incomplete... ?

npm start fails because of a non canonical path returned by the solveRNMK() function

npm start fails because of a non canonical path returned by the solveRNMK() function in packager.sh. For instance, this is returning:

solved RNMK -> ../../../../.nvm/v4.2.6/lib/node_modules/react-native-material-kit

And failing:

ERROR  ENOENT: no such file or directory, stat '/home/username/Sandbox/react/.nvm/v4.2.6/lib/node_modules/react-native-material-kit'

Using a canonical path resolution the problem is fixed.

Can't change color for range sliders

I can't change the color marker or the track color of the range slider using borderColor and backgroundColor. What props am I suppose to use to change them separately?

<MKRangeSlider
 style={{ backgroundColor: Themes.primaryTheme }}
 min={18}
 max={100}
 minValue={this.state.minAge}
 onChange={values =>
  this.setState({
   minAge: values.min.toFixed(0) * 1,
    maxAge: values.max.toFixed(0) * 1
  })}
/>

Performance Issue

Hi, I'm having performance issues when i'm rendering multiple groups of radio buttons. Any suggestions as to how to render them faster?

How does MKTextField have its own "value" props?

MKTextField is based on TextInput, which is treated as...

a controlled component, which means the native value will be forced to match this value prop if provided

... according to React Native's documentation.

Then, how do we set the value prop to MKTextField?
Examples in READ ME and this demo do not show how to do so.
(At least I can see how to set the default value, though)

I also had a look at the implementation, but I'm still clueless.
(from line 534 in this page, we can see how TextInput is wrapped)

Without setting its value, TextInput can't be updated.

EDIT
The link to prop reference isn't working.

Any advice will be appreciated.

Unable to Run iOS Demo

I've tried versions of the install instructions from the README and based on #15 but am still not able to get the demo to run. Instructions in #15 get me the closest but not there. Here are the steps I'm taking:

git clone https://github.com/xinthink/rnmk-demo.git
cd rnmk-demo
npm install

Open the iOS/RNMKDemo.xcodeproj file in Xcode and I see this:

Now, I drag the node_modules/react-native-material-kit/iOS/RCTMaterialKit.xcodeproj to the Libraries folder (which leaves me with two entries, the Red/Grey entry and my new entry).

I then drag the libRCTMaterialKit.a file to the Linked Frameworks area.

I run the project and the build fails with:

ld: file not found: .../Debug-iphonesimulator/Example.app/Example

Checkbox is missing

Thanks for providing the demo.
All work except toggles.
This demo uses react-native-material-kit v0.2.4. The file app/toggles.js looks for MKCheckbox but no Checkbox.js in the lib/mdl. Or I miss something.

ld: library not found for -lRCTMaterialKit

I ran these commands:

1. npm link ../react-native-material-kit
2. npm install
3. npm start (error: couldn't find packager.sh)

Ran the XCode project for rnmk-demo and had the following error:
ld: library not found for -lRCTMaterialKit

Product-->Scheme is set to Example

XCode 7.1, OS X Yosemite

Can NOT build

Something goes wrong. I can't execute run-android.

Here are the details:

Task 'installRelease' not found in root project 'RNMKDemo'

I want to install demo app in my real devices with installRelease task, When I build app with:

cd android && ./gradlew installRelease

I got the following error:

FAILURE: Build failed with an exception.

* What went wrong:
Task 'installRelease' not found in root project 'RNMKDemo'. Some candidates are: 'uninstallRelease'.

* Try:
Run gradlew tasks to get a list of available tasks. Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

but when I build app with:

npm start
cd android && ./gradlew installDebug

It works.

undefined is not an object(evaluating 'this.getThumb.startToggle')

I am using MKSwitch, my code as follows：

<MKSwitch
checked= {true}
trackSize={20}
trackLength={48}
onCheckedChange={(value) => this._updateSwitch(value)}
onPress={() => console.log('orange switch pressed')}
style={GiftStyles.itemSwitch}
onColor="rgba(255,152,0,.3)"
thumbOnColor="#ff0000"
rippleColor="rgba(255,152,0,.2)"
value={this.state.switchIsOn}
/>

The Switch can show normally, but when I click it , RN will show an error with "undefined is not an object (evaluating 'this.getThumb().startToggle')".

who can tell me how can I do ?

Floating Label jsx field fails without fixed height

I have this code

'use strict';

import React, { PropTypes } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import  { MKTextField } from 'react-native-material-kit';

import { stylesheet, styleVars } from '../../styles/styles';

export default class TextInput extends React.PureComponent {

  render(){

    return (
        <MKTextField
          floatingLabelEnabled = {this.props.floatingLabel}
          style={localStyle.textInputBox}
          textInputStyle={localStyle.textinput}
          {...this.props}
          />
    );
  }
}

TextInput.propTypes = {
  floatingLabel : PropTypes.bool,
  inset         : PropTypes.bool
};

TextInput.defaultProps = {
  floatingLabel : true,
  inset         : false
};

const localStyle = StyleSheet.create({
  textInputBox:{

  },
  textinput:{
    // height:29
  }

});

And it looks like this if I don't do the fixed height. Fixed heights make me uncomfortable. Is there no other way?

Switch change doesn't animate when tied to props

When I set the MKSwitch checked prop to a store value and set that store value when onCheckedChange fires, it's position toggles on and off, but the switch thumb doesn't animate.

<MKSwitch checked={this.props.fbShareEnabled}
                    onCheckedChange={() => this.props.fbShareSetEnabled(!this.props.fbShareEnabled)} />

What am I doing wrong? The example code for the MKSwitch provides no practical example of how to use this component :(

Duplicate declaration "Natigator" in index.android.js

The code in index.android.js looks like below:

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

var React = require('react-native');

var {
  AppRegistry,
  StyleSheet,
  View,
  Text,
  ScrollView,
  Navigator,
  TouchableOpacity,
  ToolbarAndroid,
  Navigator,
  BackAndroid,
} = React;

// ...

It can NOT run on the latest version of react-native. Removing the orphan declaration of Navigator will solve the problem.

RCTMaterialKit/MKTouchableManager.m:59:18: Property 'eventDispatcher' cannot be found in forward class object 'RCTBridge'

When I try to build rnmk-demo (after including the *.a file as instructed and including the RCTMaterialKit project) I get this error:
/Users/danny/src/react-native-material-kit/iOS/RCTMaterialKit/MKTouchableManager.m:59:18: Property 'eventDispatcher' cannot be found in forward class object 'RCTBridge'

Adding #import "RCTBridge.h" seems to solve this particular error, but then I get 4 other errors:

Undefined symbols for architecture x86_64:
  "_RCTCopyProperty", referenced from:
      -[TickViewManager set_inset:forView:withDefaultView:] in libRCTMaterialKit.a(TickViewManager.o)
      -[TickViewManager set_fillColor:forView:withDefaultView:] in libRCTMaterialKit.a(TickViewManager.o)
  "_RCTSetProperty", referenced from:
      -[TickViewManager set_inset:forView:withDefaultView:] in libRCTMaterialKit.a(TickViewManager.o)
      -[TickViewManager set_fillColor:forView:withDefaultView:] in libRCTMaterialKit.a(TickViewManager.o)
  "__RCTLogFormat", referenced from:
      -[TickViewManager set_inset:forView:withDefaultView:] in libRCTMaterialKit.a(TickViewManager.o)
      -[TickViewManager set_fillColor:forView:withDefaultView:] in libRCTMaterialKit.a(TickViewManager.o)
ld: symbol(s) not found for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

XCode version:
Version 7.3.1 (7D1014)

Both rnmk-demo and react-native-material-kit are pulled from master.

React Native version:
0.26.3