Skip to content

Commit

Permalink
feat: migrate to native views
Browse files Browse the repository at this point in the history
  • Loading branch information
PierreCapo committed Dec 29, 2023
1 parent 7b21d72 commit 7308e37
Show file tree
Hide file tree
Showing 21 changed files with 250 additions and 317 deletions.
24 changes: 17 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.


Expand Down
6 changes: 1 addition & 5 deletions android/src/main/AndroidManifest.xml
Original file line number Diff line number Diff line change
@@ -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>
7 changes: 1 addition & 6 deletions android/src/main/AndroidManifestNew.xml
Original file line number Diff line number Diff line change
@@ -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>
81 changes: 0 additions & 81 deletions android/src/main/java/com/pictures/PictureViewerActivity.kt

This file was deleted.

30 changes: 0 additions & 30 deletions android/src/main/java/com/pictures/PicturesModule.kt

This file was deleted.

4 changes: 2 additions & 2 deletions android/src/main/java/com/pictures/PicturesPackage.kt
Original file line number Diff line number Diff line change
Expand Up @@ -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())
}
}
72 changes: 72 additions & 0 deletions android/src/main/java/com/pictures/PicturesViewManager.kt
Original file line number Diff line number Diff line change
@@ -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()
}
}

10 changes: 4 additions & 6 deletions example/ios/PicturesExample.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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)",
Expand Down Expand Up @@ -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)",
Expand Down
2 changes: 0 additions & 2 deletions example/ios/PicturesExample/Info.plist
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions example/ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -1375,6 +1375,6 @@ SPEC CHECKSUMS:
SocketRocket: f32cd54efbe0f095c4d7594881e52619cfe80b17
Yoga: 4f53dc50008d626fa679c7a1cb4bed898f8c0bde

PODFILE CHECKSUM: 18fe640b479ffb2cb7af6a7e58899b09d1f31fcc
PODFILE CHECKSUM: 26fc151c7d8586e3b6acee2c5d9760d45e6d6ffb

COCOAPODS: 1.14.3
30 changes: 9 additions & 21 deletions example/src/App.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
}
Expand All @@ -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,
},
});
1 change: 0 additions & 1 deletion ios/Pictures-Bridging-Header.h
Original file line number Diff line number Diff line change
@@ -1,2 +1 @@
#import <React/RCTBridgeModule.h>
#import <React/RCTViewManager.h>
Loading

0 comments on commit 7308e37

Please sign in to comment.