feat: added alignment prop for android (#2)

* feat: added alignment prop for android * fix: little update * fix: more fixes * fix: saving alignment in the same way as fit property * fix: added proper package header / removed unnecessary import Co-authored-by: TMaszko <tomasz.krzyzowski@callstack.com>
rive-app · May 10, 2021 · 998f466 · 998f466
1 parent 9491798
commit 998f466
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 10 deletions.
diff --git a/android/src/main/java/com/rivereactnative/RNAlignment.kt b/android/src/main/java/com/rivereactnative/RNAlignment.kt
@@ -0,0 +1,41 @@
+package com.rivereactnative
+
+import app.rive.runtime.kotlin.core.Alignment
+
+enum class RNAlignment(private val mValue: String) {
+  TopLeft("topLeft"),
+  TopCenter("topCenter"),
+  TopRight("topRight"),
+  CenterLeft( "centerLeft"),
+  Center("center"),
+  CenterRight("centerRight"),
+  BottomLeft("bottomLeft"),
+  BottomCenter("bottomCenter"),
+  BottomRight("bottomRight");
+
+  override fun toString(): String {
+    return mValue
+  }
+
+  companion object {
+
+    fun mapToRNAlignment(alignment: String): RNAlignment {
+      return valueOf(values().first() {it.toString() == alignment }.name)
+    }
+
+    fun mapToRiveAlignment(v: RNAlignment): Alignment {
+      return when (v) {
+        TopLeft -> Alignment.TOP_LEFT
+        TopCenter -> Alignment.TOP_CENTER
+        TopRight -> Alignment.TOP_RIGHT
+        CenterLeft -> Alignment.CENTER_LEFT
+        Center -> Alignment.CENTER
+        CenterRight -> Alignment.CENTER_RIGHT
+        BottomLeft -> Alignment.BOTTOM_LEFT
+        BottomCenter -> Alignment.BOTTOM_CENTER
+        BottomRight -> Alignment.BOTTOM_RIGHT
+        else -> throw IllegalStateException("Unsupported Alignment type")
+      }
+    }
+  }
+}
diff --git a/android/src/main/java/com/rivereactnative/RiveReactNativeView.kt b/android/src/main/java/com/rivereactnative/RiveReactNativeView.kt
@@ -7,6 +7,7 @@ import com.facebook.react.uimanager.ThemedReactContext
 
 class RiveReactNativeView(private val context: ThemedReactContext) : FrameLayout(context), LifecycleEventListener {
   private var riveAnimationView: RiveAnimationView? = null
+
   init {
     context.addLifecycleEventListener(this)
     riveAnimationView = RiveAnimationView(context)
@@ -27,21 +28,34 @@ class RiveReactNativeView(private val context: ThemedReactContext) : FrameLayout
   }
 
   fun setResourceName(resourceName: String) {
-    val propsFit = riveAnimationView?.fit
+    val (propsFit, propsAlignment) = Pair(riveAnimationView?.fit, riveAnimationView?.alignment)
     val resId = resources.getIdentifier(resourceName, "raw", context.packageName)
-    propsFit?.let {
-      riveAnimationView?.setRiveResource(resId, fit = it) // we want to keep the old value because JS is our source of truth
-    } ?: run {
-      riveAnimationView?.setRiveResource(resId)
-    }
 
+    if (propsFit != null) {
+      if (propsAlignment != null) {
+        riveAnimationView?.setRiveResource(resId, fit = propsFit, alignment = propsAlignment)
+      } else {
+        riveAnimationView?.setRiveResource(resId, fit = propsFit)
+      }
+    } else {
+      if(propsAlignment != null) {
+        riveAnimationView?.setRiveResource(resId, alignment = propsAlignment)
+      } else {
+        riveAnimationView?.setRiveResource(resId)
+      }
+    }
   }
 
   fun setFit(rnFit: RNFit) {
     val riveFit = RNFit.mapToRiveFit(rnFit)
     riveAnimationView?.fit = riveFit
   }
 
+  fun setAlignment(rnAlignment: RNAlignment) {
+    val riveAlignment = RNAlignment.mapToRiveAlignment(rnAlignment)
+    riveAnimationView?.alignment = riveAlignment
+  }
+
   override fun onHostResume() {
     riveAnimationView?.play()
   }

diff --git a/android/src/main/java/com/rivereactnative/RiveReactNativeViewManager.kt b/android/src/main/java/com/rivereactnative/RiveReactNativeViewManager.kt
@@ -49,4 +49,9 @@ class RiveReactNativeViewManager : SimpleViewManager<RiveReactNativeView>() {
   fun setFit(view: RiveReactNativeView, fit: String) {
     view.setFit(RNFit.mapToRNFit(fit))
   }
+
+  @ReactProp(name = "alignment")
+  fun setAlignment(view: RiveReactNativeView, alignment: String) {
+    view.setAlignment(RNAlignment.mapToRNAlignment(alignment))
+  }
 }
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
 import {
+  Platform,
   StyleSheet,
-  View,
   Text,
   TouchableOpacity,
-  Platform,
+  View,
 } from 'react-native';
 import Rive, { RiveRef } from 'rive-react-native';
 

diff --git a/src/Rive.tsx b/src/Rive.tsx
@@ -6,7 +6,7 @@ import {
   ViewStyle,
 } from 'react-native';
 import type { RiveRef } from './types';
-import { Fit } from './types';
+import { Alignment, Fit } from './types';
 
 type RiveProps = {
   fit: Fit;
@@ -15,6 +15,7 @@ type RiveProps = {
   style?: ViewStyle;
   ref: any;
   testID?: string;
+  alignment: Alignment;
 };
 
 const VIEW_NAME = 'RiveReactNativeView';
@@ -25,12 +26,22 @@ type Props = {
   url?: string;
   style?: ViewStyle;
   testID?: string;
+  alignment?: Alignment;
 };
 
 export const RiveViewManager = requireNativeComponent<RiveProps>(VIEW_NAME);
 
 const RiveContainer = React.forwardRef<RiveRef, Props>(
-  ({ style, resourceName, url, fit = Fit.Contain }, ref) => {
+  (
+    {
+      style,
+      resourceName,
+      url,
+      alignment = Alignment.Center,
+      fit = Fit.Contain,
+    },
+    ref
+  ) => {
     const riveRef = useRef(null);
     const play = useCallback(() => {
       UIManager.dispatchViewManagerCommand(
@@ -73,6 +84,7 @@ const RiveContainer = React.forwardRef<RiveRef, Props>(
         resourceName={resourceName}
         fit={fit}
         url={url}
+        alignment={alignment}
       />
     );
   }

diff --git a/src/types.ts b/src/types.ts
@@ -13,3 +13,15 @@ export enum Fit {
   None = 'none',
   ScaleDown = 'scaleDown',
 }
+
+export enum Alignment {
+  TopLeft = 'topLeft',
+  TopCenter = 'topCenter',
+  TopRight = 'topRight',
+  CenterLeft = 'centerLeft',
+  Center = 'center',
+  CenterRight = 'centerRight',
+  BottomLeft = 'bottomLeft',
+  BottomCenter = 'bottomCenter',
+  BottomRight = 'bottomRight',
+}