From ab57489de533ffed7ff5bce56a4424ed21d67e59 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=8F=84=EB=8B=A4?= Date: Mon, 27 Jun 2022 21:47:27 +0900 Subject: [PATCH] =?UTF-8?q?=EC=95=88=EB=93=9C=EB=A1=9C=EC=9D=B4=EB=93=9C?= =?UTF-8?q?=20React=20Native=20=EB=B2=84=EC=A0=84=20=EC=97=85=20=EC=9D=B4?= =?UTF-8?q?=EC=8A=88=20=EB=8C=80=EC=9D=91=20(#109)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- android/build.gradle | 1 + package.json | 3 + patches/react-native-reanimated+2.8.0.patch | 17 +++++ src/components/ShareHandler.tsx | 5 +- src/components/WebView.tsx | 16 ++-- src/components/YgtStatusBar.tsx | 8 +- src/screens/HomeScreen.tsx | 5 +- src/screens/SplashScreen.tsx | 2 + yarn.lock | 82 +++++++++++++++++++-- 9 files changed, 114 insertions(+), 25 deletions(-) create mode 100644 patches/react-native-reanimated+2.8.0.patch diff --git a/android/build.gradle b/android/build.gradle index 8a1d68f..a2fde1e 100644 --- a/android/build.gradle +++ b/android/build.gradle @@ -7,6 +7,7 @@ buildscript { compileSdkVersion = 31 targetSdkVersion = 31 ndkVersion = "21.4.7075529" + kotlinVersion = "1.6.21" } repositories { google() diff --git a/package.json b/package.json index 919faf0..5f1160a 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "1.1.0", "private": true, "scripts": { + "postinstall": "patch-package", "android": "react-native run-android", "ios": "react-native run-ios", "start": "react-native start", @@ -16,6 +17,8 @@ "@react-navigation/stack": "^6.2.1", "lottie-ios": "3.2.3", "lottie-react-native": "^5.1.3", + "patch-package": "^6.4.7", + "postinstall-postinstall": "^2.1.0", "react": "18.0.0", "react-native": "0.69.0", "react-native-gesture-handler": "^2.4.2", diff --git a/patches/react-native-reanimated+2.8.0.patch b/patches/react-native-reanimated+2.8.0.patch new file mode 100644 index 0000000..93cba0a --- /dev/null +++ b/patches/react-native-reanimated+2.8.0.patch @@ -0,0 +1,17 @@ +diff --git a/node_modules/react-native-reanimated/android/build.gradle b/node_modules/react-native-reanimated/android/build.gradle +index cc460da..882402f 100644 +--- a/node_modules/react-native-reanimated/android/build.gradle ++++ b/node_modules/react-native-reanimated/android/build.gradle +@@ -149,10 +149,10 @@ def detectAAR(minor, engine) { + println "\n\n\n" + println "****************************************************************************************" + println "\n\n\n" +- println "WARNING reanimated - no version-specific reanimated AAR for react-native version $rnMinorVersion found." ++ println "WARNING reanimated - no version-specific reanimated AAR for react-native version $rnMinorVersionCopy found." + println "Falling back to AAR for react-native version $rnMinorVersionCopy." + println "The react-native JSI interface is not ABI-safe yet, this may result in crashes." +- println "Please post a pull request to implement support for react-native version $rnMinorVersion to the reanimated repo." ++ println "Please post a pull request to implement support for react-native version $rnMinorVersionCopy to the reanimated repo." + println "Thanks!" + println "\n\n\n" + println "****************************************************************************************" diff --git a/src/components/ShareHandler.tsx b/src/components/ShareHandler.tsx index 3ca0905..2e2384b 100644 --- a/src/components/ShareHandler.tsx +++ b/src/components/ShareHandler.tsx @@ -143,10 +143,7 @@ export const ShareHandler = ({ data, mimeType, handleClose, onMessage, onLoadEnd { - if (!ref) return; - webViewRef.current = ref; - }} + customRef={webViewRef} onMessage={onReceiveMessage} onNavigate={handleNavigateChange} onLoadEnd={handleLoadEnd} diff --git a/src/components/WebView.tsx b/src/components/WebView.tsx index 31adc56..cee2a04 100644 --- a/src/components/WebView.tsx +++ b/src/components/WebView.tsx @@ -8,7 +8,7 @@ import theme from '~/styles/theme'; interface WebViewProps { uri: string; // eslint-disable-next-line @typescript-eslint/ban-types - customRef?: (ref: any) => void | undefined; + customRef?: React.MutableRefObject | undefined>; onMessage?: (event: WebViewMessageEvent) => void; onNavigate?: (event: WebViewNavigation) => boolean; onLoadEnd?: () => void; @@ -23,7 +23,7 @@ export default function WebView({ }: WebViewProps) { const [isError, setIsError] = useState(false); // eslint-disable-next-line react-hooks/rules-of-hooks - const webViewRef = useRef(); + const webViewRef = customRef ?? useRef(); const fadeAnimationRef = useRef(new Animated.Value(0)); const animationConfig: Animated.TimingAnimationConfig = useMemo(() => { @@ -97,14 +97,10 @@ export default function WebView({ }} > { - if (!ref) return; - webViewRef.current = ref; - } - } + ref={ref => { + if (!ref) return; + webViewRef.current = ref; + }} source={{ uri }} bounces={false} applicationNameForUserAgent={'YgtangApp/1.0'} diff --git a/src/components/YgtStatusBar.tsx b/src/components/YgtStatusBar.tsx index 43a435b..460688b 100644 --- a/src/components/YgtStatusBar.tsx +++ b/src/components/YgtStatusBar.tsx @@ -1,6 +1,10 @@ import React from 'react'; import { StatusBar } from 'react-native'; -export function YgtStatusBar() { - return ; +interface StatusBarProps { + bgColor?: string; +} + +export function YgtStatusBar({ bgColor = '#D6DBDC' }: StatusBarProps) { + return ; } diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx index 3946b72..23e2ae0 100644 --- a/src/screens/HomeScreen.tsx +++ b/src/screens/HomeScreen.tsx @@ -30,10 +30,7 @@ export default function HomeScreen() { style={{ flex: 1, backgroundColor: theme.color.background }} > { - if (!ref) return; - webViewRef.current = ref; - }} + customRef={webViewRef} uri={BASE_URI} onLoadEnd={handleLoadEnd} onMessage={onReceiveMessage} diff --git a/src/screens/SplashScreen.tsx b/src/screens/SplashScreen.tsx index 98913f9..88dad17 100644 --- a/src/screens/SplashScreen.tsx +++ b/src/screens/SplashScreen.tsx @@ -3,6 +3,7 @@ import { StackNavigationProp } from '@react-navigation/stack'; import LottieView from 'lottie-react-native'; import { StyleSheet, View } from 'react-native'; +import { YgtStatusBar } from '~/components/YgtStatusBar'; import { MainNavigatorParamsType } from '~/navigation/MainNavigator'; import theme from '~/styles/theme'; @@ -17,6 +18,7 @@ export default function SplashScreen({ navigation: { replace } }: SplashScreenPr return ( +