1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
import React from 'react';
import {
View,
Image,
StatusBar,
Platform,
} from 'react-native';
import {
RkText,
RkTheme,
RkStyleSheet,
} from 'react-native-ui-kitten';
import { DarkKittenTheme } from '../../config/darkTheme';
import { KittenTheme } from '../../config/theme';
import { GradientButton } from '../../components/gradientButton';
import { scale, scaleVertical } from '../../utils/scale';
export class Themes extends React.Component {
static navigationOptions = {
title: 'Theme'.toUpperCase(),
};
onLightThemeApplyButtonPressed = () => {
StatusBar.setBarStyle('dark-content', true);
if (Platform.OS === 'android') {
StatusBar.setBackgroundColor(KittenTheme.colors.screen.base);
}
RkTheme.setTheme(KittenTheme);
};
onDarkThemeApplyButtonPressed = () => {
StatusBar.setBarStyle('light-content', true);
if (Platform.OS === 'android') {
StatusBar.setBackgroundColor(DarkKittenTheme.colors.screen.base);
}
RkTheme.setTheme(DarkKittenTheme);
};
render = () => (
<View style={styles.root}>
<View style={styles.container}>
<RkText>Light Theme</RkText>
<Image style={styles.image} source={require('../../assets/images/lightThemeImage.png')} />
<GradientButton
text='APPLY'
onPress={this.onLightThemeApplyButtonPressed}
/>
</View>
<View style={styles.container}>
<RkText>Dark Theme</RkText>
<Image style={styles.image} source={require('../../assets/images/darkThemeImage.png')} />
<GradientButton
text='APPLY'
onPress={this.onDarkThemeApplyButtonPressed}
/>
</View>
</View>
);
}
const styles = RkStyleSheet.create(theme => ({
root: {
backgroundColor: theme.colors.screen.base,
flex: 1,
paddingHorizontal: scale(72),
},
image: {
height: scaleVertical(160),
},
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'space-between',
paddingVertical: scaleVertical(20),
},
}));
|
