Fix sample app

Author: adimiz1

example/.gitignore

@@ -0,0 +1,35 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo

example/App.js

@@ -1,13 +1,13 @@
 import { StyleSheet, View } from 'react-native';
-import {AdvancedImage, upload} from 'cloudinary-react-native';
+import {AdvancedImage, AdvancedVideo} from 'cloudinary-react-native';
 import {Cloudinary} from '@cloudinary/url-gen';
 import {scale} from "@cloudinary/url-gen/actions/resize";
 import {cartoonify} from "@cloudinary/url-gen/actions/effect";
 import {max} from "@cloudinary/url-gen/actions/roundCorners";
 import React, {useRef} from "react";
 import { streamingProfile } from '@cloudinary/url-gen/actions/transcode';
-import AdvancedVideo from '../../src/AdvancedVideo';
 import { Video } from 'expo-av';
+import {  } from 'cloudinary-react-native';
 
 const cld = new Cloudinary({
   cloud: {
@@ -33,8 +33,8 @@ export default function App() {
   return (
     <View style={styles.container}>
       <View>
-      <AdvancedImage cldImg={createMyImage()} style={{backgroundColor:"black", width:300, height:200}}/>
-    </View>
+        <AdvancedImage cldImg={createMyImage()} style={{backgroundColor:"black", width:300, height:200}}/>
+      </View>
       <View style={styles.videoContainer}>
         <AdvancedVideo
           ref={videoPlayer}

example/src/App.tsx example/App.tsxexample/src/App.tsx renamed to example/App.tsx

@@ -15,10 +15,7 @@
       "**/*"
     ],
     "ios": {
-      "supportsTablet": true,
-      "infoPlist": {
-        "NSPhotoLibraryUsageDescription": "Allow access to photos"
-      }
+      "supportsTablet": true
     },
     "android": {
       "adaptiveIcon": {

example/app.json

@@ -1,22 +1,6 @@
-const path = require('path');
-const pak = require('../package.json');
-
-module.exports = function (api) {
+module.exports = function(api) {
   api.cache(true);
-
   return {
     presets: ['babel-preset-expo'],
-    plugins: [
-      [
-        'module-resolver',
-        {
-          extensions: ['.tsx', '.ts', '.js', '.json'],
-          alias: {
-            // For development, we want to alias the library to the source
-            [pak.name]: path.join(__dirname, '..', pak.source),
-          },
-        },
-      ],
-    ],
   };
 };

example/assets/logo.png

@@ -1,37 +1,13 @@
-const path = require('path');
-const escape = require('escape-string-regexp');
-const { getDefaultConfig } = require('@expo/metro-config');
-const exclusionList = require('metro-config/src/defaults/exclusionList');
-const pak = require('../package.json');
-const root = path.resolve(__dirname, '..');
+// Learn more https://docs.expo.io/guides/customizing-metro
+const { getDefaultConfig } = require('expo/metro-config');
 
-const modules = Object.keys({
-  ...pak.peerDependencies,
-});
+/** @type {import('expo/metro-config').MetroConfig} */
+const config = getDefaultConfig(__dirname);
 
-const defaultConfig = getDefaultConfig(__dirname);
+const packagePath = "../";
 
-module.exports = {
-  ...defaultConfig,
+config.resolver.nodeModulesPaths.push(packagePath);
 
-  projectRoot: __dirname,
-  watchFolders: [root],
+config.watchFolders.push(packagePath);
 
-  // We need to make sure that only one version is loaded for peerDependencies
-  // So we block them at the root, and alias them to the versions in example's node_modules
-  resolver: {
-    ...defaultConfig.resolver,
-
-    blacklistRE: exclusionList(
-      modules.map(
-        (m) =>
-          new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
-      )
-    ),
-
-    extraNodeModules: modules.reduce((acc, name) => {
-      acc[name] = path.join(__dirname, 'node_modules', name);
-      return acc;
-    }, {}),
-  },
-};
+module.exports = config;

example/babel.config.js

@@ -9,23 +9,26 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    "expo": "~48.0.15",
-    "expo-asset": "^8.10.1",
-    "expo-file-system": "~15.2.2",
-    "expo-status-bar": "~1.4.4",
+    "@expo/config": "~8.5.0",
+    "@expo/metro-config": "~0.17.1",
+    "cloudinary-react-native": "../",
+    "expo": "~50.0.17",
+    "expo-status-bar": "~1.11.1",
     "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-native": "0.71.8",
-    "react-native-blob-util": "^0.18.3",
-    "react-native-sha1": "^1.2.3",
-    "react-native-sha256": "^1.4.9",
-    "react-native-web": "~0.18.10"
+    "react-native": "0.73.6"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@expo/webpack-config": "^18.0.1",
-    "babel-loader": "^8.1.0",
-    "babel-plugin-module-resolver": "^4.1.0"
+    "@types/react": "~18.2.45",
+    "typescript": "^5.3.0"
   },
-  "private": true
-}
+  "expo": {
+    "autolinking": {
+      "nativeModulesDir": "../../packages"
+    }
+  },
+  "private": true,
+  "localDependencies": {
+    "cloudinary-react-native": ".."
+  }
+}

example/metro.config.js

@@ -1,6 +1,6 @@
 {
-  "extends": "../tsconfig",
+  "extends": "expo/tsconfig.base",
   "compilerOptions": {
-    // Avoid expo-cli auto-generating a tsconfig
+    "strict": true
   }
 }