Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Question: Is it possible to toggle active Theme at runtime? #1714

kewilson opened this Issue Jan 13, 2019 · 3 comments


None yet
2 participants
Copy link

kewilson commented Jan 13, 2019

Hi all,

Wondering if toggling the active theme during run time at a global level is possible? I only want to wrap the entire app and control the theme in use once as the general idea is shown below.

Thanks for any thoughts, workarounds, suggestions to achieve the objective in advance .. much appreciated!

Using "react-native-elements": "git+"

Is your feature request related to a problem? Please Describe.

Unable to toggle between predefined light/dark themes at run time.

Describe the solution you'd like

Would like the ability to toggle the active theme via user control.

Describe alternatives you've considered

Only having a single theme.

Additional context

const LIGHT_THEME = { ... }
const DARK_THEME = { ... }

export default class App extends React.Component {
state = {
events: filterEvents(moment()),
isLoadingComplete: false,
lightTheme: true,
currentTheme: LIGHT_THEME,

toggleTheme = () => {
    this.setState({lightTheme: !this.state.lightTheme})
    if (this.state.lightTheme === true){
        this.setState({currentTheme: LIGHT_THEME})
        this.setState({currentTheme: DARK_THEME})

render () {
    return (
        <ThemeProvider theme = {this.state.currentTheme}>
            <Button onPress={() => this.toggleTheme()} />


@kewilson kewilson changed the title Toggle Theme at runtime Question: Is it possible to toggle active Theme at runtime? Jan 14, 2019


This comment has been minimized.

Copy link

iRoachie commented Jan 14, 2019

Currently right now this isn't possible. The ThemeProvider doesn't allow runtime changes to it's props. This is because changes to the props of the ThemeProvider will trigger a rerender for all components under the tree.

You can however use the withTheme HOC or ThemeConsumer directly to access the updateTheme method.


This comment has been minimized.

Copy link

kewilson commented Jan 14, 2019

Yeah, I'm sure I just did it wrong but, tried wrapping ThemeConsumer around my ThemeProvider. Also tried fiddling with the updateTheme but again I'm sure I wasn't doing it correctly. Will noodle on those a bit more to see if I can come up with something that'll do the deed, thanks!

@kewilson kewilson closed this Jan 14, 2019


This comment has been minimized.

Copy link

iRoachie commented Jan 14, 2019

Here's a small example

import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { Constants } from 'expo';

// or any pure javascript modules available in npm
import { Button, withTheme, ThemeProvider } from 'react-native-elements';

const theme = {
  colors: {
    primary: 'red',

const AppText = withTheme(({ updateTheme }) => (
  <View style={styles.container}>
      onPress={() =>
          colors: {
            primary: 'pink',

export default () => (
  <ThemeProvider theme={theme}>
    <AppText />

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.