Skip to content
This repository was archived by the owner on Feb 8, 2020. It is now read-only.

Commit 00fc616

Browse files
satya164satya164
authored
feat: add custom theme support (#211)
1 parent 703edb3 commit 00fc616

40 files changed

Lines changed: 846 additions & 533 deletions

‎example/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"dependencies": {
2121
"@expo/vector-icons": "^10.0.0",
2222
"@react-native-community/masked-view": "0.1.5",
23+
"color": "^3.1.2",
2324
"expo": "^36.0.0",
2425
"expo-asset": "~8.0.0",
2526
"query-string": "^6.9.0",

‎example/src/Screens/MaterialTopTabs.tsx‎

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import * as React from 'react';
2-
import { StyleSheet } from 'react-native';
32
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
43
import Albums from '../Shared/Albums';
54
import Contacts from '../Shared/Contacts';
@@ -15,13 +14,7 @@ const MaterialTopTabs = createMaterialTopTabNavigator<MaterialTopTabParams>();
1514

1615
export default function MaterialTopTabsScreen() {
1716
return (
18-
<MaterialTopTabs.Navigator
19-
tabBarOptions={{
20-
style: styles.tabBar,
21-
labelStyle: styles.tabLabel,
22-
indicatorStyle: styles.tabIndicator,
23-
}}
24-
>
17+
<MaterialTopTabs.Navigator>
2518
<MaterialTopTabs.Screen
2619
name="chat"
2720
component={Chat}
@@ -40,15 +33,3 @@ export default function MaterialTopTabsScreen() {
4033
</MaterialTopTabs.Navigator>
4134
);
4235
}
43-
44-
const styles = StyleSheet.create({
45-
tabBar: {
46-
backgroundColor: 'white',
47-
},
48-
tabLabel: {
49-
color: 'black',
50-
},
51-
tabIndicator: {
52-
backgroundColor: 'tomato',
53-
},
54-
});

‎example/src/Screens/NativeStack.tsx‎

Lines changed: 103 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
RouteProp,
88
ParamListBase,
99
useFocusEffect,
10+
useTheme,
1011
} from '@react-navigation/native';
1112
import { DrawerNavigationProp } from '@react-navigation/drawer';
1213
import { StackNavigationProp } from '@react-navigation/stack';
@@ -23,90 +24,113 @@ type NativeStackParams = {
2324

2425
type NativeStackNavigation = NativeStackNavigationProp<NativeStackParams>;
2526

27+
const Title = ({ children }: { children: React.ReactNode }) => {
28+
const { colors } = useTheme();
29+
30+
return <Text style={[styles.title, { color: colors.text }]}>{children}</Text>;
31+
};
32+
33+
const Paragraph = ({ children }: { children: React.ReactNode }) => {
34+
const { colors } = useTheme();
35+
36+
return (
37+
<Text style={[styles.paragraph, { color: colors.text }]}>{children}</Text>
38+
);
39+
};
40+
2641
const ArticleScreen = ({
2742
navigation,
2843
}: {
2944
navigation: NativeStackNavigation;
3045
route: RouteProp<NativeStackParams, 'article'>;
31-
}) => (
32-
<ScrollView style={styles.container} contentContainerStyle={styles.content}>
33-
<View style={styles.buttons}>
34-
<Button
35-
mode="contained"
36-
onPress={() => navigation.push('album')}
37-
style={styles.button}
38-
>
39-
Push album
40-
</Button>
41-
<Button
42-
mode="outlined"
43-
onPress={() => navigation.goBack()}
44-
style={styles.button}
45-
>
46-
Go back
47-
</Button>
48-
</View>
49-
<Text style={styles.title}>What is Lorem Ipsum?</Text>
50-
<Text style={styles.paragraph}>
51-
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
52-
Lorem Ipsum has been the industry&apos;s standard dummy text ever since
53-
the 1500s, when an unknown printer took a galley of type and scrambled it
54-
to make a type specimen book. It has survived not only five centuries, but
55-
also the leap into electronic typesetting, remaining essentially
56-
unchanged. It was popularised in the 1960s with the release of Letraset
57-
sheets containing Lorem Ipsum passages, and more recently with desktop
58-
publishing software like Aldus PageMaker including versions of Lorem
59-
Ipsum.
60-
</Text>
61-
<Text style={styles.title}>Where does it come from?</Text>
62-
<Text style={styles.paragraph}>
63-
Contrary to popular belief, Lorem Ipsum is not simply random text. It has
64-
roots in a piece of classical Latin literature from 45 BC, making it over
65-
2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney
66-
College in Virginia, looked up one of the more obscure Latin words,
67-
consectetur, from a Lorem Ipsum passage, and going through the cites of
68-
the word in classical literature, discovered the undoubtable source. Lorem
69-
Ipsum comes from sections 1.10.32 and 1.10.33 of &quot;de Finibus Bonorum
70-
et Malorum&quot; (The Extremes of Good and Evil) by Cicero, written in 45
71-
BC. This book is a treatise on the theory of ethics, very popular during
72-
the Renaissance. The first line of Lorem Ipsum, &quot;Lorem ipsum dolor
73-
sit amet..&quot;, comes from a line in section 1.10.32.
74-
</Text>
75-
<Text style={styles.paragraph}>
76-
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below
77-
for those interested. Sections 1.10.32 and 1.10.33 from &quot;de Finibus
78-
Bonorum et Malorum&quot; by Cicero are also reproduced in their exact
79-
original form, accompanied by English versions from the 1914 translation
80-
by H. Rackham.
81-
</Text>
82-
<Text style={styles.title}>Why do we use it?</Text>
83-
<Text style={styles.paragraph}>
84-
It is a long established fact that a reader will be distracted by the
85-
readable content of a page when looking at its layout. The point of using
86-
Lorem Ipsum is that it has a more-or-less normal distribution of letters,
87-
as opposed to using &quot;Content here, content here&quot;, making it look
88-
like readable English. Many desktop publishing packages and web page
89-
editors now use Lorem Ipsum as their default model text, and a search for
90-
&quot;lorem ipsum&quot; will uncover many web sites still in their
91-
infancy. Various versions have evolved over the years, sometimes by
92-
accident, sometimes on purpose (injected humour and the like).
93-
</Text>
94-
<Text style={styles.title}>Where can I get some?</Text>
95-
<Text style={styles.paragraph}>
96-
There are many variations of passages of Lorem Ipsum available, but the
97-
majority have suffered alteration in some form, by injected humour, or
98-
randomised words which don&apos;t look even slightly believable. If you
99-
are going to use a passage of Lorem Ipsum, you need to be sure there
100-
isn&apos;t anything embarrassing hidden in the middle of text. All the
101-
Lorem Ipsum generators on the Internet tend to repeat predefined chunks as
102-
necessary, making this the first true generator on the Internet. It uses a
103-
dictionary of over 200 Latin words, combined with a handful of model
104-
sentence structures, to generate Lorem Ipsum which looks reasonable. The
105-
generated Lorem Ipsum is therefore always free from repetition, injected
106-
humour, or non-characteristic words etc.
107-
</Text>
108-
</ScrollView>
109-
);
46+
}) => {
47+
const { colors } = useTheme();
48+
49+
return (
50+
<ScrollView
51+
style={{ backgroundColor: colors.card }}
52+
contentContainerStyle={styles.content}
53+
>
54+
<View style={styles.buttons}>
55+
<Button
56+
mode="contained"
57+
onPress={() => navigation.push('album')}
58+
style={styles.button}
59+
>
60+
Push album
61+
</Button>
62+
<Button
63+
mode="outlined"
64+
onPress={() => navigation.goBack()}
65+
style={styles.button}
66+
>
67+
Go back
68+
</Button>
69+
</View>
70+
<Title>What is Lorem Ipsum?</Title>
71+
<Paragraph>
72+
Lorem Ipsum is simply dummy text of the printing and typesetting
73+
industry. Lorem Ipsum has been the industry&apos;s standard dummy text
74+
ever since the 1500s, when an unknown printer took a galley of type and
75+
scrambled it to make a type specimen book. It has survived not only five
76+
centuries, but also the leap into electronic typesetting, remaining
77+
essentially unchanged. It was popularised in the 1960s with the release
78+
of Letraset sheets containing Lorem Ipsum passages, and more recently
79+
with desktop publishing software like Aldus PageMaker including versions
80+
of Lorem Ipsum.
81+
</Paragraph>
82+
<Title>Where does it come from?</Title>
83+
<Paragraph>
84+
Contrary to popular belief, Lorem Ipsum is not simply random text. It
85+
has roots in a piece of classical Latin literature from 45 BC, making it
86+
over 2000 years old. Richard McClintock, a Latin professor at
87+
Hampden-Sydney College in Virginia, looked up one of the more obscure
88+
Latin words, consectetur, from a Lorem Ipsum passage, and going through
89+
the cites of the word in classical literature, discovered the
90+
undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33
91+
of &quot;de Finibus Bonorum et Malorum&quot; (The Extremes of Good and
92+
Evil) by Cicero, written in 45 BC. This book is a treatise on the theory
93+
of ethics, very popular during the Renaissance. The first line of Lorem
94+
Ipsum, &quot;Lorem ipsum dolor sit amet..&quot;, comes from a line in
95+
section 1.10.32.
96+
</Paragraph>
97+
<Paragraph>
98+
The standard chunk of Lorem Ipsum used since the 1500s is reproduced
99+
below for those interested. Sections 1.10.32 and 1.10.33 from &quot;de
100+
Finibus Bonorum et Malorum&quot; by Cicero are also reproduced in their
101+
exact original form, accompanied by English versions from the 1914
102+
translation by H. Rackham.
103+
</Paragraph>
104+
<Title>Why do we use it?</Title>
105+
<Paragraph>
106+
It is a long established fact that a reader will be distracted by the
107+
readable content of a page when looking at its layout. The point of
108+
using Lorem Ipsum is that it has a more-or-less normal distribution of
109+
letters, as opposed to using &quot;Content here, content here&quot;,
110+
making it look like readable English. Many desktop publishing packages
111+
and web page editors now use Lorem Ipsum as their default model text,
112+
and a search for &quot;lorem ipsum&quot; will uncover many web sites
113+
still in their infancy. Various versions have evolved over the years,
114+
sometimes by accident, sometimes on purpose (injected humour and the
115+
like).
116+
</Paragraph>
117+
<Title>Where can I get some?</Title>
118+
<Paragraph>
119+
There are many variations of passages of Lorem Ipsum available, but the
120+
majority have suffered alteration in some form, by injected humour, or
121+
randomised words which don&apos;t look even slightly believable. If you
122+
are going to use a passage of Lorem Ipsum, you need to be sure there
123+
isn&apos;t anything embarrassing hidden in the middle of text. All the
124+
Lorem Ipsum generators on the Internet tend to repeat predefined chunks
125+
as necessary, making this the first true generator on the Internet. It
126+
uses a dictionary of over 200 Latin words, combined with a handful of
127+
model sentence structures, to generate Lorem Ipsum which looks
128+
reasonable. The generated Lorem Ipsum is therefore always free from
129+
repetition, injected humour, or non-characteristic words etc.
130+
</Paragraph>
131+
</ScrollView>
132+
);
133+
};
110134

111135
const AlbumsScreen = ({
112136
navigation,
@@ -191,21 +215,16 @@ const styles = StyleSheet.create({
191215
button: {
192216
margin: 8,
193217
},
194-
container: {
195-
backgroundColor: 'white',
196-
},
197218
content: {
198219
paddingVertical: 16,
199220
},
200221
title: {
201-
color: '#000',
202222
fontWeight: 'bold',
203223
fontSize: 24,
204224
marginVertical: 8,
205225
marginHorizontal: 16,
206226
},
207227
paragraph: {
208-
color: '#000',
209228
fontSize: 16,
210229
lineHeight: 24,
211230
marginVertical: 8,

‎example/src/Shared/Albums.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export default function Albums() {
3838

3939
const styles = StyleSheet.create({
4040
container: {
41-
backgroundColor: '#343C46',
41+
backgroundColor: '#000',
4242
},
4343
content: {
4444
flexDirection: 'row',

‎example/src/Shared/Article.tsx‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react';
22
import { View, Text, Image, ScrollView, StyleSheet } from 'react-native';
3-
import { useScrollToTop } from '@react-navigation/native';
3+
import { useScrollToTop, useTheme } from '@react-navigation/native';
44

55
type Props = {
66
date?: string;
@@ -19,10 +19,12 @@ export default function Article({
1919

2020
useScrollToTop(ref);
2121

22+
const { colors } = useTheme();
23+
2224
return (
2325
<ScrollView
2426
ref={ref}
25-
style={styles.container}
27+
style={{ backgroundColor: colors.card }}
2628
contentContainerStyle={styles.content}
2729
>
2830
<View style={styles.author}>
@@ -31,24 +33,26 @@ export default function Article({
3133
source={require('../../assets/avatar-1.png')}
3234
/>
3335
<View style={styles.meta}>
34-
<Text style={styles.name}>{author.name}</Text>
35-
<Text style={styles.timestamp}>{date}</Text>
36+
<Text style={[styles.name, { color: colors.text }]}>
37+
{author.name}
38+
</Text>
39+
<Text style={[styles.timestamp, { color: colors.text }]}>{date}</Text>
3640
</View>
3741
</View>
38-
<Text style={styles.title}>Lorem Ipsum</Text>
39-
<Text style={styles.paragraph}>
42+
<Text style={[styles.title, { color: colors.text }]}>Lorem Ipsum</Text>
43+
<Text style={[styles.paragraph, { color: colors.text }]}>
4044
Contrary to popular belief, Lorem Ipsum is not simply random text. It
4145
has roots in a piece of classical Latin literature from 45 BC, making it
4246
over 2000 years old.
4347
</Text>
4448
<Image style={styles.image} source={require('../../assets/book.jpg')} />
45-
<Text style={styles.paragraph}>
49+
<Text style={[styles.paragraph, { color: colors.text }]}>
4650
Richard McClintock, a Latin professor at Hampden-Sydney College in
4751
Virginia, looked up one of the more obscure Latin words, consectetur,
4852
from a Lorem Ipsum passage, and going through the cites of the word in
4953
classical literature, discovered the undoubtable source.
5054
</Text>
51-
<Text style={styles.paragraph}>
55+
<Text style={[styles.paragraph, { color: colors.text }]}>
5256
Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of &quot;de Finibus
5357
Bonorum et Malorum&quot; (The Extremes of Good and Evil) by Cicero,
5458
written in 45 BC. This book is a treatise on the theory of ethics, very
@@ -61,9 +65,6 @@ export default function Article({
6165
}
6266

6367
const styles = StyleSheet.create({
64-
container: {
65-
backgroundColor: 'white',
66-
},
6768
content: {
6869
paddingVertical: 16,
6970
},
@@ -77,13 +78,12 @@ const styles = StyleSheet.create({
7778
justifyContent: 'center',
7879
},
7980
name: {
80-
color: '#000',
8181
fontWeight: 'bold',
8282
fontSize: 16,
8383
lineHeight: 24,
8484
},
8585
timestamp: {
86-
color: '#999',
86+
opacity: 0.5,
8787
fontSize: 14,
8888
lineHeight: 21,
8989
},
@@ -93,14 +93,12 @@ const styles = StyleSheet.create({
9393
borderRadius: 24,
9494
},
9595
title: {
96-
color: '#000',
9796
fontWeight: 'bold',
9897
fontSize: 36,
9998
marginVertical: 8,
10099
marginHorizontal: 16,
101100
},
102101
paragraph: {
103-
color: '#000',
104102
fontSize: 16,
105103
lineHeight: 24,
106104
marginVertical: 8,

0 commit comments

Comments
 (0)