feat: migrate to native views

PierreCapo · Dec 29, 2023 · 7308e37 · 7308e37
1 parent 7b21d72
commit 7308e37
Show file tree

Hide file tree

Showing 21 changed files with 250 additions and 317 deletions.
diff --git a/README.md b/README.md
@@ -16,26 +16,36 @@ npm install react-native-pictures
 
 ## Usage
 
-Here's a simple example to showcase how you can use React Native Pictures in your app:
+Here's a simple example to showcase how you can use React Native Pictures in your app.
+It's recommended that the viewer takes the entire available space:
 
 ```js
-import PictureManager from 'react-native-pictures';
+import {PictureViewer} from 'react-native-pictures';
 
 // ...
 
-const imageUrl = "https://images.unsplash.com/photo-1462331940025-496dfbfc7564"
-const result = PictureManager.openPictureViewer(imageUrl);
+<PictureViewer
+  imageUrl={"https://w.wallhaven.cc/full/r4/wallhaven-r42m09.jpg"}
+  style={{
+    width: "100%",
+    height: "100%"
+  }}
+/>
 ```
 
 ## API
 
-For now, the only function supported is `openPictureViewer(url: string)`.
-More to come!
+### PictureViewer
+
+| Props | Type | Description |
+| --- | --- | --- |
+| imageUrl | string | The remote image url you want to see |
+| style | ViewStyle | Style of PictureViewer.
 
 ## Roadmap
 
+- **More controls:** Add ability to display local images, gesture event listeners, etc.
 - **Custom Android Implementation:** Replace PhotoView with a custom implementation, as PhotoView is no longer maintained.
-- **Native Component Integration:** Transition from Activity/UIViewController to View/UIView for seamless embedding within React Native screens. This will allow greater flexibility for consumer applications.
 - **Image Cropping Feature:** Implement a cropping feature to leverage the pan and zoom capabilities, making it easier to integrate an image cropping screen.
 
 

diff --git a/android/src/main/AndroidManifest.xml b/android/src/main/AndroidManifest.xml
@@ -1,7 +1,3 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-  package="com.pictures">
-
-  <application>
-    <activity android:name=".PictureViewerActivity" />
-  </application>
+          package="com.pictures">
 </manifest>
diff --git a/android/src/main/AndroidManifestNew.xml b/android/src/main/AndroidManifestNew.xml
@@ -1,7 +1,2 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-  package="com.pictures">
-
-  <application>
-    <activity android:name=".PictureViewerActivity" />
-  </application>
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
 </manifest>
diff --git a/android/src/main/java/com/pictures/PictureViewerActivity.kt b/android/src/main/java/com/pictures/PictureViewerActivity.kt
diff --git a/android/src/main/java/com/pictures/PicturesModule.kt b/android/src/main/java/com/pictures/PicturesModule.kt
diff --git a/android/src/main/java/com/pictures/PicturesPackage.kt b/android/src/main/java/com/pictures/PicturesPackage.kt
@@ -8,10 +8,10 @@ import com.facebook.react.uimanager.ViewManager
 
 class PicturesPackage : ReactPackage {
   override fun createNativeModules(reactContext: ReactApplicationContext): List<NativeModule> {
-    return listOf(PicturesModule(reactContext))
+    return emptyList()
   }
 
   override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
-    return emptyList()
+    return listOf(PicturesViewManager())
   }
 }
diff --git a/android/src/main/java/com/pictures/PicturesViewManager.kt b/android/src/main/java/com/pictures/PicturesViewManager.kt
@@ -0,0 +1,72 @@
+package com.pictures
+
+import android.view.View
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.annotations.ReactProp
+import android.content.Context
+import android.graphics.Bitmap
+import android.graphics.BitmapFactory
+import android.widget.FrameLayout
+import com.github.chrisbanes.photoview.PhotoView
+import java.net.HttpURLConnection
+import java.net.URL
+
+class PicturesViewManager : SimpleViewManager<PicturesView>() {
+  override fun getName() = "PicturesView"
+
+  override fun createViewInstance(reactContext: ThemedReactContext): PicturesView {
+    return PicturesView(reactContext)
+  }
+
+  @ReactProp(name = "imageUrl")
+  fun setImageUrl(view: PicturesView, imageUrl: String) {
+    view.loadImage(imageUrl)
+  }
+
+}
+
+class PicturesView(context: Context) : FrameLayout(context) {
+
+  private val imageView: PhotoView = PhotoView(context).apply {
+    layoutParams = LayoutParams(
+      LayoutParams.MATCH_PARENT,
+      LayoutParams.MATCH_PARENT
+    )
+  }
+
+  init {
+    addView(imageView)
+  }
+
+  fun loadImage(imageUrl: String) {
+    // Load the image similarly as in your activity
+    Thread {
+      try {
+        val url = URL(imageUrl)
+        val connection = url.openConnection() as HttpURLConnection
+        connection.doInput = true
+        connection.connect()
+        val inputStream = connection.inputStream
+        val originalBitmap = BitmapFactory.decodeStream(inputStream)
+
+        // Resize the bitmap to avoid Bitmap being too big and causing a crash
+        val aspectRatio = originalBitmap.width.toFloat() / originalBitmap.height.toFloat()
+        val targetWidth = imageView.width // You might want to adjust this
+        val targetHeight = (targetWidth / aspectRatio).toInt()
+
+        val resizedBitmap =
+          Bitmap.createScaledBitmap(originalBitmap, targetWidth, targetHeight, false)
+
+
+        post {
+          imageView.setImageBitmap(resizedBitmap)
+        }
+      } catch (e: Exception) {
+        e.printStackTrace()
+        // Handle exceptions
+      }
+    }.start()
+  }
+}
+
diff --git a/example/ios/PicturesExample.xcodeproj/project.pbxproj b/example/ios/PicturesExample.xcodeproj/project.pbxproj
@@ -418,7 +418,7 @@
 					"$(inherited)",
 				);
 				INFOPLIST_FILE = PicturesExampleTests/Info.plist;
-				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 13.4;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
@@ -442,7 +442,7 @@
 				BUNDLE_LOADER = "$(TEST_HOST)";
 				COPY_PHASE_STRIP = NO;
 				INFOPLIST_FILE = PicturesExampleTests/Info.plist;
-				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 13.4;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
@@ -469,7 +469,6 @@
 				DEVELOPMENT_TEAM = 9A48KBL3Q4;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = PicturesExample/Info.plist;
-				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
@@ -497,7 +496,6 @@
 				CURRENT_PROJECT_VERSION = 1;
 				DEVELOPMENT_TEAM = 9A48KBL3Q4;
 				INFOPLIST_FILE = PicturesExample/Info.plist;
-				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
@@ -564,7 +562,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 13.4;
 				LD_RUNPATH_SEARCH_PATHS = (
 					/usr/lib/swift,
 					"$(inherited)",
@@ -637,7 +635,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 13.4;
 				LD_RUNPATH_SEARCH_PATHS = (
 					/usr/lib/swift,
 					"$(inherited)",

diff --git a/example/ios/PicturesExample/Info.plist b/example/ios/PicturesExample/Info.plist
@@ -45,8 +45,6 @@
 		<string>UIInterfaceOrientationLandscapeLeft</string>
 		<string>UIInterfaceOrientationLandscapeRight</string>
 	</array>
-  <key>NSPhotoLibraryUsageDescription</key>
-	<string>This app wants to access your photo gallery</string>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
 </dict>

diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -944,7 +944,7 @@ PODS:
   - React-Mapbuffer (0.73.1):
     - glog
     - React-debug
-  - react-native-pictures (0.1.0):
+  - react-native-pictures (0.3.1):
     - glog
     - RCT-Folly (= 2022.05.16.00)
     - React-Core
@@ -1351,7 +1351,7 @@ SPEC CHECKSUMS:
   React-jsinspector: 369048694e39942063c5d08e9580b43e2edd379a
   React-logger: e0c1e918d9588a9f39c9bc62d9d6bfe9ca238d9d
   React-Mapbuffer: 9731a0a63ebaf8976014623c4d637744d7353a7c
-  react-native-pictures: eda9d4b7353153b57a5db140260e44764d74b5ba
+  react-native-pictures: de0d1c027204e14785cfa3d025024aebbbd2e8c4
   React-nativeconfig: 37aecd26d64b79327c3f10e43b2e9a6c425e0a60
   React-NativeModulesApple: 9ca6d2eaa1dd5606588262195b46d0774bdec83a
   React-perflogger: 5ffc4d6ccb74eaac7b8b2867e58a447232483d6d
@@ -1375,6 +1375,6 @@ SPEC CHECKSUMS:
   SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
   Yoga: 4f53dc50008d626fa679c7a1cb4bed898f8c0bde
 
-PODFILE CHECKSUM: 18fe640b479ffb2cb7af6a7e58899b09d1f31fcc
+PODFILE CHECKSUM: 26fc151c7d8586e3b6acee2c5d9760d45e6d6ffb
 
 COCOAPODS: 1.14.3
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,28 +1,15 @@
 import * as React from 'react';
 
-import { StyleSheet, View, Text, Pressable } from 'react-native';
-import { openPictureViewer } from 'react-native-pictures';
+import { StyleSheet, View } from 'react-native';
+import { PicturesViewer } from 'react-native-pictures';
 
 export default function App() {
   return (
     <View style={styles.container}>
-      <Pressable
-        onPress={() => {
-          openPictureViewer(
-            'https://images.unsplash.com/photo-1462331940025-496dfbfc7564?q=80&w=2422&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
-          );
-        }}
-        style={{
-          height: 50,
-          paddingHorizontal: 32,
-          borderRadius: 12,
-          backgroundColor: 'cyan',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}
-      >
-        <Text>Click me</Text>
-      </Pressable>
+      <PicturesViewer
+        style={styles.box}
+        imageUrl={'https://w.wallhaven.cc/full/r4/wallhaven-r42m09.jpg'}
+      />
     </View>
   );
 }
@@ -32,10 +19,11 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
+    backgroundColor: 'white',
   },
   box: {
-    width: 60,
-    height: 60,
+    width: '100%',
+    height: '100%',
     marginVertical: 20,
   },
 });
diff --git a/ios/Pictures-Bridging-Header.h b/ios/Pictures-Bridging-Header.h
@@ -1,2 +1 @@
-#import <React/RCTBridgeModule.h>
 #import <React/RCTViewManager.h>