Theming for React Native using react native ui kitten

Question

I am trying to use the react-native-ui-kitten for react native components and its working great. Lately I wanted to add theming in my app and to do that I used their 'RkTheme' and 'RkType' but none is working.

Expectation - setting the theme using RkTheme.setTheme(themeJson) should change the styling of elements already rendered on the screen

Actual - setting the theme using RkTheme.setTheme(themeJson) is not changing the style of the already rendered componenets.

Below is a part of package json

  "dependencies": {
"prop-types": "^15.6.1",
"react": "16.2.0",
"react-dom": "^16.3.1",
"react-native": "0.51.0",
"react-native-linear-gradient": "^2.4.0",
"react-native-popup-menu": "^0.9",
"react-native-ui-kitten": "3.1.2",
"react-native-vector-icons": "^4.6.0",
"react-navigation": "1.0.0-beta.11",
"react-redux": "^5.0.7",
"realm": "^2.15.3",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
"util": "^0.11.0",

},

Sample code for the react component

    import React from 'react'
import { StyleSheet, Text, View, Image, Button , TouchableOpacity} from 'react-native'
import {applyTheme} from '../config/bootstrap'
import {RkStyleSheet, RkTheme} from 'react-native-ui-kitten'
import { LightTheme } from '../config/lightTheme';
import { DarkTheme } from '../config/darkTheme';
export default class Sample extends React.Component {
  constructor(props){
    super(props)
    this.changeTheme = this.changeTheme.bind(this)
  }
  changeTheme(theme){
    if(theme){
      RkTheme.setTheme(DarkTheme,null)
    } else {
      RkTheme.setTheme(LightTheme,null)
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <Text>Sample</Text>
        <TouchableOpacity  onPress = { (e) => this.changeTheme(false) }>
          <Text style={styles2.button1}>Apply Light</Text>
        </TouchableOpacity>
        <TouchableOpacity   onPress = { (e) => this.changeTheme(true) }>
          <Text style={styles2.button1}>Apply Dark</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
})
const styles2 = RkStyleSheet.create(theme => ({
  button1 : {
    color : theme.colors.secondaryColor
  }
}))

What is the second parameter on your method RkTheme.setTheme(DarkTheme,null)? — Felix Too
– Felix Too, Commented Oct 14, 2018 at 11:31
Thanks for your reply. I checked the 'setTheme' method in the library. It has only one parameter. I used both parameters because thats how they have done in one of their demo apps. RkTheme.setTheme(DarkTheme, null) and RkTheme.setTheme(DarkTheme) both are not working — Anurag Thakur
– Anurag Thakur, Commented Oct 14, 2018 at 14:20
I had a look at the .setTheme() and it does a merge of the existing theme and the new one. I don't know what the effect of that could be. — Felix Too
– Felix Too, Commented Oct 14, 2018 at 17:05
Had you come across their main docs? Your method should work as per this doc [1]: akveo.github.io/react-native-ui-kitten/#/docs/quick-start/theme — Felix Too
– Felix Too, Commented Oct 14, 2018 at 17:14
In their demo app the link to which is available at github.com/akveo/kittenTricks/blob/master/README.md changing theme changes the styles of the components in real time. I tried using the same code posted in my question in their demo app and it was working just fine. It was changing the color of text of 'Apply Light' and 'Apply Dark' as soon as i pressed them. The only difference i see in my and their code is that they are using expo react native sdk and I'm using react native from npm. — Anurag Thakur
– Anurag Thakur, Commented Oct 15, 2018 at 2:03

Anurag Thakur · Accepted Answer · 2018-10-15 19:04:51Z

1

We need to add 'withRkTheme' to the components that we suppose will change the theme colors in real time after changing theme. Also important point to note is that if we are using any other custom components in the render function of the root component, the custom components should extend 'RkComponent' instead of 'React.Component'. This Alone fixed my issue.

answered Oct 15, 2018 at 19:04

Anurag Thakur

211 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Theming for React Native using react native ui kitten

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related