xotahal / react-native-material-ui

Highly customizable material design components for React Native

React Native Material UI (iOS and Android supported)

Highly customizable material design components for React Native!

Documentation

• Getting Started
• Usage
• Demo & Examples
• Components

Showroom

Savee.io

iOS App & Android App

Reservio

iOS App & Android App

Questions

If you need anything ping us on twitter.

Jiri Otahal	Jan Ziemba

react-native-material-ui's Issues

Is iOS supported?

Hi. Thanks for this cool project!

Just a quick question.

Thanks!

[Button] Activity indicator

Hi,

Is it possible to add the activity indicator to the button component ? It could be very useful when creating a "login" button or "reload" button.

The indicator can be shown in the place the button icon when the indicator is turned on.

Thanks.

Text Fields

Any plans to implement text fields? https://material.io/guidelines/components/text-fields.html

I'm pretty new to RN, but have experience with react. I'd be willing to attempt a PR if interested.

Documentation: For ListItem, only centerElement supports setting primary/secondary text content.

Hi.

Just a small note to include for ListItem's documentation.

Pulled my hair apart for a few hours with this one.

Thanks!

undefined is not an object upon import

Hi! I wanted to try out your toolbar, but whenever I import something from your module, I'm getting undefined is not an object at create-icon-set.js line 46. I suppose it is due to the outdated dependencies when installing through npm. My Rn version is 0.26.2

Would be nice if you pushed your components to the original repo, so that the community could benefit from them..
thanks!

edit: installing from repo doesn't work for me, either :/
btw. the dependecies badge you are using (https://david-dm.org/react-native-material-design/react-native-material-design.svg) is for a different project.
edit2 not sure what the problem was, but when I clonned your repo locally and updated the icons dependency it worked. nice job indeed

Bug on Line 281 on Component Toolbar.react.js

I just remove the line cause it will fire up a not a function on backButtonListener.remove();

Toolbar searchble close?

Toolbar searchble
How reset??

Specify size of icon in toolbar left Element

I cannot specify the size of the icon by passing size in the props of the toolbar as follows

<Toolbar
    style={{ container: { elevation: 0 }, leftElement: {size: 30} }}
    leftElement='keyboard-arrow-left'
    centerElement={this._toolbarTitle()}
    rightElement={{
        actions: ['person-add', 'comment'],
        menu: { labels: ['Item 1', 'Item 2'] },
    }}
/>

the only way to change the size of the icon is when i change the global uiTheme spacing.iconSize, I looked in the code and you do take it into account in IconToggle but the passing of size in the leftElement props generates a failed prop type warning that states that size is an invalide key :), is this the correct way of changing the size of the icon or is there another way that I don't know about ? using version 1.3.2

Custom BottomNavigation icon

Hi! First, thanks for you work with this library.

Is there a way to use custom "icon" element instead of string?
Like this:

<BottomNavigation.Action
            key="tasks"
            icon={<MyCustomTaskIcon />}
            label="Tasks"
            onPress={() => {}}
/>

Or maybe this will be available in future?
(Also I hope, this feature will come to ActionButton component 😿 )

Missing Tabs component

First of all a big thanks for this amazing project. I'm going to use it for my next app but I see that missing the Tabs component It would be nice to have this component, any plans?

How to render the FAB?

First I would like to thank you for continuing this project from @Ehesp that was also forked from @binggg. I can see from your demo that you have a FAB working on the view, how'd you use that. I was looking for a documentation but just like the rest I think it has to be improve. But again thank you! 👍

Material Switch Button

I know there's an existing Switch component from react native. But the default switch does not allow you to change the background color when turned on nor the thumb tints color. On iOS though it's possible via onTintColor , thumbTintColor and tintColor.

[question] merging features back to original repo

Hi! The toolbar with search looks useful, are you planning on making a PR to the original repository?

npmjs version needs a bump

The npm version is outdated still uses the old way to get the React component like

import React from 'react-native';

instead of this

import React from 'react';

Drawer header account footer secondary text type error

when using a variable instead of raw text for this part of the drawer component there is an error saying that raw text should be in a component
This example can reproduce the problem with this.state.text being a string variable

                            <Drawer.Header.Account
                                avatar={<Avatar text={'A'} />}
                                accounts={[
                                    { avatar: <Avatar text="B" /> },
                                    { avatar: <Avatar text="C" /> },
                                ]}
                                footer={{
                                    dense: true,
                                    centerElement: {
                                        primaryText: 'Reservio',
                                        secondaryText: this.state.test,
                                    },
                                    rightElement: 'arrow-drop-down',
                                }}
                            />

Using latest version of react-native-material-ui

Can't set button height

I am trying to use a button and give it a bigger height but the style have no effect on the button's height:

<Button text='Call' raised icon='phone' style={{height: 120}} />

failed to build dependency graph

I have an error after having installed the module. When building the react-native app, the packager throws a naming collision error saying that there is a duplicate module. This is due to the fact that this module has react-native as a dependency, deleting the react-native folder in the node_modules of this module is a workaround but my question is, why do you need react-native as a dependency of this module, and by that I mean wouldn't be better to have it as a devDevendecy? Using npm 3.10.0, react-native 0.30.0, react-native-cli 1.0.0

Card don't have Media, Body and Action unlike example image

The example image displayed on the README has a Card with 3 parts in the Welcome screen:

Anyway, I can't get a similar render because Card components doesn't have these parts yet.

Web support

Want to try use react-native-web. Check this Issue in react-native-material-kit.

Hide other icons on toolbar when search icon is clicked

I am having 2 icons on the right side on toolbar. One as notification icon, second is the search icon set from searchable element in the Toolbar. I am wondering if it is possible to hide the notification icon when I click on search icon to search something.

Toolbar rightElement with badges

Hi!

Is there any way to add badges to the rightElement of the Toolbar element? In order to add elements I can use this:

<Toolbar
  rightElement={["notifications"]}
/>

This renders the notification icon properly, but I'd like to add a badge around it, and I could not find a way to do it. I found that I can pass an element to the rightElement prop, but then I lose the styles and looks weird:

<Toolbar
  centerElement='Toolbar'
  rightElement={<Badge text="3"><Icon name="notifications" /></Badge>}
/>

Could we have a way to do something similar to this?

<Toolbar
  rightElement={[{action: "notifications", badge: "3"}]}
/>

Thanks!

Customize badge background color

I could not find any option to change the badge background color. In the Badge class, it is defined to get the badge background color from palette.accentColor
In my case, I am keeping my badge on an icon which are on the toolbar. So the toolbar color and badge background color are picked both from the palette.accentColor.

Is there any option to change the badge background color?

[ActionButton] Label styles

As I see, currently is not possible to set styles for label's text

    renderLabelAction = (styles, icon, label) => (
        <View key={icon} style={styles.speedDialActionContainer}>
            <View style={styles.speedDialActionLabelContainer}>
                <Text>{label}</Text>
            </View>
            {this.renderAction(styles, icon)}
        </View>
    )

For example, I want to change label color to white, but currently I only can change label container styles.

Should I create PR for this?

Specify shape proptype for Card component

For Card.js

const propTypes = {
    children: PropTypes.node,
    onPress: PropTypes.func,
    style: PropTypes.object,
};

style needs a shape of a single container key.

props.style.container

Thanks!

Example on Drawer Header Account

Hi,
How to use header account on drawer. I just tried this code but still can't make it work

render() {
    const { routeName } = this.props;
    // @need to refactoring
    const iconAv = (
      <Avatar
        size={40}
        image={<Image
          source={{ uri: 'http://facebook.github.io/react-native/img/opengraph.png?2' }} />
        } />
    )
    return (
      <Drawer theme="light">


        <Drawer.HeaderAccount
          avatar={iconAv}
          onPress={() => this.props.navigateTo('avatars')}
          onRightIconPress={() => this.props.navigateTo('avatars')}
          primaryText="primaryText"
          rightIcon={iconAv}
          secondaryText="secondaryText"
          accounts={[{
            avatar: {iconAv},
            onPress: () => this.props.navigateTo('avatars')
          }, {
            avatar: {iconAv},
            onPress: () => this.props.navigateTo('avatars')
          }, {
            avatar: {iconAv},
            onPress: () => this.props.navigateTo('avatars')
          }]} />

        <Divider style={{ marginTop: 8 }} />

        <Drawer.Section
            .....

I got error Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of ....
Please help me. Thanks in advance...

Add documentation

Needs better documentation

Trouble initializing the Components

Hello, i am a new not experience user of React Native and i would like some help, about how could i use your Materials Ui components. Your demo is simply amazing!
Apparently at first, i have to create a new project and after i have to execute in

cmd npm i react-native-material-ui --save

and copy the fonts icons

./node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf -> ./android/app/src/main/assets/fonts.

After these steps i do not understand what exactly i have to do, to use your components. Could i use your demo like a starting project?

Thanks a lot and sorry if my questions are "dummy" :)!

Use TouchableOpacity for iOS RippleFeedback

RippleFeedback still currently only works for Android (as far as I can tell), and it would be nice to get some more-visible Button feedback for iOS.

I saw in this issue a suggestion to use TouchableOpacity like the @exponent/react-native-touchable-native-feedback-safe module does.

[BottomNavigation] pull request

See #52

TypeError:udefined is not a function

After the installation when trying to first run the app i am getting this Error:

TypeError: undefined is not a function (evaluating 'remoteModules.forEach')...

Menu and MenuController documentation

press is triggered even when finger is dragged away

Hi!
a usability issue: when using the toolbar, I noticed that when I tap a button (the search button for example) and then drag mi finger away, the button event is still triggered.

Unable to resolve module lodash/mege in styles/getTheme.js

I am trying to use react-native-material-ui in a new react-native project build with ignite but I get the following error:

I checked the getTheme.js file and it tries to import 'lodash/merge' yet this is not in dependencies. I also tried the solutions proposed below but none worked.

Add unit tests

There should be unit tests for components

ListItem: numberOfLines property is always set to one for primaryText

There should be a way to modify the numberOflines on the primary text. By default it's set to use 1 line. Unlike the secondary text it's customizable.

RadioButton does not work

Seems onCheck={this.onPress} missed in render

React Native Material UI - version 1.0.0 proposal

Ability to change style globally

There is ability to change style locally now - via props. Why we have problem with that? Consider changing of primary color (background color of all toolbars) or color of text in list item component. We can change it via props, everywhere where we use <Toolbar /> component or we can inherit <Toolbar /> component and use own implementation of Toolbar.

To achieve this feature we will use global style object that is passed in via context. So we can easily merge this object with our custom style object and change it globally for all components. Of course, we can still change style locally as well.

Already done

• Avatar
• Button
• Card
• Checkbox
• Dialog
• Divider
• Drawer
• Icon
• Icon toogle
• List item
• Radio button
• Subheader
• Toolbar

Ability to use styles outside of library

When we implement styles as global object that is passed in via context, we can use it everywhere in the application.

New components

• Float action button

Documentation and demo app

We need better documentation and demo app

If you think something should be done differently, I am very open to constructive criticism.

All changes are implementing

Although this version is under reconstruction, consider to use it, because current version will be outdated in couple of weeks.

Change proptype validation for Avatar image

Hi.

With the current proptye validation for Avatar, passing an <Image> element yields the following warning:

Warning: Failed prop type: Invalid prop `image.type` of value `function Image(props)...

Change to:

/**
 * If passed in, this component will render image.
 */
image: PropTypes.element,

Thanks!

LeftElement in Toolbar can be only icon name.

Hi,
Love your work btw.
However I tried putting custom view into leftElement in Toolbar Props but got error. I inspected your code and found out that no matter what, left element will be rendered as a IconToogle and props I sent there will be used as icon name. Either it's bug in proptypes where you should check only if leftElement is a string, or missing implementation of rendering custom element set via props.

Clicking button's label makes the effect start at [0,0]

Clicking button's label makes the effect start at [0,0]
Demo: http://screencast.com/t/rZSFylq2s6R7

Installation error: Super expression must be either null or a function not undefined

Hi guys,

Getting this issue when trying to import Toolbar:

super expression must be either null or a function not undefined

Doing it this way:

import { Toolbar } from 'react-native-material-ui'; in my component.

Any ideas?

Menu not working on ios

The Toolbar menu (as seen in the demo app) works on Android but not on IOS

Badge on icons?

Will there be support for the badge on the icons like we can see in the images on the readme?

This comes pretty handy for shopping cart items, or chat notifications, etc.

Merge opportunities

http://www.xinthink.com/react-native-material-kit
https://github.com/oblador/react-native-vector-icons (Material icons only)

Declare lodash as peer dependecy or document explicit requirement.

Hi. I just found out that I needed to declare lodash v4 in my top level package.json. Otherwise, getTheme.js will fail at runtime. Thanks!

Undefined is not an object (context.uiTheme.ActionButton)

I'm having an "Undefined is not an object" when trying to import ActionButton from react-native-material-ui in my code. I cloned the demo app and tried to run it and I got the same error, any ideas?

[update]
I tried cloning and using the demo app but It couldn't find the module had the same problem on the demo and resolved the issue on the demo by including react-native-material-ui as a dependency and replacing all the occurences of '../react-native-material-ui" by 'react-native-material-ui", trying to resolve the issues with importing in my own project

LIstItem center element not clickable

I am using a the Drawer and added items to it but I noticed that text part of the drawer content is not clickable, only the icon is. Is there a particular reason for that? I see in the ListItem code that only leftElement and rightElement have click events.
I would love to have this event on the centerElement as well.

[Toolbar] Only right element is specified

It's displayed on the left side

__DEV__ is undefined in index.js

Hello,

problem with undefined DEV variable in index.js appeared after I updated to version 1.3.2.

Problem seems to be when .babelrc was added in version 1.2.2 is there something I have to do when updating to 1.2.2+?

When I downgraded back to 1.2.0 everything works fine. RN version is 0.35.

[ListItem] does not render when onPress property is set

I tested out master and found that ListItem no longer renders on iOS when the onPress property is set. If I remove the onPress property, it renders correctly.

It appears to be happening when I use the commit for (#41),

npm install --save xotahal/react-native-material-ui#c37d6aa1cb4000d8607cc3a2f1723cb52d54a7c7

This is NOT a problem on version 1.5.0.