Skip to content

Commit 8e66817

Browse files
Artur Bienarturbien
Artur Bien
authored and
arturbien
committed
feat(theming): use @callstack/react-theme-provider
1 parent 5ffe818 commit 8e66817

File tree

98 files changed

+1733
-438
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

98 files changed

+1733
-438
lines changed

‎example/src/App.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
/* eslint-disable global-require */
2-
import React, { useEffect } from 'react';
2+
import React, { useEffect, useState } from 'react';
33
import { View, SafeAreaView } from 'react-native';
44
import { NavigationContainer } from '@react-navigation/native';
55
import { useFonts } from 'expo-font';
6-
import { fontNames } from 'react95-native';
6+
import { fontNames, Provider, themes } from 'react95-native';
77
import * as SplashScreen from 'expo-splash-screen';
88

9-
import { LocalThemeProvider } from './util/LocalThemeContext';
109
import MainNavigation from './MainNavigation';
1110

1211
const App = () => {
12+
const [theme, setTheme] = useState(themes.original);
13+
1314
const [fontLoaded] = useFonts({
1415
[fontNames.normal]: require('./assets/fonts/MS-Sans-Serif.ttf'),
1516
[fontNames.bold]: require('./assets/fonts/MS-Sans-Serif-Bold.ttf'),
@@ -31,11 +32,11 @@ const App = () => {
3132

3233
return (
3334
<SafeAreaView style={{ flex: 1, backgroundColor: 'black' }}>
34-
<LocalThemeProvider>
35+
<Provider theme={theme}>
3536
<NavigationContainer>
36-
<MainNavigation />
37+
<MainNavigation setTheme={setTheme} />
3738
</NavigationContainer>
38-
</LocalThemeProvider>
39+
</Provider>
3940
</SafeAreaView>
4041
);
4142
};

‎example/src/ExamplesScreen.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useContext, useState } from 'react';
1+
import React, { useState } from 'react';
22
import { StyleSheet, View, Image, Linking } from 'react-native';
33
import { useNavigation } from '@react-navigation/native';
44
import {
@@ -12,18 +12,23 @@ import {
1212
Divider,
1313
Window,
1414
Anchor,
15+
useTheme,
1516
} from 'react95-native';
16-
17+
import type { Theme } from 'react95-native';
1718
import examples from './examples';
1819
import themes from './examples/themes';
19-
import { LocalThemeContext } from './util/LocalThemeContext';
2020
import ThemeButton from './util/ThemeButton';
2121

22-
const ExamplesScreen = () => {
22+
type Props = {
23+
setTheme: (theme: Theme) => void;
24+
};
25+
26+
const ExamplesScreen = ({ setTheme: setThemeProp }: Props) => {
2327
const [showAboutModal, setShowAboutModal] = useState(false);
2428
const navigation = useNavigation();
25-
const { theme: currentTheme, setTheme } = useContext(LocalThemeContext);
29+
// const { theme: currentTheme, setTheme } = useContext(LocalThemeContext);
2630

31+
const currentTheme = useTheme();
2732
const openLink = (url: string) => {
2833
Linking.openURL(url).catch(err => console.warn("Couldn't load page", err));
2934
};
@@ -150,7 +155,7 @@ const ExamplesScreen = () => {
150155
theme={theme}
151156
currentTheme={currentTheme}
152157
selected={theme.name === currentTheme.name}
153-
onPress={() => setTheme(theme)}
158+
onPress={() => setThemeProp(theme)}
154159
key={theme.name}
155160
/>
156161
))}

‎example/src/MainNavigation.tsx‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
1-
import React, { useContext } from 'react';
1+
import React from 'react';
22
import { createStackNavigator } from '@react-navigation/stack';
3-
import { AppBar, ThemeProvider as React95Provider } from 'react95-native';
4-
5-
import { LocalThemeContext } from './util/LocalThemeContext';
3+
import { AppBar } from 'react95-native';
4+
import type { Theme } from 'react95-native';
65
import ExamplesScreen from './ExamplesScreen';
76
import examples from './examples';
87

98
const flattenedExamples = examples.map(section => section.items).flat();
109

1110
const Stack = createStackNavigator();
1211

13-
const MainNavigation = () => {
14-
const { theme } = useContext(LocalThemeContext);
12+
type Props = {
13+
setTheme: (theme: Theme) => void;
14+
};
1515

16+
const MainNavigation = (props: Props) => {
1617
return (
17-
<React95Provider theme={theme}>
18+
<>
1819
<Stack.Navigator
1920
headerMode='screen'
2021
screenOptions={{
@@ -29,11 +30,9 @@ const MainNavigation = () => {
2930
),
3031
}}
3132
>
32-
<Stack.Screen
33-
name='Home'
34-
component={ExamplesScreen}
35-
options={{ title: 'Examples' }}
36-
/>
33+
<Stack.Screen name='Home' options={{ title: 'Examples' }}>
34+
{() => <ExamplesScreen {...props} />}
35+
</Stack.Screen>
3736
{flattenedExamples.map(({ name, title, component }) => (
3837
<Stack.Screen
3938
key={name}
@@ -43,7 +42,7 @@ const MainNavigation = () => {
4342
/>
4443
))}
4544
</Stack.Navigator>
46-
</React95Provider>
45+
</>
4746
);
4847
};
4948

‎example/src/examples/CardExample.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
import React, { useContext } from 'react';
1+
import React from 'react';
22
import { ScrollView } from 'react-native';
3-
import { Card, Text } from 'react95-native';
3+
import { Card, Text, useTheme } from 'react95-native';
44

55
import Container from '../util/Container';
6-
import { LocalThemeContext } from '../util/LocalThemeContext';
76

87
const CardExample = () => {
9-
const { theme } = useContext(LocalThemeContext);
8+
const theme = useTheme();
109
return (
1110
<ScrollView
1211
style={[

‎example/src/examples/FABExample.tsx‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import React from 'react';
2+
import { View, StyleSheet } from 'react-native';
3+
import { FAB, themes } from 'react95-native';
4+
5+
import ExamplePanel from '../util/ExamplePanel';
6+
7+
const FABExample = () => {
8+
const [visible, setVisible] = React.useState(true);
9+
10+
return (
11+
<>
12+
<ExamplePanel>
13+
<View style={styles.row}>
14+
<FAB
15+
uppercase
16+
small
17+
// icon={<Text>Default:</Text>}
18+
onPress={() => setVisible(!visible)}
19+
style={styles.fab}
20+
theme={themes.azureOrange}
21+
/>
22+
<FAB
23+
uppercase
24+
// icon={<Text>Default:</Text>}
25+
// onPress={() => setVisible(!visible)}
26+
onPress={() => {}}
27+
visible={visible}
28+
style={styles.fab}
29+
theme={themes.candy}
30+
/>
31+
<FAB
32+
uppercase
33+
// icon={<Text>Default:</Text>}
34+
label='Extended FAB'
35+
// onPress={() => setVisible(!visible)}
36+
onPress={() => {}}
37+
visible={visible}
38+
style={styles.fab}
39+
theme={themes.olive}
40+
/>
41+
<FAB
42+
uppercase
43+
disabled
44+
// icon={<Text>Default:</Text>}
45+
label='Disabled FAB'
46+
// onPress={() => setVisible(!visible)}
47+
onPress={() => {}}
48+
visible={visible}
49+
style={styles.fab}
50+
theme={themes.olive}
51+
/>
52+
<FAB
53+
loading
54+
// icon={<Text>Default:</Text>}
55+
label='Loading FAB'
56+
// onPress={() => setVisible(!visible)}
57+
onPress={() => {}}
58+
visible={visible}
59+
style={styles.fab}
60+
theme={themes.olive}
61+
/>
62+
</View>
63+
</ExamplePanel>
64+
</>
65+
);
66+
};
67+
68+
export default FABExample;
69+
70+
const styles = StyleSheet.create({
71+
wrapper: {
72+
...StyleSheet.absoluteFillObject,
73+
},
74+
row: {
75+
justifyContent: 'center',
76+
alignItems: 'center',
77+
},
78+
fab: {
79+
marginTop: 16,
80+
},
81+
fabAbsolute: {
82+
position: 'absolute',
83+
zIndex: 9999,
84+
},
85+
});

‎example/src/examples/PanelExample.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import { StyleSheet } from 'react-native';
3-
import { Panel, Text, themes } from 'react95-native';
3+
import { Panel, Text } from 'react95-native';
44

55
import Container from '../util/Container';
66

@@ -44,10 +44,6 @@ const styles = StyleSheet.create({
4444
marginBottom: margin,
4545
padding,
4646
},
47-
label: {
48-
color: themes.original.borderLightest,
49-
marginBottom: 4,
50-
},
5147
});
5248

5349
export default PanelExample;

‎example/src/examples/SnackbarExample.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
1-
import React, { useContext } from 'react';
2-
import { Snackbar, Text } from 'react95-native';
1+
import React from 'react';
2+
import { Snackbar, Text, useTheme } from 'react95-native';
33

44
import Container from '../util/Container';
5-
import { LocalThemeContext } from '../util/LocalThemeContext';
65

76
const SnackbarExample = () => {
8-
const { theme } = useContext(LocalThemeContext);
7+
const theme = useTheme();
98
return (
109
<Container style={[{ backgroundColor: theme.materialDark }]}>
1110
<Container.Section title='Default:'>

‎example/src/examples/index.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import CheckboxExample from './CheckboxExample';
55
import ColorPickerExample from './ColorPickerExample';
66
import DesktopExample from './DesktopExample';
77
import DividerExample from './DividerExample';
8+
import FABExample from './FABExample';
89
import FieldsetExample from './FieldsetExample';
910
import HourglassExample from './HourglassExample';
1011
import ListExample from './ListExample';
@@ -39,6 +40,11 @@ export default [
3940
component: ColorPickerExample,
4041
title: 'ColorPicker',
4142
},
43+
{
44+
name: 'FABExample',
45+
component: FABExample,
46+
title: 'Floating Action Button',
47+
},
4248
{
4349
name: 'NumberInputExample',
4450
component: NumberInputExample,

‎example/src/util/LocalThemeContext.tsx‎

Lines changed: 0 additions & 33 deletions
This file was deleted.

‎example/src/util/ThemeButton.tsx‎

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -26,28 +26,23 @@ const ThemeButton = ({ theme, currentTheme, selected, onPress }: Props) => (
2626
},
2727
]}
2828
>
29-
<ThemeProvider theme={theme}>
30-
<Panel variant='raised' style={[styles.square]}>
31-
<View
32-
style={[
33-
styles.header,
34-
{ backgroundColor: theme.headerBackground },
35-
]}
29+
<Panel theme={theme} variant='raised' style={[styles.square]}>
30+
<View
31+
style={[styles.header, { backgroundColor: theme.headerBackground }]}
32+
/>
33+
{selected && (
34+
<ImageBackground
35+
style={{ width: '100%', height: '100%' }}
36+
imageStyle={{
37+
resizeMode: 'repeat',
38+
}}
39+
source={{
40+
uri:
41+
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAIUlEQVQoU2P8////fwYkwMjIyIjCp4MCZPtAbAwraa8AAEGrH/nfAIhgAAAAAElFTkSuQmCC',
42+
}}
3643
/>
37-
{selected && (
38-
<ImageBackground
39-
style={{ width: '100%', height: '100%' }}
40-
imageStyle={{
41-
resizeMode: 'repeat',
42-
}}
43-
source={{
44-
uri:
45-
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAIUlEQVQoU2P8////fwYkwMjIyIjCp4MCZPtAbAwraa8AAEGrH/nfAIhgAAAAAElFTkSuQmCC',
46-
}}
47-
/>
48-
)}
49-
</Panel>
50-
</ThemeProvider>
44+
)}
45+
</Panel>
5146
</TouchableHighlight>
5247
<Text bold={selected} numberOfLines={1} style={[styles.themeButtonName]}>
5348
{theme.name}

0 commit comments

Comments
 (0)