invertase / react-native-material-design Goto Github PK
View Code? Open in Web Editor NEWReact Native UI Components for Material Design
Home Page: http://react-native-material-design.github.io
License: MIT License
React Native UI Components for Material Design
Home Page: http://react-native-material-design.github.io
License: MIT License
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:
mobile: Samsung galaxy S4
Oh and thanks for your great work btw. this project is awesome. :)
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
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.
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.
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 }
the default icontoggle's background color is transparent, is it possible to give a custom background color of icontoggle?
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 )
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
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
I'm finding it difficult to implement the Toolbar for a number of reasons:
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)
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.
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!
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?
how is done? thanks
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.
Position of ripple is not properly set.
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
}
};
Guys, first of all: awesome project.
I'm just missing the Tabs Component which is a TabLayout implementation (I guess).
Any plans?
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.
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
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!
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!
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}
/>
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!
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
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 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);
In my application I need a dropdown. Can you help tell me how to get dropdown using react-native material design
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).
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?
Unrecognized font family 'Roboto,Noto,sans-serif'
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
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
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
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?
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"
},
How does this differ from mrn? Is mrn not actively maintained anymore?
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-
I can also help with PRs. :)
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
not sure if other folks running into the problem with the demo app
like this https://github.com/ManuelPeinado/FadingActionBar
and in the movie and music play store google app
is this possible ?
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.
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.
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?
This list is a work in progress
Ripple
component, which handles device typeTouchableWithoutFeedback
on polyfil/Ripple
to properly handle onLong press and other props.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
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.