Skip to content

Commit 623623b

Browse files
erezrokaherezrokah
committed
add PhotoView support for android
1 parent 113112c commit 623623b

File tree

8 files changed

+118
-52
lines changed

8 files changed

+118
-52
lines changed

‎README.md‎

Lines changed: 35 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,18 @@ pod 'FirebaseUI/Storage'
2020
```
2121
and run pod install.
2222

23+
## Android Additional step for PhotoView Library
24+
25+
Add this in your root build.gradle file (usually under `android/build.gradle`):
26+
```
27+
allprojects {
28+
repositories {
29+
...
30+
maven { url "https://jitpack.io" }
31+
}
32+
}
33+
```
34+
2335
### Manual installation
2436

2537

@@ -48,9 +60,29 @@ and run pod install.
4860

4961
## Usage
5062
```javascript
51-
import Firebaseimage from 'react-native-firebaseui'
63+
import { ImageView, PhotoView } from 'react-native-firebaseui'
64+
65+
//no zoom support
66+
export class MyFirebaseImageView extends Component<void, void, void> {
67+
constructor(props){
68+
super(props)
69+
}
70+
71+
render() {
72+
let imageProps = this.props
73+
74+
return (
75+
<ImageView
76+
{...imageProps}
77+
path='firebase/storage/path'
78+
resizeMode='cover' //'cover', 'contain', 'stretch'
79+
/>
80+
)
81+
}
82+
}
5283

53-
export class MyFirebaseImage extends Component<void, void, void> {
84+
//zoom support (android only). On iOS just wrap the ImageView with a scroll view
85+
export class MyFirebasePhotoView extends Component<void, void, void> {
5486
constructor(props){
5587
super(props)
5688
}
@@ -59,7 +91,7 @@ export class MyFirebaseImage extends Component<void, void, void> {
5991
let imageProps = this.props
6092

6193
return (
62-
<Firebaseimage
94+
<PhotoView
6395
{...imageProps}
6496
path='firebase/storage/path'
6597
resizeMode='cover' //'cover', 'contain', 'stretch'

‎android/build.gradle‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,4 +39,7 @@ dependencies {
3939

4040
// FirebaseUI Storage only
4141
compile 'com.firebaseui:firebase-ui-storage:0.6.0'
42+
43+
//PhotoView
44+
compile 'com.github.chrisbanes:PhotoView:2.1.3'
4245
}

‎android/src/main/java/io/rumors/reactnativefirebaseui/RNFirebaseUiPackage.java‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
import com.facebook.react.uimanager.ViewManager;
1212
import com.facebook.react.bridge.JavaScriptModule;
1313
import io.rumors.reactnativefirebaseui.storage.FirebaseImageViewManager;
14+
import io.rumors.reactnativefirebaseui.storage.FirebasePhotoViewManager;
1415

1516
public class RNFirebaseUiPackage implements ReactPackage {
1617
@Override
@@ -26,7 +27,8 @@ public List<Class<? extends JavaScriptModule>> createJSModules() {
2627
@Override
2728
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
2829
return Arrays.<ViewManager>asList(
29-
new FirebaseImageViewManager()
30+
new FirebaseImageViewManager(),
31+
new FirebasePhotoViewManager()
3032
);
3133
}
3234
}

‎android/src/main/java/io/rumors/reactnativefirebaseui/storage/FirebaseImageViewManager.java‎

Lines changed: 1 addition & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,11 @@
1-
21
package io.rumors.reactnativefirebaseui.storage;
32

4-
import javax.annotation.Nullable;
5-
63
import android.widget.ImageView;
7-
import android.util.Log;
8-
import android.widget.ImageView.ScaleType;
9-
10-
import com.firebase.ui.storage.images.FirebaseImageLoader;
11-
import com.google.firebase.storage.StorageReference;
12-
import com.google.firebase.storage.FirebaseStorage;
13-
import com.bumptech.glide.Glide;
14-
15-
import com.facebook.react.uimanager.ViewProps;
16-
import com.facebook.react.uimanager.annotations.ReactProp;
17-
import com.facebook.react.uimanager.SimpleViewManager;
184
import com.facebook.react.uimanager.ThemedReactContext;
195

20-
public class FirebaseImageViewManager extends SimpleViewManager<ImageView>{
6+
public class FirebaseImageViewManager extends ImageViewManager {
217
public static final String REACT_CLASS = "RCTFirebaseImageView";
228

23-
private static String TAG = "FirebaseImageViewManager";
24-
protected ThemedReactContext mContext = null;
25-
269
@Override
2710
public String getName() {
2811
return REACT_CLASS;
@@ -33,26 +16,4 @@ public ImageView createViewInstance(ThemedReactContext context) {
3316
mContext = context;
3417
return new ImageView(context);
3518
}
36-
37-
@ReactProp(name = "path")
38-
public void setPath(ImageView imageView, @Nullable String path) {
39-
StorageReference storageReference = FirebaseStorage.getInstance().getReference(path);
40-
Glide.with(mContext)
41-
.using(new FirebaseImageLoader())
42-
.load(storageReference)
43-
.into(imageView);
44-
}
45-
46-
@ReactProp(name = ViewProps.RESIZE_MODE)
47-
public void setResizeMode(ImageView view, @Nullable String resizeMode) {
48-
ScaleType scaleType = ScaleType.CENTER;
49-
if ("cover".equals(resizeMode)) {
50-
scaleType = ScaleType.CENTER_CROP;
51-
} else if ("contain".equals(resizeMode)) {
52-
scaleType = ScaleType.CENTER_INSIDE;
53-
} else if ("stretch".equals(resizeMode)) {
54-
scaleType = ScaleType.FIT_XY;
55-
}
56-
view.setScaleType(scaleType);
57-
}
5819
}

‎android/src/main/java/io/rumors/reactnativefirebaseui/storage/FirebasePhotoViewManager.java‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
package io.rumors.reactnativefirebaseui.storage;
2+
3+
import android.widget.ImageView;
4+
import com.github.chrisbanes.photoview.PhotoView;
5+
import com.facebook.react.uimanager.ThemedReactContext;
6+
7+
public class FirebasePhotoViewManager extends ImageViewManager {
8+
public static final String REACT_CLASS = "RCTFirebasePhotoView";
9+
10+
@Override
11+
public String getName() {
12+
return REACT_CLASS;
13+
}
14+
15+
@Override
16+
public ImageView createViewInstance(ThemedReactContext context) {
17+
mContext = context;
18+
return new PhotoView(context);
19+
}
20+
}

‎android/src/main/java/io/rumors/reactnativefirebaseui/storage/ImageViewManager.java‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
package io.rumors.reactnativefirebaseui.storage;
2+
3+
import javax.annotation.Nullable;
4+
5+
import android.widget.ImageView;
6+
import android.widget.ImageView.ScaleType;
7+
8+
import com.firebase.ui.storage.images.FirebaseImageLoader;
9+
import com.google.firebase.storage.StorageReference;
10+
import com.google.firebase.storage.FirebaseStorage;
11+
import com.bumptech.glide.Glide;
12+
13+
import com.facebook.react.uimanager.ViewProps;
14+
import com.facebook.react.uimanager.annotations.ReactProp;
15+
import com.facebook.react.uimanager.SimpleViewManager;
16+
import com.facebook.react.uimanager.ThemedReactContext;
17+
18+
public abstract class ImageViewManager extends SimpleViewManager<ImageView>{
19+
protected ThemedReactContext mContext = null;
20+
21+
@ReactProp(name = "path")
22+
public void setPath(ImageView imageView, @Nullable String path) {
23+
StorageReference storageReference = FirebaseStorage.getInstance().getReference(path);
24+
Glide.with(mContext)
25+
.using(new FirebaseImageLoader())
26+
.load(storageReference)
27+
.into(imageView);
28+
}
29+
30+
@ReactProp(name = ViewProps.RESIZE_MODE)
31+
public void setResizeMode(ImageView view, @Nullable String resizeMode) {
32+
ScaleType scaleType = ScaleType.CENTER;
33+
if ("cover".equals(resizeMode)) {
34+
scaleType = ScaleType.CENTER_CROP;
35+
} else if ("contain".equals(resizeMode)) {
36+
scaleType = ScaleType.CENTER_INSIDE;
37+
} else if ("stretch".equals(resizeMode)) {
38+
scaleType = ScaleType.FIT_XY;
39+
}
40+
view.setScaleType(scaleType);
41+
}
42+
}

‎index.js‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import PropTypes from 'prop-types';
2-
import { requireNativeComponent, Image } from 'react-native';
1+
import PropTypes from 'prop-types'
2+
import { requireNativeComponent, Image, Platform } from 'react-native'
33

44
var iface = {
55
name: 'FirebaseImage',
@@ -8,6 +8,14 @@ var iface = {
88
path: PropTypes.string,
99
resizeMode: PropTypes.oneOf(['cover', 'contain', 'stretch']),
1010
},
11-
};
11+
}
1212

13-
module.exports = requireNativeComponent('RCTFirebaseImageView', iface);
13+
const ImageView = requireNativeComponent('RCTFirebaseImageView', iface)
14+
let PhotoView = null
15+
//PhotoView is supported only on android
16+
if (Platform.OS === 'android') {
17+
PhotoView = requireNativeComponent('RCTFirebasePhotoView', iface)
18+
} else {
19+
PhotoView = ImageView
20+
}
21+
module.exports = { ImageView, PhotoView }

‎package.json‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,13 @@
11
{
22
"name": "react-native-firebaseui",
3-
"version": "v0.0.1-alpha1",
3+
"version": "v0.0.1-alpha2",
44
"description": "React Native Firebase Bindings Based on FirebaseUI SDK",
55
"main": "index.js",
66
"repository": {
77
"type": "git",
88
"url": "https://github.com/rmrs/react-native-firebaseui.git"
99
},
10-
"keywords": [
11-
"react-native"
12-
],
10+
"keywords": ["react-native"],
1311
"author": "Erez Rokah <[email protected]>",
1412
"license": "MIT",
1513
"peerDependencies": {

0 commit comments

Comments
 (0)