React-navigation doesn't change header color programatically on change

Question

I have a expo app written with react-navigation ^3.12.0 I have a theme selection on my app, meaning you can click on color circle, and every screen on the app will have the background color whatever you chose, however the react-navigation doesn't change the header color, react-navigation only changes color accordingly if you navigate to different screen and go back to the screen where you can choose theme colors.

This is my code.

class AccountScreen extends Component {
    static navigationOptions = ({navigation}) => {
        const {params} = navigation.state;
        return {
            title: navigation.getParam("otherParam", "Account"),
            headerTintColor: "white",
            headerStyle: {
                elevation: 0,
                shadowOpacity: 0,
                borderBottomWidth: 0,
                backgroundColor: navigation.getParam("themeBackgroundColor"),
            },
            headerLeft: (
                < TouchableOpacity
            style = {
        {
            paddingLeft: 15
        }
    }
        onPress = {()
    =>
        navigation.dispatch(DrawerActions.toggleDrawer())
    }
    >
    <
        Feather
        name = "arrow-left"
        size = {24}
        color = "#ffffff" / >
            < /TouchableOpacity>
    ),
        headerRight: <
        View
        style = {
        {
            flexDirection: "row"
        }
    }><
        /View>,
    }
        ;
    };

    constructor(props) {
        super(props);
        this.state = {
            loading: false,
        };
    }

    componentDidMount() {
        // https://github.com/facebook/react-native/issues/12981
        YellowBox.ignoreWarnings(["Setting a timer"]);
        const {theme, navigation} = this.props;
        navigation.setParams({
            themeBackgroundColor: theme.backgroundColor,
        });
    }

    render() {
        renderItem = ({item}) => (
            < TouchableOpacity
        onPress = {()
    =>
        this.props.setTheme(item.key)
    }>
    <
        View
        style = {
            [
                style.itemContainer,
        {
            backgroundColor: item.backgroundColor,
        }
    ,
    ]
    }
        />
        < /TouchableOpacity>
    )
        ;
        return (
            < FlatList
        style = {
            [
                style.container,
        {
            backgroundColor: this.props.theme.backgroundColor
        }
    ,
    ]
    }
        data = {this.props.themes}
        numColumns = {3}
        contentContainerStyle = {
        {
            flexGrow: 1,
                justifyContent
        :
            "center",
                left
        :
            "14%",
        }
    }
        renderItem = {renderItem}
        />
    )
        ;
    }
}

Do I need to use redux? Please advise.

Edit: This is where i handle color selection

  this.props.setTheme(item.key)}>

user_13897065 · Answer

Ciao, try to modify your code like:

static navigationOptions = ({ navigation }) => {
const {params} = navigation.state;
return {
  ...
  headerStyle: {
    ...
    backgroundColor: navigation.getParam('BackgroundColor', '#ED2525'),  // replace themeBackgroundColor with BackgroundColor
    // #ED2525 is a default value, you can remove it if you don't need
  },
  ...
};
};

Then on componentDidMount:

componentDidMount() {
    // https://github.com/facebook/react-native/issues/12981
    YellowBox.ignoreWarnings(["Setting a timer"]);
    const {theme, navigation} = this.props;
    navigation.setParams({
        BackgroundColor: theme.backgroundColor,
    });
}

Should solve your problem.

React-navigation doesn't change header color programatically on change

1 Answers