Skip to content

Commit 1b39562

Browse files
adamTrzadamTrz
authored
Chore: upgrade example dependencies (#163)
* Chore: Upgrade dependencies in /example * Theme persistence, ThemeSelector with more hooks * No artifactory please.... * expo-icons * Add @callstack/react-theme-provider to flow untyped
1 parent 30f7088 commit 1b39562

File tree

13 files changed

+6392
-5579
lines changed

13 files changed

+6392
-5579
lines changed

‎.flowconfig

+1
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@
2929

3030
[untyped]
3131
<PROJECT_ROOT>/node_modules/react-native-safe-area-view
32+
<PROJECT_ROOT>/node_modules/@callstack/react-theme-provider
3233
<PROJECT_ROOT>/example/node_modules/react-native
3334

3435
[include]

‎assets/icons/[email protected]

0 Bytes
Loading

‎example/App.js

+106-69
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,119 @@
1-
/* @flow */
2-
import * as React from 'react';
3-
import { StyleSheet, NavigatorIOS, StatusBar } from 'react-native';
4-
import { ThemeProvider, DefaultTheme } from 'react-native-ios-kit';
1+
// @flow
2+
import React, { useState, useEffect, useCallback } from 'react';
3+
import { AsyncStorage, StatusBar } from 'react-native';
4+
import {
5+
ThemeProvider,
6+
DefaultTheme,
7+
DarkTheme,
8+
Button,
9+
} from 'react-native-ios-kit';
510
import type { Theme } from 'react-native-ios-kit/types';
11+
import { NavigationContainer } from '@react-navigation/native';
612

7-
import ExampleList from './src/ExampleList';
13+
import { createStackNavigator } from '@react-navigation/stack';
14+
import { SafeAreaProvider } from 'react-native-safe-area-context';
15+
import ExampleList, { examples } from './src/ExampleList';
816
import ThemeSelector from './src/ThemeSelector';
917

10-
type Props = {
11-
navigator: Object,
12-
};
18+
const Stack = createStackNavigator();
1319

14-
type State = {
15-
selectedTheme: Theme,
16-
};
20+
const PREFERENCES_KEY = 'APP_PREFERENCES';
1721

18-
export default class App extends React.Component<Props, State> {
19-
state = {
20-
selectedTheme: DefaultTheme,
21-
};
22-
_nav: ?Object;
23-
openThemesScreen = () => {
24-
if (this._nav) {
25-
this._nav.push({
26-
component: ThemeSelector,
27-
title: 'Select Theme',
28-
passProps: {
29-
selectTheme: this.selectTheme,
30-
selectedTheme: this.state.selectedTheme,
31-
},
32-
});
33-
}
22+
export default function App() {
23+
const [theme, setTheme] = useState<Theme>(DefaultTheme);
24+
25+
const selectTheme = (selectedTheme: 'dark' | 'light') => {
26+
setTheme(selectedTheme === 'dark' ? DarkTheme : DefaultTheme);
3427
};
3528

36-
selectTheme = (theme: Theme) => {
37-
this.setState({ selectedTheme: theme });
29+
const openThemesScreen = useCallback(navigation => {
30+
navigation.navigate('ThemeSelector', {
31+
selectTheme,
32+
});
33+
}, []);
34+
35+
useEffect(() => {
3836
StatusBar.setBarStyle(
3937
theme === DefaultTheme ? 'dark-content' : 'light-content'
4038
);
41-
};
39+
}, [theme]);
4240

43-
render() {
44-
const { selectedTheme } = this.state;
45-
const {
46-
barColor,
47-
primaryColor,
48-
textColor,
49-
backgroundColor,
50-
} = selectedTheme;
51-
return (
52-
<ThemeProvider theme={selectedTheme}>
53-
<NavigatorIOS
54-
ref={ref => {
55-
this._nav = ref;
56-
}}
57-
initialRoute={{
58-
component: ExampleList,
59-
title: 'Example',
60-
rightButtonTitle: 'Theme',
61-
onRightButtonPress: this.openThemesScreen,
62-
passProps: { theme: selectedTheme },
63-
}}
64-
style={styles.container}
65-
itemWrapperStyle={[styles.scene, { backgroundColor }]}
66-
barTintColor={barColor}
67-
tintColor={primaryColor}
68-
titleTextColor={textColor}
69-
/>
70-
</ThemeProvider>
71-
);
72-
}
73-
}
41+
useEffect(() => {
42+
const restorePrefs = async () => {
43+
try {
44+
const prefString = await AsyncStorage.getItem(PREFERENCES_KEY);
45+
const preferences = JSON.parse(prefString || '');
46+
if (preferences) {
47+
setTheme(preferences.theme === 'dark' ? DarkTheme : DefaultTheme);
48+
}
49+
} catch (e) {
50+
// ignore error
51+
}
52+
};
53+
54+
restorePrefs();
55+
}, []);
56+
57+
useEffect(() => {
58+
const savePrefs = async () => {
59+
try {
60+
await AsyncStorage.setItem(
61+
PREFERENCES_KEY,
62+
JSON.stringify({
63+
theme: theme === DarkTheme ? 'dark' : 'light',
64+
})
65+
);
66+
} catch (e) {
67+
// ignore error
68+
}
69+
};
7470

75-
const styles = StyleSheet.create({
76-
container: {
77-
flex: 1,
78-
},
79-
scene: {
80-
paddingTop: 64,
81-
},
82-
});
71+
savePrefs();
72+
}, [theme]);
73+
74+
return (
75+
<ThemeProvider theme={theme}>
76+
<SafeAreaProvider>
77+
<NavigationContainer>
78+
<Stack.Navigator
79+
screenOptions={{
80+
headerStyle: {
81+
backgroundColor: theme.barColor,
82+
},
83+
headerTitleStyle: {
84+
color: theme.textColor,
85+
},
86+
cardStyle: {
87+
backgroundColor: theme.backgroundColor,
88+
},
89+
}}
90+
>
91+
<Stack.Screen
92+
name="React Native iOS Kit"
93+
component={ExampleList}
94+
options={({ navigation }) => ({
95+
headerRight: () => (
96+
<Button
97+
color="#007aff"
98+
onPress={() => openThemesScreen(navigation)}
99+
style={{ paddingRight: 15 }}
100+
>
101+
Theme
102+
</Button>
103+
),
104+
})}
105+
/>
106+
<Stack.Screen name="ThemeSelector" component={ThemeSelector} />
107+
{examples.map(example => (
108+
<Stack.Screen
109+
key={example.title}
110+
name={example.title}
111+
component={example.component}
112+
/>
113+
))}
114+
</Stack.Navigator>
115+
</NavigationContainer>
116+
</SafeAreaProvider>
117+
</ThemeProvider>
118+
);
119+
}

‎example/app.json

+8-6
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
{
22
"expo": {
3-
"name": "react-native-ios-kit",
4-
"description": "An empty new project",
5-
"slug": "react-native-ios-kit",
3+
"name": "React Native iOS Kit Example",
4+
"description": "Example app for React Native iOS: https://callstack.github.io/react-native-ios-kit/",
5+
"slug": "react-native-ios-kit-example",
66
"privacy": "public",
7-
"sdkVersion": "32.0.0",
87
"version": "1.0.0",
98
"orientation": "portrait",
109
"primaryColor": "#cccccc",
@@ -14,12 +13,15 @@
1413
"hideExponentText": false
1514
},
1615
"packagerOpts": {
17-
"assetExts": ["ttf", "mp4"],
16+
"assetExts": [
17+
"ttf",
18+
"mp4"
19+
],
1820
"config": "./metro.config.js",
1921
"projectRoots": ""
2022
},
2123
"ios": {
2224
"supportsTablet": true
2325
}
2426
}
25-
}
27+
}

‎example/metro.config.js

+31-19
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,44 @@
1-
/* eslint-disable import/no-commonjs */
1+
// /* eslint-disable import/no-commonjs */
22

33
const path = require('path');
4+
const fs = require('fs');
45
const blacklist = require('metro-config/src/defaults/blacklist');
5-
const pak = require('../package.json');
66
const escape = require('escape-string-regexp');
77

8-
const dependencies = Object.keys(pak.dependencies);
8+
const root = path.resolve(__dirname, '..');
9+
const pak = JSON.parse(
10+
fs.readFileSync(path.join(root, 'package.json'), 'utf8')
11+
);
12+
13+
const modules = [
14+
'@babel/runtime',
15+
'@expo/vector-icons',
16+
...Object.keys(pak.dependencies),
17+
...Object.keys(pak.peerDependencies),
18+
];
919

1020
module.exports = {
1121
projectRoot: __dirname,
12-
watchFolders: [path.resolve(__dirname, '..')],
22+
watchFolders: [root],
23+
1324
resolver: {
1425
blacklistRE: blacklist([
15-
new RegExp(
16-
`^${escape(path.resolve(__dirname, '..', 'node_modules'))}\\/.*$`
17-
),
18-
new RegExp(
19-
`^${escape(
20-
path.resolve(__dirname, '..', 'website', 'node_modules')
21-
)}\\/.*$`
22-
),
26+
new RegExp(`^${escape(path.join(root, 'node_modules'))}\\/.*$`),
27+
new RegExp(`^${escape(path.join(root, 'docs', 'node_modules'))}\\/.*$`),
2328
]),
24-
providesModuleNodeModules: [
25-
'react-native',
26-
'react',
27-
'@expo/vector-icons',
28-
'@babel/runtime',
29-
...dependencies,
30-
],
29+
30+
extraNodeModules: modules.reduce((acc, name) => {
31+
acc[name] = path.join(__dirname, 'node_modules', name);
32+
return acc;
33+
}, {}),
34+
},
35+
36+
transformer: {
37+
getTransformOptions: async () => ({
38+
transform: {
39+
experimentalImportSupport: false,
40+
inlineRequires: true,
41+
},
42+
}),
3143
},
3244
};

‎example/package.json

+21-12
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,47 @@
11
{
22
"name": "react-native-ios-kit-example",
33
"version": "0.0.1",
4-
"description": "react-native-ios-kit example!",
4+
"description": "Example for React Native iOS Kit",
55
"author": "",
66
"private": true,
77
"main": "node_modules/expo/AppEntry.js",
88
"scripts": {
9-
"start": "expo start",
9+
"start": "expo start -c",
1010
"android": "expo android",
1111
"ios": "expo ios"
1212
},
1313
"dependencies": {
14-
"@callstack/react-theme-provider": "^2.0.1",
14+
"@callstack/react-theme-provider": "^3.0.2",
15+
"@react-native-community/masked-view": "0.1.6",
16+
"@react-navigation/native": "^5.0.0",
17+
"@react-navigation/stack": "^5.0.0",
1518
"color": "^2.0.1",
1619
"exp": "^47.3.17",
17-
"expo": "^32.0.0",
20+
"expo": "^37.0.0",
1821
"glob-to-regexp": "^0.3.0",
19-
"react": "16.5.0",
20-
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
21-
"react-native-safe-area-view": "^0.2.0"
22+
"react": "16.9.0",
23+
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.0.tar.gz",
24+
"react-native-gesture-handler": "~1.6.0",
25+
"react-native-reanimated": "~1.7.0",
26+
"react-native-safe-area-context": "0.7.3",
27+
"react-native-safe-area-view": "^0.14.6",
28+
"react-native-screens": "~2.2.0",
29+
"react-native-vector-icons": "^6.6.0"
2230
},
2331
"devDependencies": {
2432
"@babel/plugin-proposal-class-properties": "^7.3.0",
2533
"@babel/plugin-proposal-object-rest-spread": "^7.3.1",
2634
"@babel/preset-env": "^7.3.1",
2735
"@babel/preset-flow": "^7.0.0",
2836
"@babel/preset-react": "^7.0.0",
29-
"babel-loader": "^8.0.5",
30-
"babel-plugin-module-resolver": "^3.1.1",
31-
"babel-preset-expo": "^5.0.0",
32-
"expo-cli": "^2.3.8"
37+
"@babel/preset-typescript": "^7.3.3",
38+
"@babel/runtime": "^7.9.2",
39+
"babel-plugin-module-resolver": "^4.0.0",
40+
"babel-preset-expo": "^8.1.0",
41+
"expo-cli": "^3.4.1"
3342
},
3443
"resolutions": {
35-
"**/react": "16.5.0",
44+
"**/react": "16.9.0",
3645
"**/color": "2.0.1",
3746
"**/lodash": "^4.17.4"
3847
}

0 commit comments

Comments
 (0)