Themes not getting updated at runtime

[shubhi15]

Hello I have tried example https://github.com/vitalets/react-native-extended-stylesheet/tree/master/examples/theming

But it is only updating variables if styles are specified as inline styles. within component If styles within component is referenced from outside files then styles are not getting updated even after re-rendering of component.

Regards shubhi

[vitalets]

hi @shubhi15 !

could you show how you changed the example so it stopped to work?

[shubhi15]

I am using it in similar way as described in example but it is not working with referenced styles but works well with inline styles

[vitalets]

Please, show the code. What do you mean under "referenced styles" and "inline styles".

[shubhi15]

Hello PFB code i am using for dynamically updating themes: In this inline style text box color is updated if i click ob change theme but ouside style text box color not getting updated.

import lightTheme from '../commonStyles/light';
import darkTheme from '../commonStyles/dark';

EStyleSheet.build(lightTheme);

class CategoryScreen extends Component {

  constructor() {
    super();
    this.state = {
      render: true
    };
  }

  changeTheme(darkTheme, lightTheme) {
    const theme = EStyleSheet.value('$theme') === 'light' ? darkTheme : lightTheme;
    let ss = EStyleSheet.build(theme);
    this.setState({ render: false }, () => this.setState({ render: true }));
  }

  render = () => {
    return (
      <Container>
        <View>

         <Text style={styles.buttonTransparent}>
            outside style
          </Text>

        </View>
        <View>
          <Text style={{
            padding: 12,
            paddingLeft: 17,
            fontSize: 16,
            color: EStyleSheet.value('$primaryTextcolor')
          }}>
            iniline style
          </Text>
          <Text onPress={() => this.changeTheme(darkTheme, lightTheme)}>>
           Change Them
          </Text>
        </View>
        {/* <FlatList
          data={this.props.categoryArr}
          renderItem={({ item }) =>
            <CardComponent cardObject={item} navigateToImageTab={() => this.props.navigateToImageTab(item)} >
            </CardComponent>}
        /> */}
      </Container>
    );

  }
}

[vitalets]

Seems you should check state.render flag inside render() and return null to actually re-render component. Otherwise React caches component tree and does not update styles:

render = () => {
    if (!this.state.render) {
        return null;
    }
    return (
      <Container>
        <View>
    ...

Feel free to reopen if it does not help. I also created expo example for testing themes: https://snack.expo.io/HyujGlKcf

[shubhi15]

Nope theme is still not updating.... :(

[vitalets]

@shubhi15 Could you modify my expo example with your code to demonstrate it?

[edsonayllon]

Having the same problem. Styles stay with the dimensions they were loaded into with, even after refreshing the component, when the stylesheet had been made external.

[vitalets]

@eayllon1 Could you show a demo code of problem?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[pgonzalez-santiago]

Same problem here.

[guopeng1994]

so ? any update?

[vitalets]

Please provide the details: sample code / expo snack showing the problem. Otherwise it is impossible to help.

[swizes]

Changing return of the screen to null is not a solution, it is just a dirty fix. A normal theme change should be smooth not like displaying nothing and re-displaying with changed theme...