update to expo sdk 48

dpolyakov · Apr 28, 2023 · bac0e77 · bac0e77
1 parent 3f735f8
commit bac0e77
Show file tree

Hide file tree

Showing 7 changed files with 1,579 additions and 949 deletions.
diff --git a/.npmrc b/.npmrc
@@ -0,0 +1 @@
+registry="https://registry.npmjs.org/"
diff --git a/.watchmanconfig b/.watchmanconfig
@@ -0,0 +1 @@
+{}
diff --git a/App.tsx b/App.tsx
@@ -1,64 +1,76 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View, Button, ActivityIndicator } from 'react-native';
+import {StatusBar} from 'expo-status-bar';
+import {StyleSheet, Text, View, Button, ActivityIndicator} from 'react-native';
 import * as React from 'react';
 
-import {FFmpegKit} from 'ffmpeg-kit-react-native';
-import * as FileSystem from 'expo-file-system';
-import * as ImagePicker from 'expo-image-picker';
-import { Video } from 'expo-av';
+import {FFmpegKit, FFmpegKitConfig, ReturnCode} from 'ffmpeg-kit-react-native';
+import {makeDirectoryAsync, getInfoAsync, cacheDirectory} from 'expo-file-system';
+import {launchImageLibraryAsync, MediaTypeOptions} from 'expo-image-picker';
+import {Video, AVPlaybackStatus} from 'expo-av';
 
-export default function App() {
-  const [result, setResult] = React.useState(null);
-  const [source, setSource] = React.useState(null);
-  const [isLoading, setLoading] = React.useState(false);
-
-  const getResultPath = async () => {
-    const videoDir = `${FileSystem.cacheDirectory}video/`;
+const getResultPath = async () => {
+  const videoDir = `${cacheDirectory}video/`;
 
-    // Checks if gif directory exists. If not, creates it
-    async function ensureDirExists() {
-      const dirInfo = await FileSystem.getInfoAsync(videoDir);
-      if (!dirInfo.exists) {
-        console.log("tmp directory doesn't exist, creating...");
-        await FileSystem.makeDirectoryAsync(videoDir, { intermediates: true });
-      }
+  // Checks if gif directory exists. If not, creates it
+  async function ensureDirExists() {
+    const dirInfo = await getInfoAsync(videoDir);
+    if (!dirInfo.exists) {
+      console.log("tmp directory doesn't exist, creating...");
+      await makeDirectoryAsync(videoDir, { intermediates: true });
     }
-
-    await ensureDirExists();
-
-    return `${videoDir}file2.mp4`;
   }
 
-  const getSourceVideo = async () => {
-    const result = await ImagePicker.launchImageLibraryAsync({
-      mediaTypes: ImagePicker.MediaTypeOptions.Videos
-    })
+  await ensureDirExists();
 
-    return (result.cancelled) ? null : result.uri
-  }
+  return `${videoDir}file2.mp4`;
+}
+
+const getSourceVideo = async () => {
+  console.log('select video')
+  const result = await launchImageLibraryAsync({
+    mediaTypes: MediaTypeOptions.Videos
+  })
+
+  return (result.canceled) ? null : result.assets[0].uri
+}
+
+export default function App() {
+  const [result, setResult] = React.useState('');
+  const [source, setSource] = React.useState('');
+  const [isLoading, setLoading] = React.useState(false);
+
+  React.useEffect(() => {
+    FFmpegKitConfig.init();
+  }, []);
 
   const onPress = async () => {
+    setLoading(() => true);
+    setResult(() => '');
+
     const resultVideo = await getResultPath();
     const sourceVideo = await getSourceVideo();
 
     if (!sourceVideo) {
+      setLoading(() => false);
       return;
     }
     setSource(() => sourceVideo)
-    setResult(() => null);
-    setLoading(() => true);
 
-    FFmpegKit
-      .execute(`-i ${sourceVideo} -c:v mpeg4 -y ${resultVideo}`)
-      .then((session) => {
-        setLoading(() => false);
-        setResult(() => resultVideo);
+    const ffmpegSession = await FFmpegKit
+      .execute(`-i ${sourceVideo} -c:v mpeg4 -y ${resultVideo}`);
 
-      }
-    );
+    const result = await ffmpegSession.getReturnCode();
+
+    if (ReturnCode.isSuccess(result)) {
+      setLoading(() => false);
+      setResult(() => resultVideo);
+    } else {
+      setLoading(() => false);
+      console.error(result);
+    }
 
     console.log(sourceVideo)
   }
+
   return (
     <View style={styles.container}>
       <StatusBar style="auto" />
@@ -72,15 +84,18 @@ export default function App() {
       <Plyr uri={source} title={'Source'} />
       {result &&
         <Plyr uri={result} title={'Result'} />
-      }       
+      }
     </View>
   );
 }
 
 
-const Plyr = props => {
+const Plyr = (props: {
+  title: string,
+  uri: string,
+}) => {
   const video = React.useRef(null);
-  const [status, setStatus] = React.useState({});
+  const [status, setStatus] = React.useState<AVPlaybackStatus | {}>({});
 
   return (
     <View style={styles.videoContainer}>
@@ -94,13 +109,14 @@ const Plyr = props => {
         useNativeControls
         resizeMode="contain"
         isLooping
-        onPlaybackStatusUpdate={status => setStatus(() => status)}
+        onPlaybackStatusUpdate={(status: AVPlaybackStatus) => setStatus(() => status)}
       />
       <View style={styles.buttons}>
         <Button
-          title={status.isPlaying ? 'Pause' : 'Play'}
+          title={status?.isPlaying ? 'Pause' : 'Play'}
+          disabled={(props.uri == '')}
           onPress={() =>
-            status.isPlaying ? video.current.pauseAsync() : video.current.playAsync()
+            status.isPlaying ? video?.current.pauseAsync() : video?.current.playAsync()
           }
         />
       </View>
@@ -132,5 +148,5 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-  },  
+  },
 });
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# Example expo.io (React Native) app with ffmpeg integration
+# Example expo.io (React Native) app with ffmpeg(FFmpegKit) integration
 
 ## Run
 - `yarn install`
@@ -7,9 +7,14 @@
 
 ## Requirements
 
-- MacOSX >= 11
-- XCode >= 13
-- expoSDK = 46
+- MacOSX >= 12
+- XCode >= 14
+- expoSDK = 48
+
+## Problems after upgrade expo sdk?
+- `rm -rf ~/Library/Developer/Xcode/DerivedData`
+- `rm -rf ~/Library/Caches/CocoaPods`
+- `npx expo prebuild --clean`
 
 ### Copyrights
-[Convert icons created by Hilmy Abiyyu A. - Flaticon](https://www.flaticon.com/free-icons/convert)
+[Convert icon created by Hilmy Abiyyu A. - Flaticon](https://www.flaticon.com/free-icons/convert)
diff --git a/package.json b/package.json
@@ -9,40 +9,40 @@
     "eject": "expo eject",
     "eas": "eas build --platform all",
     "eas:android": "eas build --platform android --profile development",
-    "eas:ios": "eas build --platform ios --profile development"    
+    "eas:ios": "eas build --platform ios --profile development"
   },
   "dependencies": {
-    "@config-plugins/ffmpeg-kit-react-native": "^3.0.0",
+    "@config-plugins/ffmpeg-kit-react-native": "^5.0.0",
     "@expo/vector-icons": "^13.0.0",
-    "@react-navigation/bottom-tabs": "^6.3.3",
-    "@react-navigation/native": "^6.0.12",
-    "@react-navigation/native-stack": "^6.8.0",
-    "expo": "~46.0.9",
-    "expo-asset": "~8.6.1",
-    "expo-av": "~12.0.4",
-    "expo-build-properties": "~0.3.0",
-    "expo-constants": "~13.2.3",
-    "expo-dev-client": "~1.2.1",
-    "expo-file-system": "~14.1.0",
-    "expo-font": "~10.2.0",
-    "expo-image-picker": "~13.3.1",
-    "expo-linking": "~3.2.2",
-    "expo-splash-screen": "~0.16.2",
-    "expo-status-bar": "~1.4.0",
-    "expo-web-browser": "~11.0.0",
-    "ffmpeg-kit-react-native": "^4.5.2",
-    "react": "18.0.0",
-    "react-dom": "18.0.0",
-    "react-native": "0.69.5",
-    "react-native-safe-area-context": "4.3.1",
-    "react-native-screens": "~3.15.0",
-    "react-native-web": "~0.18.7"
+    "@react-navigation/bottom-tabs": "^6.5.7",
+    "@react-navigation/native": "^6.1.6",
+    "@react-navigation/native-stack": "^6.9.12",
+    "expo": "~48.0.15",
+    "expo-asset": "~8.9.1",
+    "expo-av": "~13.2.1",
+    "expo-build-properties": "~0.6.0",
+    "expo-constants": "~14.2.1",
+    "expo-dev-client": "~2.2.1",
+    "expo-file-system": "~15.2.2",
+    "expo-font": "~11.1.1",
+    "expo-image-picker": "~14.1.1",
+    "expo-linking": "~4.0.1",
+    "expo-splash-screen": "~0.18.2",
+    "expo-status-bar": "~1.4.4",
+    "expo-web-browser": "~12.1.1",
+    "ffmpeg-kit-react-native": "^5.1.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.71.7",
+    "react-native-safe-area-context": "4.5.1",
+    "react-native-screens": "~3.20.0",
+    "react-native-web": "~0.19.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.6",
-    "@types/react": "~18.0.0",
-    "@types/react-native": "~0.69.1",
-    "typescript": "^4.6.3"
+    "@babel/core": "^7.20.0",
+    "@types/react": "~18.2.0",
+    "@types/react-native": "~0.71.6",
+    "typescript": "^5.0.4"
   },
   "private": true
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
+    "jsx": "react",
     "strict": true
   }
 }