react-native-navigation-drawer-layout
react-native-navigation-drawer-layout copied to clipboard
Published
20 hours ago •
gaetanozappi
gaetanozappi
Can State Manipulation happen in NavigationDrawerLayout account parameters?
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'], }, ]} ... ></NavigationDrawerLayout>
Hi @Seunope , I didn't quite understand what you would like to do. Could you be more detailed and provide a more understandable code example of what you would like to do, in order to give you more support?
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({});