-
Notifications
You must be signed in to change notification settings - Fork 7
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Can State Manipulation happen in NavigationDrawerLayout account parameters? #7
Comments
Hi @Seunope , |
I am getting a user name, email, and profile image from the server. I set the state when data is returned from the server but I observed that though the state has been updated it does not reflect on NavigationDrawer. I am not sure if I did something wrong OR the NavigationDrawerLayout account parameters do not support state updates. Thank you. import * as React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import NavigationDrawerLayout from 'react-native-navigation-drawer-layout';
export default class App extends React.Component {
constructor() {
super();
this.state = {
menu: '',
type: '',
userEmail: null,
userName: null,
userImage: null,
};
}
async componentDidMount() {
var data = await someApiCall('user-data');
if (data.status == 200) {
this.setState({userName: data.userName,
userEmail: data.userEmail,
userImage: datat.userImage});
} else if (data.Error) {
console.log('somethig got broken');
}
}
render() {
return (
<NavigationDrawerLayout
percent={75}
//statusBar="#008cff"
//statusBarTransparency={0.3}
type={this.state.type}
drawerPosition="left"
selected="opt0"
window="menu"
color="#fff"
backgroundColor="#fff" //303030
imageBackground={{ uri: "https://c.wallhere.com/photos/aa/44/glare_colorful_bright_circles-679384.jpg!d" }}
first={'username'}
second={'joined'}
account={[
{
username: 'james.bond',
name: {this.state.userName},
email: {this.state.userEmail},
image:
{{ uri: {this.state.userImage} }},
joined: 'Joined at Jun 21, 2021',
badgeText: '100',
badgeColor: '#fff',
badgeBackground: '#303030',
circle: ['transparent', 'transparent'],
},
]}
badgeFunction={e => {
return e > 99 ? '99+' : e;
}}
menu={[
{
type: 'menu',
name: 'opt0',
title: 'Le mie app e i miei giochi',
icon: 'apps',
colorText: '#000',
colorTextFocus: '#4CAF50',
colorIcon: '#c1c1c1',
colorIconFocus: '#4CAF50',
background: 'transparent',
backgroundFocus: '#e8e8e8',
badgeText: '100',
badgeColor: '#fff',
badgeBackground: '#1194ff',
},
{
type: 'menu',
name: 'opt1',
title: 'Le mie notifiche',
icon: 'add-alert',
colorText: '#000',
colorTextFocus: '#607D8B',
colorIcon: '#c1c1c1',
colorIconFocus: '#607D8B',
background: 'transparent',
backgroundFocus: '#e8e8e8',
badgeText: '31+',
},
{
type: 'menu',
name: 'opt2',
title: 'Abbonamenti',
icon: 'refresh',
colorText: '#000',
colorTextFocus: '#607D8B',
colorIcon: '#c1c1c1',
colorIconFocus: '#607D8B',
background: 'transparent',
backgroundFocus: '#e8e8e8',
},
{ type: 'divider' },
{
type: 'title',
title: 'App Google',
colorText: '#000',
},
{
type: 'menu',
name: 'opt3',
title: 'Home page',
icon: 'home',
colorText: '#000',
colorTextFocus: '#4CAF50',
colorIcon: '#4CAF50',
colorIconFocus: '#4CAF50',
background: 'transparent',
backgroundFocus: '#e8e8e8',
},
{
type: 'collapse',
name: 'opt4',
title: 'Film',
iconCollapsingName: 'local-movies',
iconColor: "#ccc",
colorText: '#000',
colorTextFocus: '#4CAF50',
colorIcon: '#f44336',
colorIconFocus: '#f44336',
background: 'transparent',
backgroundFocus: '#e8e8e8',
menu: [
{
name: 'sub0',
title: "Apri l'app Film",
icon: 'film',
colorText: '#000',
colorTextFocus: '#f44336',
colorIcon: '#f44336',
colorIconFocus: '#f44336',
background: 'transparent',
backgroundFocus: '#e8e8e8',
},
],
},
{
type: 'collapse',
name: 'opt4',
title: 'Libri',
showOnStart: true,
rippleColor:"#000",
backgroundBarNormal: "#545a63",
backgroundBarFocus: "#22252A",
iconBarNameNormal: 'book',
iconBarNameFocus: 'book',
iconBarColorNormal: "#1194ff",
iconBarColorFocus: "#ffb600",
textBarColorNormal: "#1194ff",
textBarColorFocus: "#ffb600",
animateIconColorNormal:"#1194ff",
animateIconColorFocus:"#ffb600",
iconColor: "#ccc",
colorText: '#000',
colorTextFocus: '#4CAF50',
colorIcon: '#f44336',
colorIconFocus: '#f44336',
background: 'transparent',
badgeText: "100",
badgeColor: "#fff",
badgeBackground: "#1194ff",
badgeRadius: 4,
badgeStyle: {},
menu: [
{
name: 'sub1',
title: "Apri l'app Libri",
icon: 'book',
colorText: '#000',
colorTextFocus: '#2196F3',
colorIcon: '#2196F3',
colorIconFocus: '#2196F3',
background: 'transparent',
backgroundFocus: '#e8e8e8',
badgeText: '100',
badgeColor: '#fff',
badgeBackground: '#1194ff',
badgeRadius: 4,
close: true
},
],
},
{ type: 'divider' },
{
type: 'menu',
name: 'opt9',
title: 'Account',
icon: 'person-pin',
colorText: '#000',
colorTextFocus: '#607D8B',
colorIcon: '#c1c1c1',
colorIconFocus: '#607D8B',
background: 'transparent',
backgroundFocus: '#e8e8e8',
},
{
type: 'menu',
name: 'opt10',
title: 'Utilizza codice',
icon: 'code',
colorText: '#000',
colorTextFocus: '#607D8B',
colorIcon: '#c1c1c1',
colorIconFocus: '#607D8B',
background: 'transparent',
backgroundFocus: '#e8e8e8',
},
{
type: 'menu',
name: 'opt11',
title: 'Lista desideri',
icon: 'check-circle',
colorText: '#000',
colorTextFocus: '#607D8B',
colorIcon: '#c1c1c1',
colorIconFocus: '#607D8B',
background: 'transparent',
backgroundFocus: '#e8e8e8',
},
{
type: 'menu',
name: 'opt12',
title: 'Play Protect',
icon: 'verified-user',
colorText: '#000',
colorTextFocus: '#607D8B',
colorIcon: '#c1c1c1',
colorIconFocus: '#607D8B',
background: 'transparent',
backgroundFocus: '#e8e8e8',
},
{
type: 'menu',
name: 'opt13',
title: 'Impostazioni',
icon: 'settings',
colorText: '#000',
colorTextFocus: '#607D8B',
colorIcon: '#c1c1c1',
colorIconFocus: '#607D8B',
background: 'transparent',
backgroundFocus: '#e8e8e8',
},
{
type: 'menu',
name: 'opt14',
title: 'Close Drawer',
icon: 'exit-to-app',
colorText: '#000',
colorTextFocus: '#607D8B',
colorIcon: '#c1c1c1',
colorIconFocus: '#607D8B',
background: 'transparent',
backgroundFocus: '#e8e8e8',
close: true
},
]}
changeAccount={e => {
console.log('Account:', e);
}}
onPress={e => {
this.setState({ menu: e.title });
var type = e.name == 'opt2' ? 'simple' : '';
this.setState({ type });
alert("Title:"+e.title+" - "+"Name:"+e.name);
console.log('Menu:', e);
}}>
<View
style={{
flex: 1,
//alignItems: 'flex-end',
}}>
<Text style={{ marginTop: 25, marginRight: 5 }}>Hello World!</Text>
<Text style={{ marginTop: 25, marginRight: 5 }}>
{this.state.menu}!
</Text>
</View>
</NavigationDrawerLayout>
);
}
}
const styles = StyleSheet.create({}); |
Environment
Mac OS 10:15.3
"react": "16.9.0",
"react-native": "0.61.5",
Description
I observe that I can not do state manipulation in the NavigationDrawerLayout account parameters. I want to use react native state to change the username and image variable found in the NavigationDrawerLayout account parameter. Is this possible with this package?
Demo
<NavigationDrawerLayout
...
account={[
{
username: this.state.name,
name: 'James Bond',
email: '[email protected]',
image: this.state.imagePath,
joined: 'Joined ' + this.state.dateJoined,
badgeText: '100',
badgeColor: '#fff',
badgeBackground: '#303030',
circle: ['transparent', 'transparent'],
},
]}
...
>
The text was updated successfully, but these errors were encountered: