Get object data into header (react native)

Question

I want to get my object data to header. I parse object data in my componentWillMount() and store it in navigation.setParams(userJSON: object).

My problem is I can see data in header if I just print it as JSON.stringify(object), but when I want to display it as object.name there is a problem..

My code:

componentWillMount() {
    const {
        setParams
    } = this.props.navigation;

    AsyncStorage.getItem('user', (err, result) => {
        this.setState({
            user: JSON.parse(result),
        });

        var obj = JSON.parse(result);

        this.props.navigation.setParams({
            userJSON: obj,
        });

    });

}

Header:

static navigationOptions = ({ navigation }) => ({
    headerTitle: "Tab1",
    headerLeft: (
        <View style={styles.oval}>
            <Text>{JSON.stringify(navigation.getParam('userJSON'))}</Text>
        </View>
    ),
    headerRight: (
      <View style={styles.headerRight}>
        <TouchableOpacity
            title="Ok"
            onPress={() => navigation.navigate('MyProfil')}>
            <View style={styles.circle}>
                <Text style={styles.txtInside}>
                {
                    navigation.getParam('userJSON').name + ''
                    + navigation.getParam('userJSON').lastname
                }
                </Text>
            </View>
        </TouchableOpacity>
      </View>
    )
});

My object is:

{
    id:86163
    lastname:Api
    name:Api
    email:api@eeee.com
    user:api
}

try this `JSON.parse(navigation.getParam('userJSON')).name` – Ravi Jul 19 '18 at 09:33 — Ravi, Jul 19 '18 at 09:33
Same error: Unexpected identifier "undefined" ....:( – mkEagles Jul 19 '18 at 09:35 — mkEagles, Jul 19 '18 at 09:35

score 0 · Answer 1 · answered Jul 19 '18 at 10:05

0

The navigation object has a state property.

You can access the userJson by the following way:

navigation.state.params.userJSON

On initial load of the screen, the params object can be null if there are no params, so it's better to set a small validation:

static navigationOptions = ({ navigation }) => ({
    headerTitle: "Tab1",
    headerLeft: {
        let username = '';
        const { state } = this.props.navigation;

        if (state.params) {
            username = state.params.userJSON.name;
        }

        return (
            <View style={styles.oval}>
                <Text>{username}</Text>
            </View>
        )
    },
    headerRight: (
      ...
    )
});

You can check the following issue.

answered Jul 19 '18 at 10:05

Hristo Eftimov

13,845
13
50
77

Here is how to fix the problem: https://stackoverflow.com/a/42706706/2765346 The quick fix is to replace `state.params` with `this.props.navigation.state.params` and to remove `const { state } = this.props.navigation;` – Hristo Eftimov Jul 19 '18 at 11:37
any errors? Try to put your logic from `componentWillMount` into `setTimeout` with a delay `0` or `1`. Please check this issue - https://github.com/react-navigation/react-navigation/issues/1912#issuecomment-327791208 – Hristo Eftimov Jul 20 '18 at 07:22
If I do that I also get null...I dont know but it seems like that header is loaded faster than componentwillmount – mkEagles Jul 20 '18 at 07:31
try to change `componentWillMount` with `componentDidMount` – Hristo Eftimov Jul 20 '18 at 07:33
I think there is problem with my header :( Look at this: https://stackoverflow.com/questions/51436517/couldnt-get-param-in-my-tabs/51436803?noredirect=1#comment89844501_51436803 – mkEagles Jul 20 '18 at 07:42

score 0 · Answer 2 · answered Jul 19 '18 at 10:24

Here is how i achieved this I was also trying to get data from AsyncStorage and setting the header title. so my header looks like this

 static navigationOptions =({navigation,screenProps})=> ({
 title:typeof(navigation.state.params)==='undefined' || 
 typeof(navigation.state.params.title) === 'undefined' ? 'Loading': 
 navigation.state.params.title,
 headerTitleStyle: {textAlign:"center",alignSelf:"center"},


});

and in componentDidMount() you can set params like this.

var names = await AsyncStorage.getItem('names')
var conames =JSON.parse(names)
var name1 = conames[2]
this.props.navigation.setParams({ title: name1 })

score 0 · Answer 3 · answered Jul 19 '18 at 11:54

0

You could probably use REDUX for this purpose. Hope this link helps you.

https://reactnavigation.org/docs/en/redux-integration.html

answered Jul 19 '18 at 11:54

s.junaid

19
5

Get object data into header (react native)

My code:

Header:

My object is:

3 Answers3