Skip to content

Commit 56a7e42

Browse files
bluerssenbluerssen
authored
Update to Expo 47 (#552)
* Update Libraries to Expo 47 * Update yarn.lock * Update Packages for Example * Fix Overlay AnimatedInterpolation Type software-mansion/react-native-gesture-handler#2259 * Update yarn.lock * Update yarn.lock * Update Example App For 47 * Reset Packages * Update Remaining Packages * Update App.tsx * v47.0.0
1 parent 40f39c4 commit 56a7e42

File tree

11 files changed

+814
-706
lines changed

11 files changed

+814
-706
lines changed

‎example/package.json‎

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "@draftbit/example",
33
"description": "Example app for @draftbit/ui",
4-
"version": "46.5.1",
4+
"version": "47.0.0",
55
"private": true,
66
"main": "__generated__/AppEntry.js",
77
"scripts": {
@@ -15,29 +15,32 @@
1515
"clean:modules": "rimraf node_modules"
1616
},
1717
"dependencies": {
18-
"@draftbit/maps": "^46.5.1",
19-
"@draftbit/ui": "^46.5.1",
20-
"@expo/dev-server": "0.1.120",
21-
"@expo/webpack-config": "^0.17.0",
22-
"@react-navigation/drawer": "^5.7.7",
23-
"@react-navigation/native": "^5.4.2",
24-
"@shopify/flash-list": "1.2.0",
25-
"expo": "^46.0.7",
26-
"expo-app-loading": "~2.1.0",
27-
"expo-font": "~10.2.0",
28-
"expo-status-bar": "~1.4.0",
29-
"react": "18.0.0",
30-
"react-dom": "18.0.0",
31-
"react-native": "0.69.6",
32-
"react-native-gesture-handler": "~2.5.0",
33-
"react-native-reanimated": "~2.9.1",
34-
"react-native-safe-area-context": "4.3.1",
35-
"react-native-screens": "~3.15.0",
18+
"@draftbit/maps": "^47.0.0",
19+
"@draftbit/ui": "^47.0.0",
20+
"@expo/dev-server": "0.1.123",
21+
"@expo/webpack-config": "^0.17.2",
22+
"@react-navigation/drawer": "^5.12.9",
23+
"@react-navigation/native": "^5.9.8",
24+
"@shopify/flash-list": "1.3.1",
25+
"expo": "^47.0.0",
26+
"expo-app-loading": "~2.1.1",
27+
"expo-asset": "~8.7.0",
28+
"expo-constants": "~14.0.2",
29+
"expo-font": "~11.0.1",
30+
"expo-splash-screen": "~0.17.5",
31+
"expo-status-bar": "~1.4.2",
32+
"react": "18.1.0",
33+
"react-dom": "18.1.0",
34+
"react-native": "0.70.5",
35+
"react-native-gesture-handler": "~2.8.0",
36+
"react-native-reanimated": "~2.12.0",
37+
"react-native-safe-area-context": "4.4.1",
38+
"react-native-screens": "~3.18.0",
3639
"react-native-web": "~0.18.7"
3740
},
3841
"devDependencies": {
39-
"@babel/core": "^7.20.5",
40-
"@types/react": "18.0.0",
41-
"@types/react-native": "0.69.5"
42+
"@babel/core": "^7.19.3",
43+
"@types/react": "~18.0.24",
44+
"@types/react-native": "~0.70.6"
4245
}
4346
}

‎example/src/App.tsx‎

Lines changed: 117 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,30 @@
1+
import { Asset } from "expo-asset";
2+
import Constants from "expo-constants";
3+
import * as SplashScreen from "expo-splash-screen";
4+
import React, { useCallback, useEffect, useMemo, useState } from "react";
5+
import {
6+
Animated,
7+
View,
8+
Text,
9+
Image,
10+
TouchableOpacity,
11+
StyleSheet,
12+
} from "react-native";
13+
114
import {
215
NavigationContainer,
316
useNavigation,
417
DrawerActions,
518
} from "@react-navigation/native";
619
import { createDrawerNavigator } from "@react-navigation/drawer";
720
import "react-native-gesture-handler";
8-
import * as React from "react";
9-
import { View, Text, Image, TouchableOpacity, StyleSheet } from "react-native";
21+
1022
import { Provider, DefaultTheme, ScreenContainer } from "@draftbit/ui";
1123
import {
1224
SafeAreaProvider,
1325
initialWindowMetrics,
1426
} from "react-native-safe-area-context";
15-
import AppLoading from "expo-app-loading";
27+
1628
import * as Font from "expo-font";
1729

1830
import AudioPlayerExample from "./AudioPlayerExample";
@@ -128,6 +140,108 @@ const Drawer = createDrawerNavigator();
128140

129141
type ExampleProps = { title: string; children: React.ReactNode };
130142

143+
SplashScreen.preventAutoHideAsync().catch(() => {});
144+
145+
export default function App() {
146+
return (
147+
<SplashScreenProvider image={{ uri: Constants.manifest.splash.image }}>
148+
<Provider theme={DefaultTheme}>
149+
<SafeAreaProvider initialMetrics={initialWindowMetrics}>
150+
<Examples />
151+
</SafeAreaProvider>
152+
</Provider>
153+
</SplashScreenProvider>
154+
);
155+
}
156+
157+
function SplashScreenProvider({ children, image }) {
158+
const [isSplashReady, setSplashReady] = useState(false);
159+
160+
useEffect(() => {
161+
async function prepare() {
162+
try {
163+
// Pre-load fonts, make any api calls you need to do here
164+
await Font.loadAsync(customFonts);
165+
await Asset.fromURI(image.uri).downloadAsync();
166+
} catch (e) {
167+
console.warn(e);
168+
} finally {
169+
setSplashReady(true);
170+
}
171+
}
172+
173+
prepare();
174+
}, [image]);
175+
176+
if (!isSplashReady) {
177+
return null;
178+
}
179+
180+
return <AnimatedSplashScreen image={image}>{children}</AnimatedSplashScreen>;
181+
}
182+
183+
function AnimatedSplashScreen({ children, image }) {
184+
const animation = useMemo(() => new Animated.Value(1), []);
185+
const [isAppReady, setAppReady] = useState(false);
186+
const [isSplashAnimationComplete, setAnimationComplete] = useState(false);
187+
188+
useEffect(() => {
189+
if (isAppReady) {
190+
Animated.timing(animation, {
191+
toValue: 0,
192+
duration: 1000,
193+
useNativeDriver: true,
194+
}).start(() => setAnimationComplete(true));
195+
}
196+
}, [isAppReady, animation]);
197+
198+
const onImageLoaded = useCallback(async () => {
199+
try {
200+
await SplashScreen.hideAsync();
201+
// Load stuff
202+
await Promise.all([]);
203+
} catch (e) {
204+
// handle errors
205+
} finally {
206+
setAppReady(true);
207+
}
208+
}, []);
209+
210+
return (
211+
<View style={{ flex: 1 }}>
212+
{isAppReady && children}
213+
{!isSplashAnimationComplete && (
214+
<Animated.View
215+
pointerEvents="none"
216+
style={[
217+
StyleSheet.absoluteFill,
218+
{
219+
backgroundColor: Constants.manifest.splash.backgroundColor,
220+
opacity: animation,
221+
},
222+
]}
223+
>
224+
<Animated.Image
225+
style={{
226+
width: "100%",
227+
height: "100%",
228+
resizeMode: Constants.manifest.splash.resizeMode || "contain",
229+
transform: [
230+
{
231+
scale: animation,
232+
},
233+
],
234+
}}
235+
source={image}
236+
onLoadEnd={onImageLoaded}
237+
fadeDuration={0}
238+
/>
239+
</Animated.View>
240+
)}
241+
</View>
242+
);
243+
}
244+
131245
function Example({ title, children }: ExampleProps) {
132246
const navigation = useNavigation();
133247

@@ -183,22 +297,6 @@ function Examples() {
183297
);
184298
}
185299

186-
export default function App() {
187-
const [loaded] = Font.useFonts(customFonts);
188-
189-
if (!loaded) {
190-
return <AppLoading />;
191-
}
192-
193-
return (
194-
<Provider theme={DefaultTheme}>
195-
<SafeAreaProvider initialMetrics={initialWindowMetrics}>
196-
<Examples />
197-
</SafeAreaProvider>
198-
</Provider>
199-
);
200-
}
201-
202300
const exampleStyles = StyleSheet.create({
203301
mainParent: {
204302
width: "100%",

‎lerna.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"version": "46.5.1",
2+
"version": "47.0.0",
33
"npmClient": "yarn",
44
"useWorkspaces": true,
55
"packages": ["packages/*", "example"],

‎packages/core/package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@draftbit/core",
3-
"version": "46.5.1",
3+
"version": "47.0.0",
44
"description": "Core (non-native) Components",
55
"main": "lib/commonjs/index.js",
66
"module": "lib/module/index.js",
@@ -41,20 +41,20 @@
4141
"dependencies": {
4242
"@date-io/date-fns": "^1.3.13",
4343
"@draftbit/react-theme-provider": "^2.1.1",
44-
"@draftbit/types": "^46.5.1",
44+
"@draftbit/types": "^47.0.0",
4545
"@material-ui/core": "^4.11.0",
4646
"@material-ui/pickers": "^3.2.10",
47-
"@react-native-community/slider": "4.2.3",
48-
"@react-native-picker/picker": "2.4.2",
49-
"@shopify/flash-list": "1.2.0",
47+
"@react-native-community/slider": "4.2.4",
48+
"@react-native-picker/picker": "2.4.8",
49+
"@shopify/flash-list": "1.3.1",
5050
"color": "^3.1.2",
5151
"date-fns": "^2.16.1",
5252
"dateformat": "^3.0.3",
5353
"lodash.isnumber": "^3.0.3",
5454
"lodash.omit": "^4.5.0",
5555
"lodash.tonumber": "^4.0.3",
5656
"react-native-modal-datetime-picker": "^13.0.0",
57-
"react-native-svg": "12.3.0",
57+
"react-native-svg": "13.4.0",
5858
"react-native-typography": "^1.4.1",
5959
"react-native-web-swiper": "^2.2.3"
6060
},

‎packages/core/src/styles/overlay.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ import { Animated } from "react-native";
44
import DarkTheme from "./DarkTheme";
55

66
const isAnimatedValue = (
7-
it: number | Animated.AnimatedInterpolation
7+
it: number | Animated.AnimatedInterpolation<string | number>
88
): it is Animated.Value => it instanceof Animated.Value;
99

1010
export default function overlay<T extends Animated.Value | number>(
1111
elevation: T,
1212
surfaceColor: string = DarkTheme.colors.surface
13-
): T extends number ? string : Animated.AnimatedInterpolation {
13+
): T extends number ? string : Animated.AnimatedInterpolation<string | number> {
1414
if (isAnimatedValue(elevation)) {
1515
const inputRange = [0, 1, 2, 3, 8, 24];
1616

‎packages/maps/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@draftbit/maps",
3-
"version": "46.5.1",
3+
"version": "47.0.0",
44
"description": "Map Components",
55
"main": "lib/commonjs/index.js",
66
"module": "lib/module/index.js",
@@ -39,9 +39,9 @@
3939
},
4040
"homepage": "https://github.com/draftbit/react-native-jigsaw#readme",
4141
"dependencies": {
42-
"@draftbit/types": "^46.5.1",
43-
"@draftbit/web-maps": "^46.5.1",
44-
"react-native-maps": "0.31.1"
42+
"@draftbit/types": "^47.0.0",
43+
"@draftbit/web-maps": "^47.0.0",
44+
"react-native-maps": "1.3.2"
4545
},
4646
"react-native-builder-bob": {
4747
"declarationMap": false,

‎packages/native/package.json‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@draftbit/native",
3-
"version": "46.5.1",
3+
"version": "47.0.0",
44
"description": "Draftbit UI Components that Depend on Native Components",
55
"main": "lib/commonjs/index.js",
66
"module": "lib/module/index.js",
@@ -36,15 +36,15 @@
3636
},
3737
"homepage": "https://github.com/draftbit/react-native-jigsaw#readme",
3838
"dependencies": {
39-
"@draftbit/types": "^46.5.1",
39+
"@draftbit/types": "^47.0.0",
4040
"@expo/vector-icons": "^13.0.0",
41-
"@react-native-community/datetimepicker": "6.2.0",
42-
"@react-native-community/slider": "4.2.3",
43-
"expo-av": "~12.0.4",
44-
"expo-camera": "~12.3.0",
45-
"expo-linear-gradient": "~11.4.0",
46-
"react-native-svg": "12.3.0",
47-
"react-native-webview": "11.23.0"
41+
"@react-native-community/datetimepicker": "6.5.2",
42+
"@react-native-community/slider": "4.2.4",
43+
"expo-av": "~13.0.2",
44+
"expo-camera": "~13.1.0",
45+
"expo-linear-gradient": "~12.0.1",
46+
"react-native-svg": "13.4.0",
47+
"react-native-webview": "11.23.1"
4848
},
4949
"react-native-builder-bob": {
5050
"declarationMap": false,

‎packages/types/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@draftbit/types",
3-
"version": "46.5.1",
3+
"version": "47.0.0",
44
"description": "Shared constants and types between native and core components",
55
"main": "lib/commonjs/index.js",
66
"module": "lib/module/index.js",

‎packages/ui/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@draftbit/ui",
3-
"version": "46.5.1",
3+
"version": "47.0.0",
44
"description": "Draftbit UI Library",
55
"main": "lib/commonjs/index.js",
66
"module": "lib/module/index.js",
@@ -43,8 +43,8 @@
4343
},
4444
"homepage": "https://github.com/draftbit/react-native-jigsaw#readme",
4545
"dependencies": {
46-
"@draftbit/core": "^46.5.1",
47-
"@draftbit/native": "^46.5.1"
46+
"@draftbit/core": "^47.0.0",
47+
"@draftbit/native": "^47.0.0"
4848
},
4949
"react-native-builder-bob": {
5050
"declarationMap": false,

‎packages/web-maps/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@draftbit/web-maps",
3-
"version": "46.5.1",
3+
"version": "47.0.0",
44
"description": "Web Map Components",
55
"main": "lib/commonjs/index.js",
66
"module": "lib/module/index.js",
@@ -39,7 +39,7 @@
3939
},
4040
"homepage": "https://github.com/draftbit/react-native-jigsaw#readme",
4141
"dependencies": {
42-
"@draftbit/types": "^46.5.1",
42+
"@draftbit/types": "^47.0.0",
4343
"@react-google-maps/api": "^2.10.2"
4444
},
4545
"react-native-builder-bob": {

0 commit comments

Comments
 (0)