I dont know if i'm doing the right way, but im trying to change the button and toolbar background color and my app doesn't give me any error but the color is still the default. I'm doing -->

            <Button 
                onPress={this.gotoNext.bind(this)}
                text='Login' 
                theme = 'dark'
                textColor  = 'white'
                raised={true} 
                overrides={{backgroundColor: 'red'}}
            />

And the color is blue not red as im asking.
Any idea or solution?? thanks

I got yellow-warning setState on RN 0.16 when trigger onPress/onLongPress event.

  handleSubmit = () => {
    this.props.onSubmit(this.state)
  }
...
      <Button
        onPress={this.handleSubmit.bind(this)}
        onLongPress={this.handleSubmit.bind(this)}
        primary='googleRed'
        theme='dark'
        raised={true}
        value='Save'
      />

But this code below doesn't throw any warning.

      <TouchableOpacity onPress={this.handleSubmit.bind(this)}>
        <Text>Save</Text>
      </TouchableOpacity>

Btw, this button also show warning as same like react-native-material-design button do.

Hi,
I would like to be able to use the navigator FROM the welcome screen, in order to change scene from the screen itself to another screen.

Basically I have a list of cards on the Welcome screen, which the link on each card supposed to go to another component (MyComponent.js, placed on the scenes folder), with different props.

Any ideas?

Hi,

I've just recognised that the more often I switch between scenes the more laggy it become. I first thought it is because of the debug mode, but it also starts with your release-apk.

And it seems that its just the sidebar animation, everything else within a scene runs fine.

To reproduce:

1. App start
2. Open Sidebar
3. go "Welcome" Scene | up until here everything is fine
4. Open Sidebar again
5. go "Avatar"
6. Open Navbar | here it starts to drop and it gets worse the more I switch between scenes

mobile: Samsung galaxy S4

Oh and thanks for your great work btw. this project is awesome. :)

How does this differ from mrn? Is mrn not actively maintained anymore?

how is done? thanks

Don't know if anyone wants to do this with the demo app, but I feel I should probably swap out for Redux, since it seems to be the more preferred method of Flux implementations.

I'll try and base it on the F8 app: https://github.com/fbsamples/f8app

I receive the following error:

Requiring unknown module "react-native-vector-icons/MaterialIcons". If you are sure the module is there, try restarting the packager.

I'm using:

"react-native-material-design": "^0.3.2",
"react-native-vector-icons": "^1.2.0"

I have copied over the fonts as described to:
android/app/src/main/java/assets/fonts

Getting bunch of errors

Cannot read property 'oneOf' of undefined

(for CreateIconSet)

and

Module AppRegistry is not a registered callable module.

maybe I am doing something wrong?

I would like to set button width styles. But it does not work. Nothing change.

          <Button
          style={{width: 200}}
          text = 'Login with Meow'
          onPress={this.loginMeow}

          />

This is a screenshot of an avatar:

This is what I'm using to render it:

      <Avatar
        icon={'face'}
        backgroundColor={this.getBackgroundColor()}
      />

I've made sure I copied the correct font file and restarted the package, but it still doen't load. Any idea?

Thanks!

This list is a work in progress

• Refactor List component
• Implement GridView component
• Implement Floating Action Button (FAB)
• Swipe Views with Tabs (spec). Create a wrapper around react-native-scrollable-tab-view - maybe?
• Animated IconToggle badge changes. c8f762e Released in 0.3.1
• Create a core Ripple component, which handles device type a0fc633
• Attempt to implement TouchableWithoutFeedback on polyfil/Ripple to properly handle onLong press and other props. b537e1c
• NavIgation Drawer expandable/collapsable sections.

Hello,

Please, this is more of a question: Is work still on-going on the List component? I noticed it was commented out in the demo app and it threw errors when I tried to uncomment and run the app with it.

And please is it normal native behaviour for the drawer to be available on every view, even child views? It feels like an anti-pattern, what do you think? Thanks

Hi,
Awesome library ! Keep up the good work ;)
I have some trouble to try out the ToggleIcon component on IOS.
My icon is displayed but I don't have any ripple effect on click, is there an issue ?
The opacity doesn't seems to work as well..

Here is my code

<IconToggle color="paperGrey900" onPress={this.toggleFavorite}>
     <Icon name="star" size={50} color="#F8E71C" opacity={.6}/>
</IconToggle>

Thanks

Hi,

It would be great if you expose the sample apk(I see a project here, but add it to this repo in README or docs) of the sample project to the users. You can get more users to really have a feel of the app and start using it.

Few suggestions-

1. Create a robust example app with all features included
2. Release APK
3. Would it be to a good idea make the MaterialIcons a part of this repo itself?

I can also help with PRs. :)

Just started introducing the drawer into an existing project, so far it's UI only, I have not given it the navigator or hooked up with any navigation.

The drawer is part of a ViewA with a DrawerLayoutAndroid as root , clicking on a button on View A navigates to View B. View B does not have the drawer. Navigates back from ViewB to ViewA immediately crashes with the error shown in the following screenshot:

ViewA code:

    render() {
      return (
        <DrawerLayoutAndroid
          drawerWidth={300}
          ref={'DRAWER_REF'}
          drawerPosition={DrawerLayoutAndroid.positions.Left}
          renderNavigationView={() => <DrawerView  />}
        >
       .... some code that can navigate to ViewB
        </DrawerLayoutAndroid>
      );
  },

Drawer code:

'use strict';

import React, { Component, PropTypes, View, Text, Image } from 'react-native';
import { Avatar, Drawer, Divider, COLOR, TYPO } from 'react-native-material-design';

const styles = {
    header: {
        paddingTop: 16
    },
    text: {
        marginTop: 20
    }
};

var DrawerView = React.createClass({

    getInitialState() {
      return {
        route: null,
      };
    },

    render() {
      const { route } = this.state;

      return (

        <Drawer theme='light'>
                <Drawer.Header image={<Image source={require('./image/nav.jpg')} />}>
                    <View style={styles.header}>
                        <Avatar size={80} image={<Image source={{ uri: "http://facebook.github.io/react-native/img/opengraph.png?2" }}/>} />
                        <Text style={[styles.text, COLOR.paperGrey50, TYPO.paperFontSubhead]}>React Native Material Design</Text>
                    </View>
                </Drawer.Header>

                <Drawer.Section
                    items={[{
                        icon: 'home',
                        value: 'Welcome',
                        active: !route || route === 'welcome',
                        onPress: () => {},
                        onLongPress: () => {}
                    }]}
                />
        </Drawer>

      );
  },

});

module.exports = DrawerView;

If I change the <Drawer code to a <Text view, there is no crash with the same steps. I will try this in an isolated the project again later.

Any help is appreciated!

I have pull the Demo App (https://github.com/react-native-material-design/demo-app). Then i run npm install and react-native run-android. But after the SplashScreen became this Error:

Requiring module "DemoApp/src/stores/AppStore.js" which threw an exceptionhandleException @ ExceptionsManager.js:61 handleError @ InitializeJavaScriptAppEngine.js:80ErrorUtils.reportFatalError @ error-guard.js:28requireImpl @ require.js:42require @ require.js:32(anonymous function) @ index.android.js.js:1messageHandlers.executeApplicationScript @ debuggerWorker.js:18onmessage @ debuggerWorker.js:33 ExceptionsManager.js:61Module AppRegistry is not a registered callable module.

In my application I need a dropdown. Can you help tell me how to get dropdown using react-native material design

like this https://github.com/ManuelPeinado/FadingActionBar

and in the movie and music play store google app

is this possible ?

Since commit 71af73d, the in my project is showing up as square with border radius instead of circle. Is this behaviour intended?

Here is how I used the code:
avatar = <Avatar image = {<Image source = {require('../../everperform-common/assets/default-background.jpg')} />} style = {styles.avatarHeader} size = {110}/>

avatarHeader: { flex: 1 }

how can I remove the drawer icon if i am at my login screen? I would assume you do this with the current route state?

I'm finding it difficult to implement the Toolbar for a number of reasons:

• Alignment to conventions used by the FB version of Toolbar

onIconClicked() becomes onIconPress() for example is annoying
also style like below is giving me a warning about Invalid prop of type number

   header: {
     backgroundColor: '#F44336',
     height: 56,
   }

I understand why theme is introduced but styles should be supported (I do like the right icon style)

• Plugability.

Navigation convention used by the example is a bit complex. I tried just implementing my current drawer solution
onIconPress={() => this.drawer.openDrawer()}
without success. It fired a different action.

• No search bar solution

Am I wrong here? Does the Toolbar support inserting content besides icons and text? If so, I'd love to see it in the example.

I would like to contribute to this project but would like to hear if any of these concerns are shared. Great work otherwise!

Hi!

Are you planning to release an example app, possible following https://github.com/binggg/MaterialReactNative examples?

I see you changed a good bunch from original repo, it good be great to have examples (even over documentation).

Thanks!

I cloned the demo repo and installed the dependencies with npm. When running it on Android, I get a javascript error of undefined is not an object (elevating screenPhysicalPixels.width). Anyone know how to fix this? I haven't made any changes.

If I implement the Routing like in the demo in my App. I receive the following mistake. I have copied the src folder and no files changed. My index.android.js file looks as follows.

Can you help me?

index.android.js

import React, { Component } from 'react';
import {
  AppRegistry, Navigator, DrawerLayoutAndroid, ScrollView, View, Text
} from 'react-native';

import Navigate from './src/utils/Navigate';
import { Toolbar } from './src/components';
import Navigation from './src/scenes/Navigation';
import Welcome from './src/scenes/Welcome';

class App extends Component {
  static childContextTypes = {
    drawer: React.PropTypes.object,
    navigator: React.PropTypes.object
  };

  constructor(props) {
    super(props);
    this.state = {
      drawer: null,
      navigator: null
    };
  }

  getChildContext = () => {
    return {
      drawer: this.state.drawer,
      navigator: this.state.navigator
    }
  };

  setDrawer = (drawer) => {
    this.setState({
      drawer
    });
  };

  setNavigator = (navigator) => {
    this.setState({
      navigator: new Navigate(navigator)
    });
  };

  render() {
    const { drawer, navigator } = this.state;
    const navView = React.createElement(Navigation);

    return (
      <DrawerLayoutAndroid
        drawerWidth={300}
        drawerPosition={DrawerLayoutAndroid.positions.Left}
        renderNavigationView={() => {
                    if (drawer && navigator) {
                        return navView;
                    }
                    return null;
                }}
        ref={(drawer) => { !this.state.drawer ? this.setDrawer(drawer) : null }}
      >
        {drawer &&
        <Navigator
          initialRoute={Navigate.getInitialRoute()}
          navigationBar={<Toolbar onIconPress={drawer.openDrawer} />}
          configureScene={() => {
                            return Navigator.SceneConfigs.FadeAndroid;
                        }}
          ref={(navigator) => { !this.state.navigator ? this.setNavigator(navigator) : null }}
          renderScene={(route) => {
                        if (this.state.navigator && route.component) {
                            return (
                                <View
                                    style={styles.scene}
                                    showsVerticalScrollIndicator={false}>
                                  <route.component title={route.title} path={route.path} {...route.props} />
                                </View>
                            );
                        }
                    }}
        />
        }
      </DrawerLayoutAndroid>
    );
  }
}

AppRegistry.registerComponent('app', () => App);

const styles = {
  scene: {
    flex: 1,
    marginTop: 56
  }
};

i have tried the examples of this material design on github.io, but when i tried to use icons and checkbox, they couldn't be rendered, i restart the packager (npm restart) but still....

Hello, due to time issues with work and personal life, is there anyone out there willing to help contribute to this project? Quite a bit needs doing!

Guys, first of all: awesome project.
I'm just missing the Tabs Component which is a TabLayout implementation (I guess).
Any plans?

For example if you first check the first box

onSelect={(value) => {
            console.log('value', value);
          }}

will print out "value []"

And if you uncheck the box "value [0]" will be printed out

Hi,

I got error on Button when use master branch. Previously it's work on version 0.2.1.

import { Button } from 'react-native-material-design'
...
        <Button
          value='Login'
          raised={true}
          theme='dark'
          primary='googleRed'
          onPress={this.handleLogin.bind(this)}
        />

package.json

{
  "name": "foobar",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node_modules/react-native/packager/packager.sh"
  },
  "dependencies": {
    "apsl-react-native-button": "^2.3.0",
    "immutable": "^3.7.5",
    "moment": "^2.10.6",
    "react": "^0.14.3",
    "react-native": "^0.17.0",
    "react-native-drawer": "^1.10.1",
    "react-native-dropdown-android": "0.0.6",
    "react-native-gcm-android": "0.0.7",
    "react-native-image-picker": "^0.10.0",
    "react-native-image-progress": "^0.4.0",
    "react-native-material-design": "git+https://github.com/react-native-material-design/react-native-material-design.git",
    "react-native-modalbox": "^1.2.4",
    "react-native-progress": "^2.2.0",
    "react-native-radio-buttons": "^0.6.0",
    "react-native-redux-router": "^1.0.5",
    "react-native-simple-store": "^0.1.0",
    "react-pure-render": "^1.0.2",
    "react-redux": "^3.1.2",
    "redux": "^3.0.5",
    "redux-logger": "^2.3.1",
    "redux-thunk": "^1.0.2"
  },
  "devDependencies": {}
}

Tested with Genymotion Samsung Galaxy S3 4.1.1 API 16
OS: Win 8.1 32bit

the default icontoggle's background color is transparent, is it possible to give a custom background color of icontoggle?

Great work on this, looks fantastic.

The ripple effect on the buttons seems quite slow. Is this using the native Android button styling to create that effect? To achieve visual feedback on the button you have to press and hold for < 1 second. If you tap the button you get no visual cue.

It's not a huge problem merely a styling issue it seems.

https://github.com/react-native-material-design/react-native-material-design/blob/master/lib/Avatar.js#L56
Because the avatar wrapper view is flexible, it can't be aligned at the place where this component is used.

This is also why the demo app had to use a paddingTop instead of justifyContent: center for making the avatar look like it's in the center.

Even if we keep the wrapper view flexible, at least it should align and justify the children.

Position of ripple is not properly set.

Unrecognized font family 'Roboto,Noto,sans-serif'

• ~~Swap out Ripple component with TouchableNativeFeedback.~~042c897
• Create a generic CircularRipple component (for Checkboxes & Radio Buttons) 32a7dc9
• Convert IconButton to IconToggle as per spec 32a7dc9
• Raised Buttons should have elevation - (spec) 042c897
• Toolbar should have 4dp elevation by default - (spec) 4a2b598
• Drawer menu items are not centered 7c8fef9
• Drawer menu items should support labels 917803f
• Drawer menu items should be broken into sections to allow for proper padding - (spec) b8ccf01
• Drawer should respond to theme changes correctly b8ccf01
• Refactor List component & add to demo Moved to 0.4.0 release
• Avatar should support Image component as a prop, rather than only external images d038043
• Improve counter styling/positioning on IconButton/IconToggle 32a7dc9
• Ensure backward API compatibility with Ripple components (#11) ea38639

I receive the following error:
Uncaught TypeError: Super expression must either be null or a function, not undefined

My index.android.js:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import { Card, Button} from 'react-native-material-design';

class app extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('app', () => app);

I use your same demo code with latest version but Icon not loaded on my app..please help me

 "dependencies": {
    "@remobile/react-native-splashscreen": "^1.0.3",
    "alt": "^0.18.4",
    "native-base": "^0.3.1",
    "react": "^0.14.8",
    "react-native": "^0.25.1",
    "react-native-action-button": "^1.1.5",
    "react-native-android-statusbar": "^0.1.2",
    "react-native-icons": "^0.7.1",
    "react-native-material-design": "https://github.com/react-native-material-design/react-native-material-design-styles.git",
    "react-native-material-design-styles": "^0.2.6",
    "react-native-navigation-bar": "^0.1.10",
    "react-native-scrollable-tab-view": "^0.4.3",
    "react-native-vector-icons": "^2.0.3"
  },

The ripple effect is using the wohle screen while animating.

Sometimes the the Animation still remains on the screen.

Example: https://i.imgsafe.org/80eb024.jpg

I created my own branch to test the demo on iOS because the known compile problems with alt.
If someone want to give a shot ( https://github.com/duketwo/demo-app )

the demo app relies on alt,
however since React-native-18 (or higher) alt conflicts with react-native via fbjs
I had submitted a bug report to alt, they had closed it, however their suggested workaround does not work

goatslacker/alt#622

not sure if other folks running into the problem with the demo app

Cannot resize button size with width or height.

<Button
            style={[styles.button, {width: 200}]}
            value={'No'}
            raised={true}
            />

var styles = StyleSheet.create({
button: {
    width: 100,
    height: 100,
    padding: 20
  }
});

Buttons do not resize for some reason. I'm pretty sure I'm doing it the wrong way, but can't seem to find any documentation on it (or the raised property).

I tried this code but the color doesnt change from the default blue.
Button value="LOGIN" raised={true} theme='dark' overrides={true} backgroundColor='#3fffff'
@Ehesp could you help me here?

Just noting it down here so that this can be a part of 0.4.0 release.

The left menu Drawer doesn't have the ripple effect yet.

Once the common component for ripple(I see there is some code re-factoring done in 0.3.0) is complete, we can use the same here.

From the spec-

Since 0.25, React API must be imported from 'react', not 'react-native':

https://github.com/facebook/react-native/releases/tag/v0.25.1

That creates warnings and will break in 0.26.

Hi,

I have a problem when trying to run this in my app. When I'm not importing 'react-native-material-design', my app is working well - but when I'm adding import, my app crashes (packager transforming 461/463 and stopping in this place, and on phone I can see "Unable to download JS bundle").
I'm new in react native, and I'm working on android only. If someone can help me I will be grateful.

Hi,

Just to let you know, there are some issues in Release 0.3.4.

The first one :
bd07132#commitcomment-17380864

After added the {:
bd07132#commitcomment-17380935

Thank's
#55

Can the default color for the Icon component be something other than white/black? Currently it is white, which can be a bit confusing to some. As most default apps are created with a white background and it may appear to some users that the Icon component is not working due to this.

What do you think?

Hey, I'm using the demo app and I think there's an issue with the effect. The Button seems to be not responsive at all.
Source: https://github.com/react-native-material-design/demo-app/blob/master/src/scenes/Buttons.js