Merge pull request #23 from IjzerenHein/feature-android-sharedelementtransitions

feat(android): added support for shared element transitions on ExtendedImageView

Author: erezrokah

.prettierrc

@@ -0,0 +1,14 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "useTabs": false,
+  "overrides": [
+    {
+      "files": "*.json",
+      "options": { "printWidth": 200 }
+    }
+  ]
+}

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
   "javascript.preferences.quoteStyle": "single",
-  "editor.formatOnSave": false,
+  "editor.formatOnSave": true,
   "java.configuration.updateBuildConfiguration": "disabled"
 }

README.md

@@ -1,10 +1,10 @@
-
 # react-native-firebaseui
 
 ## Requirements
+
 We assume you already have firebase sdk installed and configured.
 We're using this great library:
-https://github.com/invertase/react-native-firebase
+[react-native-firebase](https://github.com/invertase/react-native-firebase)
 
 ## Getting started
 
@@ -15,15 +15,18 @@ https://github.com/invertase/react-native-firebase
 `$ react-native link react-native-firebaseui`
 
 For iOS add the following pod to your podfile:
-```
+
+```pod
 pod 'SDWebImage', '~> 4.0'
 ```
+
 and run pod install.
 
 ## Android Additional step for PhotoView Library
 
 Add this in your root build.gradle file (usually under `android/build.gradle`):
-```
+
+```gradle
 allprojects {
   repositories {
     ...
@@ -34,7 +37,6 @@ allprojects {
 
 ### Manual installation
 
-
 #### iOS
 
 1. In XCode, in the project navigator, right click `Libraries` ➜ `Add Files to [your project's name]`
@@ -45,62 +47,67 @@ allprojects {
 #### Android
 
 1. Open up `android/app/src/main/java/[...]/MainApplication.java`
-  - Add `import io.rumors.reactnativefirebaseui.RNFirebaseUiPackage;` to the imports at the top of the file
-  - Add `new RNFirebaseUiPackage()` to the list returned by the `getPackages()` method
+
+- Add `import io.rumors.reactnativefirebaseui.RNFirebaseUiPackage;` to the imports at the top of the file
+- Add `new RNFirebaseUiPackage()` to the list returned by the `getPackages()` method
+
 2. Append the following lines to `android/settings.gradle`:
-  	```
-  	include ':react-native-firebase-ui'
-  	project(':react-native-firebase-ui').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-firebase-ui/android')
-  	```
+
+```gradle
+include ':react-native-firebase-ui'
+project(':react-native-firebase-ui').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-firebase-ui/android')
+```
+
 3. Insert the following lines inside the dependencies block in `android/app/build.gradle`:
-  	```
-      compile project(':react-native-firebase-ui')
-  	```
 
+```gradle
+  compile project(':react-native-firebase-ui')
+```
 
 ## Usage
+
 ```javascript
-import { ImageView, PhotoView } from 'react-native-firebaseui'
+import { ImageView, PhotoView } from 'react-native-firebaseui';
 
 //no zoom support
 export class MyFirebaseImageView extends Component<void, void, void> {
-  constructor(props){
-    super(props)
+  constructor(props) {
+    super(props);
   }
 
   render() {
-    let imageProps = this.props
+    let imageProps = this.props;
 
     return (
       <ImageView
         {...imageProps}
-        path='firebase/storage/path'
+        path="firebase/storage/path"
         defaultSource={require('./placeholder.png')} // optional, show placeholder until image is loaded
         timestamp={0} //optional, can be used to specify last modified time for same storage path
-        resizeMode='cover' //'cover', 'contain', 'stretch'
+        resizeMode="cover" //'cover', 'contain', 'stretch', 'center'
       />
-    )
+    );
   }
 }
 
 //zoom support (android only). On iOS just wrap the ImageView with a scroll view
 export class MyFirebasePhotoView extends Component<void, void, void> {
-  constructor(props){
-    super(props)
+  constructor(props) {
+    super(props);
   }
 
   render() {
-    let imageProps = this.props
+    let imageProps = this.props;
 
     return (
       <PhotoView
         {...imageProps}
-        path='firebase/storage/path'
+        path="firebase/storage/path"
         defaultSource={require('./placeholder.png')} // optional, show placeholder until image is loaded
         timestamp={0} //optional, can be used to specify last modified time for same storage path
-        resizeMode='cover' //'cover', 'contain', 'stretch'
+        resizeMode="cover" //'cover', 'contain', 'stretch', 'center'
       />
-    )
+    );
   }
 }
 ```

android/src/main/java/io/rumors/reactnativefirebaseui/storage/ExtendedImageView.java

@@ -1,38 +1,20 @@
 package io.rumors.reactnativefirebaseui.storage;
 
-import java.util.Map;
-import java.util.Map.Entry;
-import java.util.HashMap;
-import java.util.ArrayList;
-
 import javax.annotation.Nullable;
 
 import android.widget.ImageView;
-import android.widget.ImageView.ScaleType;
 import android.graphics.drawable.Drawable;
 
 import com.facebook.react.uimanager.ThemedReactContext;
 import com.facebook.react.views.imagehelper.ResourceDrawableIdHelper;
-import com.firebase.ui.storage.images.FirebaseImageLoader;
 import com.google.firebase.storage.StorageReference;
 import com.google.firebase.storage.FirebaseStorage;
 import com.bumptech.glide.Glide;
-import com.bumptech.glide.load.Transformation;
-import com.bumptech.glide.load.resource.bitmap.FitCenter;
-import com.bumptech.glide.load.resource.bitmap.CenterCrop;
-import com.bumptech.glide.load.MultiTransformation;
 import com.bumptech.glide.signature.MediaStoreSignature;
-import static com.bumptech.glide.request.RequestOptions.bitmapTransform;
-
-import jp.wasabeef.glide.transformations.RoundedCornersTransformation;
-import jp.wasabeef.glide.transformations.RoundedCornersTransformation.CornerType;
-
 
 public class ExtendedImageView extends ImageView {
   protected String mPath = null;
   protected @Nullable Drawable mDefaultImageDrawable;
-  protected Map<CornerType, Integer> mBorderRadii = new HashMap<CornerType, Integer>();
-  protected ScaleType mScaleType;
   protected long mTimestamp = 0;
 
   protected ThemedReactContext mContext = null;
@@ -54,41 +36,12 @@ public void setTimestamp(long timestamp) {
     mTimestamp = timestamp;
   }
 
-  @Override
-  public void setScaleType(ScaleType scaleType) {
-    mScaleType = scaleType;
-  }
-
-  public void setBorderRadius(int borderRadius, CornerType cornerType) {
-    mBorderRadii.put(cornerType, borderRadius);
-  }
-
   public void updateView() {
     StorageReference storageReference = FirebaseStorage.getInstance().getReference(mPath);
-    FirebaseImageLoader imageLoader = new FirebaseImageLoader();
-
-    ArrayList<Transformation> transformations = new ArrayList<Transformation>(1 + mBorderRadii.size());
-
-    if (mScaleType == ScaleType.CENTER_CROP) {
-      transformations.add(new CenterCrop());
-    } else {
-      transformations.add(new FitCenter());
-    }
-
-    for (Entry<CornerType, Integer> entry : mBorderRadii.entrySet()) {
-      CornerType cornerType = entry.getKey();
-      Integer radius = entry.getValue();
-      transformations.add(new RoundedCornersTransformation(radius, 0, cornerType));
-    }
-
-    Transformation[] transformationsArray = transformations.toArray(new Transformation[transformations.size()]);
-
-    MultiTransformation multi = new MultiTransformation<>(transformationsArray);
-
     GlideApp.with(mContext)
             .load(storageReference)
             .placeholder(mDefaultImageDrawable)
-            .apply(bitmapTransform(multi))
+            .dontTransform()
             //(String mimeType, long dateModified, int orientation)
             .signature(new MediaStoreSignature("", mTimestamp, 0))
             .into(this);

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

@@ -3,16 +3,10 @@
 import javax.annotation.Nullable;
 import android.widget.ImageView.ScaleType;
 
-import jp.wasabeef.glide.transformations.RoundedCornersTransformation;
-
 import com.facebook.react.uimanager.ViewProps;
 import com.facebook.react.uimanager.annotations.ReactProp;
-import com.facebook.react.uimanager.annotations.ReactPropGroup;
 import com.facebook.react.uimanager.SimpleViewManager;
 import com.facebook.react.uimanager.ThemedReactContext;
-import com.facebook.yoga.YogaConstants;
-import com.facebook.react.uimanager.PixelUtil;
-import com.facebook.react.uimanager.ThemedReactContext;
 
 public class FirebaseImageViewManager extends SimpleViewManager<ExtendedImageView> {
   public static final String REACT_CLASS = "RCTFirebaseImageView";
@@ -49,45 +43,14 @@ public void setResizeMode(ExtendedImageView imageView, @Nullable String resizeMo
       scaleType = ScaleType.CENTER_CROP;
     } else if ("contain".equals(resizeMode)) {
       scaleType = ScaleType.CENTER_INSIDE;
+    } else if ("stretch".equals(resizeMode)) {
+      scaleType = ScaleType.FIT_XY;
+    } else if ("center".equals(resizeMode)) {
+      scaleType = ScaleType.CENTER;
     }
-
     imageView.setScaleType(scaleType);
   }
 
-  @ReactPropGroup(names = {
-      ViewProps.BORDER_RADIUS,
-      ViewProps.BORDER_TOP_LEFT_RADIUS,
-      ViewProps.BORDER_TOP_RIGHT_RADIUS,
-      ViewProps.BORDER_BOTTOM_RIGHT_RADIUS,
-      ViewProps.BORDER_BOTTOM_LEFT_RADIUS
-  }, defaultFloat = YogaConstants.UNDEFINED)
-  public void setBorderRadius(ExtendedImageView imageView, int index, float borderRadius) {
-    if (!YogaConstants.isUndefined(borderRadius)) {
-      borderRadius = PixelUtil.toPixelFromDIP(borderRadius);
-    }
-
-    RoundedCornersTransformation.CornerType cornerType = RoundedCornersTransformation.CornerType.ALL;
-    switch (index) {
-      case 0:
-        cornerType = RoundedCornersTransformation.CornerType.ALL;
-        break;
-      case 1:
-        cornerType = RoundedCornersTransformation.CornerType.TOP_LEFT;
-        break;
-      case 2:
-        cornerType = RoundedCornersTransformation.CornerType.TOP_RIGHT;
-        break;
-      case 3:
-        cornerType = RoundedCornersTransformation.CornerType.BOTTOM_RIGHT;
-        break;
-      case 4:
-        cornerType = RoundedCornersTransformation.CornerType.BOTTOM_LEFT;
-        break;
-    }
-
-    imageView.setBorderRadius(Math.round(borderRadius), cornerType);
-  }
-
   @Override
   protected void onAfterUpdateTransaction(ExtendedImageView imageView) {
     super.onAfterUpdateTransaction(imageView);

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

@@ -50,8 +50,11 @@ public void setResizeMode(ExtendedPhotoView imageView, @Nullable String resizeMo
       scaleType = ScaleType.CENTER_CROP;
     } else if ("contain".equals(resizeMode)) {
       scaleType = ScaleType.CENTER_INSIDE;
+    } else if ("stretch".equals(resizeMode)) {
+      scaleType = ScaleType.FIT_XY;
+    } else if ("center".equals(resizeMode)) {
+      scaleType = ScaleType.CENTER;
     }
-
     imageView.setScaleType(scaleType);
   }
 

example/App.js

@@ -17,7 +17,7 @@ class MyFirebaseImageView extends Component {
         path="images/firebase_logo.png"
         defaultSource={require('./assets/placeholder.png')}
         timestamp={1000} //optional, can be used to specify last modified time for same storage path
-        resizeMode="cover" //'cover', 'contain', 'stretch'
+        resizeMode="cover" //'cover', 'contain', 'stretch', 'center'
       />
     );
   }
@@ -34,7 +34,7 @@ class MyFirebasePhotoView extends Component {
         path="images/firebase_logo.png"
         defaultSource={require('./assets/placeholder.png')}
         timestamp={1000} //optional, can be used to specify last modified time for same storage path
-        resizeMode="cover" //'cover', 'contain', 'stretch'
+        resizeMode="cover" //'cover', 'contain', 'stretch', 'center'
       />
     );
   }
@@ -56,9 +56,11 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
+    backgroundColor: 'black',
   },
   image: {
     width: 100,
     height: 100,
+    borderRadius: 10,
   },
 });