react native header button doesn't work as expected

Question

I'm new to react native and trying out some same code from this online tutorial

per the tutorial, in the index.tsx i added this code to show a button in the header

useEffect(() => {
    navigation.setOptions({
        headerRight: () => {
            <TouchableOpacity onPress={focusMap}>
                <View style={{ padding: 10 }}>
                    <Text>Focus1</Text>
                </View>
            </TouchableOpacity>
        },
    });
}, []);

which does not show the text, so i copied the code from the code repository as shown below which works

useEffect(() => {
    navigation.setOptions({
        headerRight: () => (
            <TouchableOpacity onPress={focusMap}>
                <View style={{ padding: 10 }}>
                    <Text>Focus2</Text>
                </View>
            </TouchableOpacity>
        )
    });
}, []);

i don't see any difference between the two code segments, any pointers on what i am missing here ?

Answer 1

Yes, there is a mistake in your code you have used '{' instead you need to use this '('. Other than that your code is correct.

useEffect(() => {
    navigation.setOptions({
        headerRight: () => {   // you have used '{'instead you need to use this '('
            <TouchableOpacity onPress={focusMap}>
                <View style={{ padding: 10 }}>
                    <Text>Focus1</Text>
                </View>
            </TouchableOpacity>
        },
    });
}, []);