Nativebase: Is it possible to update the theme dynamically via StyleProvider?

[laukaichung]

I'm using the latest 2.012 version. I ran node node_modules/native-base/ejectTheme.js and cloned two themes from the platform theme, day and dark. The only difference between the day and dark themes is the text color.

dark.js
// Text textColor: '#ed2f2f', inverseTextColor: '#222', noteFontSize: 14,

day.js
// Text textColor: '#000', inverseTextColor: '#fff', noteFontSize: 14,

The first time the component is mounted, the theme works correctly. However, when I click on a button to dynamically update the theme from day to dark, the <Text/> component doesn't update the text color correspondingly.

The debug tool shows everything seems to be fine. The componentWillReceiveProps in StyleProvider manages to set the new theme state, but the Text component just doesn't update its style on theme change.

````
import * as React from "react";
import {Container, StyleProvider,Text} from "native-base";
import getTheme from './native-base-theme/components';
import dark from './native-base-theme/variables/dark';
import day from 'native-base-theme/variables/day';

@observer
export class Screen extends React.Component {
render() {
let theme = getTheme(mobxStore.getViewMode == 'dark'?dark:day)
return (

Some Text


)
}
}
````

[laukaichung]

Any help please? Is my approach the right way of doing it?

[shivrajkumar]

@stonecold123 Check out https://github.com/GeekyAnts/NativeBase-KitchenSink/tree/v2.0-alpha1
This might help

[sanketsahu]

This line to be specific:
https://github.com/GeekyAnts/NativeBase-KitchenSink/blob/v2.0-alpha1/js/AppNavigator.js#L321

On Wed, Apr 26, 2017 at 3:04 PM, shivrajkumar [e-mail]
wrote:

@stonecold123 https://github.com/stonecold123 Check out
https://github.com/GeekyAnts/NativeBase-KitchenSink/tree/v2.0-alpha1
This might help

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/GeekyAnts/NativeBase/issues/772#issuecomment-297319147,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABpzOVXtp3LnbTkFx4VBmP1DnfGTFdKVks5rzw-dgaJpZM4NFuLg
.

[laukaichung]

@shivrajkumar @sanketsahusoft
I only have an Android. Even though the theme variable has changed from 'day' to 'dark', the color still fails to update across the apps. I notice that in the kitchen sink demo, the theme switching function is only available on IOS. Does Android support it?

[sanketsahu]

@stonecold123 There is no point in supporting Platform and Material for Android as the Platform design of Android is actually the Material design.

[SupriyaKalghatgi]

Closing this issue due to inactivity
Please reopen if the issue continues

[Talor-A]

@SupriyaKalghatgi I'm having this issue as well could it get reopened? The theme does not update on any currently mounted components, only on ones that mount after the theme switches.

[SupriyaKalghatgi]

@Talor-A Can you post in here your code snippet along with RN and NativeBase versions?

[Talor-A]

@SupriyaKalghatgi is this related to #910 ?

[Talor-A]

So I've realized that this issue only happens when using themed components inside a react-navigation screen. is it something to do with react context?

[nikolai-katkov]

Having the same issue. May provide a gist if you'd like.

[elnygren]

I'd like to express interest in this too.

[cristianocca]

Resurrecting this fossil... But I'm interested in being able to switch the theme variable and have all components use this new theme. However, even if the root component (above StyleProvider) re-renders with a new theme, child components won't use the new theme

[ghost]

Experiencing this as well, portions of my components are updating, but not the entire thing. Some of my view tags re render, but not all within the same component? It makes no sense