I want to change state for username in drawer. After it is updated from update profile screen

Question

I have created drawer with contentComponent and in contentComponent there is a .js file for drawer design. Drawer contains username of and menu tabs.

Now i have a screen called update profile in it when the user name is updated at that time only the drawer should show updated user name. I have used state for username in Drawer.js

I have tried by passing the class's function called updateUsername('new name').

And using function like:

new Drawer().updateUsername('John')

but it doesn't work

   class Drawer extends Component {

    constructor(props) {
        super(props);
        this.state = {
           username:'',
       }
   }
componentWillMount(){
}

updateUsername(name){
this.setState({username:name})
 }

render() {
    return (
        <SafeAreaView style={styles.container}>
        <Text>{this.state.username}</Text>
        </SafeAreaView>
    );
}
}

export default Drawer


import Drawer from '../../screens/drawer/Drawer'
class TopBar extends Component {

_openDrawer() {  

this.props.navigation.dispatch(DrawerActions.openDrawer());
            new Drawer().updateUsername('John Deo')
    }

render() {
        return (

        <View style={{ height: 54, borderWidth: 0, flexDirection: 'row', borderBottomColor: Colors.colorBorder, borderBottomWidth: 0.2, shadowColor: Colors.colorBorder, backgroundColor: Colors.colorWhite, shadowOffset: { width: 0, height: 0, }, shadowOpacity: 0.9, shadowRadius: 0, elevation: 1 }}>
            <TouchableOpacity style={{ flex: 1.5, borderWidth: 0, justifyContent: 'center', alignItems: 'center' }} onPress={() => (this.props.isBack) ? this.props.navigation.goBack() : this._openDrawer()}>
                <Image source={{ uri: (this.props.isBack) ? 'back_icon' : 'menu_icon' }} style={{ height: 25, width: 25 }} resizeMode='center' />
            </TouchableOpacity>
            <View style={{ flex: 7, borderWidth: 0, justifyContent: 'center', alignItems: 'center' }}>
                <Text style={{ fontSize: 18, fontFamily: Fonts.ralewayBold, color: Colors.colorBlack }}>{this.props.topBarTextTitle}</Text>
            </View>
            <TouchableOpacity style={{ flex: 1.5, borderWidth: 0, justifyContent: 'center', alignItems: 'center' }} onPress={this.props.rightClick}>
                <Image source={{ uri: this.props.imageRight }} style={{ height: 25, width: 25 }} resizeMode='center' />
            </TouchableOpacity>

        </View>
    );
}
}
export default TopBar

Why are you creating new instance? Just pass it as props to Drawer component. — Sanyam Jain, Aug 08 '19 at 10:00
Okay if I pass the user name in props like then it will work i accept, but I can update username from AppStack.js only where i've defined as contentComponent. Then how can I change name from UpdateProfile.js because is in Appstack.js — Rana Digvijaysinh, Aug 09 '19 at 05:26

score 0 · Answer 1 · answered Aug 08 '19 at 12:19

0

your are setting username is state by updateUsername method! and using it from props!

<Text>{this.props.username}</Text>

replace this with:

<Text>{this.state.username}</Text>

answered Aug 08 '19 at 12:19

samad324

199
6

Sorry by mistake in asking quesition I wrote props but actually it is state only – Rana Digvijaysinh Aug 09 '19 at 05:27
in my view, the best approach for this, is `redux`! save your user name in `redux`! then get it in drawer in **componentWillRecieveProps** method! so when you update your user name in `redux` it will automatically update your drawer! – samad324 Aug 09 '19 at 06:07

I want to change state for username in drawer. After it is updated from update profile screen

1 Answers1