xotahal / react-native-material-ui Goto Github PK
View Code? Open in Web Editor NEWHighly customizable material design components for React Native
License: MIT License
Highly customizable material design components for React Native
License: MIT License
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...
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.
When we implement styles as global object that is passed in via context, we can use it everywhere in the application.
We need better documentation and demo app
If you think something should be done differently, I am very open to constructive criticism.
Although this version is under reconstruction, consider to use it, because current version will be outdated in couple of weeks.
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.
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
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.
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!
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.
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
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.
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.
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
.
Hi! The toolbar with search looks useful, are you planning on making a PR to the original repository?
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}} />
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?
Hi.
Just a small note to include for ListItem
's documentation.
Pulled my hair apart for a few hours with this one.
Thanks!
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?
Toolbar searchble
How reset??
Clicking button's label makes the effect start at [0,0]
Demo: http://screencast.com/t/rZSFylq2s6R7
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?
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.
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
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';
Hi. Thanks for this cool project!
Just a quick question.
Thanks!
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.
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.
Want to try use react-native-web. Check this Issue in react-native-material-kit.
I just remove the line cause it will fire up a not a function on backButtonListener.remove();
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?
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
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! ๐
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!
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 ๐ฟ )
There should be unit tests for components
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.
After the installation when trying to first run the app i am getting this Error:
TypeError: undefined is not a function (evaluating 'remoteModules.forEach')...
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
See #52
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.
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.
Needs better documentation
Seems onCheck={this.onPress}
missed in render
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!
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" :)!
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.