Skip to content

Commit 0fb366b

Browse files
mayurgrexitmayurgrexit
committed
dark mode implemented
1 parent 46495d1 commit 0fb366b

File tree

2 files changed

+211
-90
lines changed

2 files changed

+211
-90
lines changed

‎src/HomeScreen.js

+75-90
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,10 @@ import {
99
Image
1010
} from 'react-native';
1111
import Modal from 'react-native-modal'
12-
import { Text, Button } from 'react-native-ui-kitten'
12+
import { Text, Button, Toggle } from 'react-native-ui-kitten'
1313
import { SafeAreaView } from 'react-navigation'
1414
import { FlatList } from 'react-native-gesture-handler';
15+
import { stylesGen, LIGHT_THEME, DARK_THEME } from './styles'
1516

1617
const WINDOW_WIDTH = Dimensions.get('window').width
1718
const WINDOW_HEIGHT = Dimensions.get('window').height
@@ -20,21 +21,30 @@ class HomeScreen extends Component {
2021

2122
constructor(props) {
2223
super(props)
24+
25+
// TODO: replace with real data
26+
this.state = {
27+
data: [],
28+
images: [
29+
{ title: "Breaking Bad", imageUrl: "https://www.thetvdb.com/banners/_cache/fanart/original/81189-1.jpg" },
30+
{ title: "Breaking Bad", imageUrl: "https://www.thetvdb.com/banners/_cache/fanart/original/81189-1.jpg" },
31+
{ title: "Breaking Bad", imageUrl: "https://www.thetvdb.com/banners/_cache/fanart/original/81189-1.jpg" },
32+
{ title: "Breaking Bad", imageUrl: "https://www.thetvdb.com/banners/_cache/fanart/original/81189-1.jpg" },
33+
{ title: "Breaking Bad", imageUrl: "https://www.thetvdb.com/banners/_cache/fanart/original/81189-1.jpg" },
34+
],
35+
activeImage: null,
36+
showCloseIcon: false,
37+
isModalVisible: false,
38+
darkMode: false,
39+
styles: stylesGen(LIGHT_THEME)
40+
}
2341
}
2442

25-
// TODO: replace with real data
26-
state = {
27-
data: [],
28-
images: [
29-
{ title: "Breaking Bad", imageUrl: "https://www.thetvdb.com/banners/_cache/fanart/original/81189-1.jpg" },
30-
{ title: "Breaking Bad", imageUrl: "https://www.thetvdb.com/banners/_cache/fanart/original/81189-1.jpg" },
31-
{ title: "Breaking Bad", imageUrl: "https://www.thetvdb.com/banners/_cache/fanart/original/81189-1.jpg" },
32-
{ title: "Breaking Bad", imageUrl: "https://www.thetvdb.com/banners/_cache/fanart/original/81189-1.jpg" },
33-
{ title: "Breaking Bad", imageUrl: "https://www.thetvdb.com/banners/_cache/fanart/original/81189-1.jpg" },
34-
],
35-
activeImage: null,
36-
showCloseIcon: false,
37-
isModalVisible: false
43+
_toggleTheme = (dark = false) => {
44+
console.log("method called");
45+
let theme = dark ? DARK_THEME : LIGHT_THEME
46+
let newStyles = stylesGen(theme)
47+
this.setState({ styles: newStyles })
3848
}
3949

4050
componentWillMount() {
@@ -45,43 +55,32 @@ class HomeScreen extends Component {
4555
}
4656

4757
_renderEpisodeItem = ({ item, index }) => {
58+
const { styles } = this.state
4859
const { title, imageUrl } = item
4960

5061
return (
51-
<View style={{ flexDirection: 'row', marginBottom: 10, backgroundColor: 'yellow' }} >
52-
<Image style={{ height: 100, width: 100, borderRadius: 12 }} source={{ uri: imageUrl }} />
53-
<View
54-
style={{ marginLeft: 20, flexDirection: 'column', backgroundColor: 'blue' }}
55-
>
56-
<Text
57-
style={{ marginTop: 8, }}
58-
category="h6"
59-
>
60-
{title}
61-
</Text>
62-
<View
63-
style={{ marginTop: 8, position: 'absolute', bottom: 8, backgroundColor: 'red', flexDirection: 'row' }}
64-
>
62+
<View style={{ flexDirection: 'row', marginBottom: 10 }} >
63+
<Image style={styles.episodeImage} source={{ uri: imageUrl }} />
64+
65+
<View style={{ marginLeft: 20, flexDirection: 'column' }}>
66+
<Text style={styles.episodeTitle} category="h6">{title}</Text>
67+
<View style={styles.ratingContainer}>
6568
<Image
66-
style={{ height: 14, width: 14, alignSelf: 'center' }}
69+
style={styles.ratingIcon}
6770
source={require('./img/star.png')}></Image>
68-
<Text style={{ alignSelf: 'center', marginLeft: 8 }} category="s2">9.3</Text>
71+
<Text style={styles.ratingText} category="s2">9.3</Text>
6972
</View>
7073
</View>
71-
<View
72-
style={{ flex: 1, backgroundColor: 'grey' }}
73-
>
74-
<Text
75-
style={{ position: 'absolute', right: 12, marginTop: 16 }}
76-
category="s1">$9.87</Text>
74+
75+
<View style={{ flex: 1 }}>
76+
<Text style={styles.pricingText} category="s1">$9.87</Text>
7777
<Button
7878
status="white"
7979
size="tiny"
80-
style={{ backgroundColor: '#E0E0E0', borderRadius: 30, position: 'absolute', right: 0, bottom: 0, width: 60 }}
80+
style={styles.playButton}
8181
icon={(style) => {
8282
return <Image
83-
style={{ height: 16, width: 16 }}
84-
tintColor="#424242"
83+
style={{ height: 12, width: 12 }}
8584
source={require('./img/media-play.png')}></Image>
8685
}}
8786
>
@@ -92,7 +91,7 @@ class HomeScreen extends Component {
9291
}
9392

9493
_showModal() {
95-
console.log("modal shown", this.state.isModalVisible);
94+
const { styles } = this.state
9695

9796
return (
9897
<View style={{ flex: 1 }}>
@@ -103,16 +102,17 @@ class HomeScreen extends Component {
103102
deviceHeight={WINDOW_HEIGHT / 2}
104103
deviceWidth={WINDOW_WIDTH}
105104
>
106-
<View style={{ height: WINDOW_HEIGHT / 1.8, backgroundColor: 'white', borderRadius: 24 }}>
107-
<View style={{ marginLeft: 20, marginRight: 20, marginTop: 20 }}>
108-
<View style={{ flexDirection: 'row', marginBottom: 25, justifyContent: 'space-between' }}>
109-
<Text category="h4">Season 1 Episodes</Text>
105+
<View style={styles.episodesModal}>
106+
<View style={styles.episodesContainer}>
107+
<View style={styles.episodesHeader}>
108+
<Text style={styles.headerText} category="h4">Season 1</Text>
110109
{this._showCloseIcon()}
111110
</View>
112111
<FlatList
113112
data={this.state.images}
114113
keyExtractor={this._keyExtractor}
115114
renderItem={this._renderEpisodeItem}
115+
showsVerticalScrollIndicator={false}
116116
/>
117117
</View>
118118
</View>
@@ -174,6 +174,7 @@ class HomeScreen extends Component {
174174

175175
_renderItem = ({ item, index }) => {
176176
const { title, imageUrl } = item
177+
const { styles } = this.state
177178

178179
return (
179180
<TouchableWithoutFeedback
@@ -222,34 +223,51 @@ class HomeScreen extends Component {
222223
}
223224

224225
_showCloseIcon() {
226+
const { styles } = this.state
227+
225228
if (this.state.showCloseIcon) {
226-
return <TouchableWithoutFeedback
227-
onPress={this._closeImage}
228-
>
229-
<Image
230-
style={styles.closeIcon}
231-
source={require('./img/delete-button.png')} />
232-
</TouchableWithoutFeedback>
229+
return (
230+
<TouchableWithoutFeedback onPress={this._closeImage}>
231+
<Image
232+
style={styles.closeIcon}
233+
source={require('./img/delete-button.png')} />
234+
</TouchableWithoutFeedback>
235+
)
233236
} else {
234237
return null
235238
}
236239
}
237240

238241
render() {
239-
// These params are manipulated by Animation
242+
// These params are manipulated by Animation Value
240243
const activeImageStyle = {
241244
width: this.dimensions.x,
242245
height: this.dimensions.y,
243246
left: this.position.x,
244247
top: this.position.y
245248
}
249+
const { styles } = this.state
246250

247251
return (
248252
<SafeAreaView style={styles.container}>
253+
<View style={styles.header} >
254+
<Text style={styles.headerText} category="h4">Dark mode</Text>
255+
<Toggle
256+
style={{ alignSelf: 'center' }}
257+
status="success"
258+
checked={this.state.darkMode}
259+
onChange={(checked) => {
260+
this.setState({ darkMode: checked })
261+
this._toggleTheme(checked)
262+
}}
263+
>
264+
</Toggle>
265+
</View>
249266
<FlatList
250267
data={this.state.images}
251268
renderItem={this._renderItem.bind(this)}
252269
keyExtractor={this._keyExtractor.bind(this)}
270+
showsVerticalScrollIndicator={false}
253271
/>
254272
<View
255273
style={StyleSheet.absoluteFill}
@@ -259,8 +277,11 @@ class HomeScreen extends Component {
259277
style={{ flex: 2, marginBottom: 80 }}
260278
ref={view => (this.viewImage = view)}>
261279
<Animated.Image
262-
style={[{ top: 0, left: 0, height: null, width: null, resizeMode: 'cover' }, activeImageStyle]}
263-
source={{ uri: this.state.activeImage ? this.state.activeImage.imageUrl : null }}
280+
style={[styles.seriesCardImage, activeImageStyle]}
281+
source={{
282+
uri: this.state.activeImage ?
283+
this.state.activeImage.imageUrl : null
284+
}}
264285
>
265286
</Animated.Image>
266287

@@ -273,39 +294,3 @@ class HomeScreen extends Component {
273294
}
274295

275296
export default HomeScreen;
276-
277-
const styles = StyleSheet.create({
278-
container: {
279-
flex: 1,
280-
backgroundColor: '#F5FCFF',
281-
},
282-
titleText: {
283-
alignSelf: 'flex-start',
284-
marginLeft: 20,
285-
marginBottom: 10,
286-
color: 'white'
287-
},
288-
imageContainer: {
289-
marginRight: 20,
290-
marginLeft: 20,
291-
marginBottom: 40,
292-
borderRadius: 12,
293-
},
294-
largeThumbnail: {
295-
width: WINDOW_WIDTH - 40,
296-
height: WINDOW_WIDTH - 40,
297-
elevation: 4,
298-
shadowOffset: { height: 4, width: 4 },
299-
shadowOpacity: 0.8,
300-
shadowColor: '#424242',
301-
shadowRadius: 8
302-
},
303-
closeIcon: {
304-
// position: 'absolute',
305-
// right: 0,
306-
alignSelf: 'center',
307-
height: 24,
308-
width: 24,
309-
tintColor: '#9E9E9E'
310-
}
311-
});

0 commit comments

Comments
 (0)