react-native-laminar 1.0.2 → 1.2.0

package/src/view/morph-viewport.tsx

@@ -2,6 +2,7 @@ import React, { useMemo } from "react";
 import type { StyleProp, ViewStyle } from "react-native";
 import { View } from "react-native";
 import Animated from "react-native-reanimated";
+import type { LaminarAlign } from "../types";
 
 const shellStyle = {
   position: "relative",
@@ -29,9 +30,26 @@ const unclippedViewportStyle: ViewStyle = {
   overflow: "visible",
 };
 
+const fullWidthViewportStyle: ViewStyle = {
+  width: "100%",
+};
+
+const shellAlignStyles: Record<LaminarAlign, ViewStyle> = {
+  left: { alignSelf: "flex-start" },
+  center: { alignSelf: "center" },
+  right: { alignSelf: "flex-end" },
+};
+
+const viewportAlignStyles: Record<LaminarAlign, ViewStyle> = {
+  left: { alignItems: "flex-start" },
+  center: { alignItems: "center" },
+  right: { alignItems: "flex-end" },
+};
+
 type MorphViewportProps = {
   readonly autoSize: boolean;
   readonly clipToBounds: boolean;
+  readonly align: LaminarAlign;
   readonly containerStyle?: StyleProp<ViewStyle>;
   readonly animatedWidthStyle?: React.ComponentProps<typeof Animated.View>["style"];
   readonly measurement?: React.ReactNode;
@@ -42,6 +60,7 @@ export const MorphViewport = React.memo(
   ({
     autoSize,
     clipToBounds,
+    align,
     containerStyle,
     animatedWidthStyle,
     measurement,
@@ -50,13 +69,14 @@ export const MorphViewport = React.memo(
     const resolvedViewportStyle = useMemo(
       () => [
         viewportStyle,
+        viewportAlignStyles[align],
         clipToBounds ? clippedViewportStyle : unclippedViewportStyle,
       ],
-      [clipToBounds]
+      [align, clipToBounds]
     );
 
     return (
-      <View style={[shellStyle, containerStyle]}>
+      <View style={[shellStyle, shellAlignStyles[align], containerStyle]}>
         {autoSize ? (
           <>
             <View
@@ -73,7 +93,9 @@ export const MorphViewport = React.memo(
             </Animated.View>
           </>
         ) : (
-          <View style={resolvedViewportStyle}>{children}</View>
+          <View style={[resolvedViewportStyle, fullWidthViewportStyle]}>
+            {children}
+          </View>
         )}
       </View>
     );

package/src/view/number-lane.tsx

@@ -30,6 +30,7 @@ type NumberLaneProps = {
   readonly travelDistance: number;
   readonly motionRecipe: MotionRecipe;
   readonly textStyle?: StyleProp<TextStyle>;
+  readonly className?: string;
 };
 
 export const NumberLane = React.memo(
@@ -43,6 +44,7 @@ export const NumberLane = React.memo(
     travelDistance,
     motionRecipe,
     textStyle,
+    className,
   }: NumberLaneProps) => {
     const usesDigitTravel = isAsciiDigit(unit);
     const verticalOffset =
@@ -97,7 +99,7 @@ export const NumberLane = React.memo(
     );
 
     if (isLead) {
-      return <Text style={textStyle}>{unit}</Text>;
+      return <Text style={textStyle} className={className}>{unit}</Text>;
     }
 
     return (
@@ -117,6 +119,7 @@ export const NumberLane = React.memo(
           entering={hasAnimated ? enterTransition : undefined}
           exiting={exitTransition}
           style={[textStyle, laneTokenStyle]}
+          className={className}
         >
           {unit}
         </Animated.Text>

package/src/view/number-run.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useRef } from "react";
 import { type StyleProp, type TextStyle, View } from "react-native";
 import { useNumericLanes } from "../hooks/use-numeric-lanes";
-import type { MotionRecipe } from "../types";
+import type { LaminarAlign, MotionRecipe } from "../types";
 import { NumberLane } from "./number-lane";
 
 const rowStyle = {
@@ -10,21 +10,31 @@ const rowStyle = {
   alignSelf: "flex-start",
 } as const;
 
+const rowAlignStyles = {
+  left: { alignSelf: "flex-start" },
+  center: { alignSelf: "center" },
+  right: { alignSelf: "flex-end" },
+} as const;
+
 type NumberRunProps = {
   readonly value: string;
   readonly motionRecipe: MotionRecipe;
+  readonly align: LaminarAlign;
   readonly fontSize?: number;
   readonly textStyle?: StyleProp<TextStyle>;
   readonly staggerMs: number;
+  readonly className?: string;
 };
 
 export const NumberRun = React.memo(
   ({
     value,
     motionRecipe,
+    align,
     fontSize,
     textStyle,
     staggerMs,
+    className,
   }: Readonly<NumberRunProps>) => {
     const { units, laneKeys, direction, leadLength } = useNumericLanes(value);
     const lastValueRef = useRef(value);
@@ -43,7 +53,7 @@ export const NumberRun = React.memo(
     const hasAnimated = hasAnimatedRef.current;
 
     return (
-      <View style={rowStyle}>
+      <View style={[rowStyle, rowAlignStyles[align]]}>
         {units.map((unit, index) => {
           const inLead = index < leadLength;
           const laneKey = inLead
@@ -62,6 +72,7 @@ export const NumberRun = React.memo(
               travelDistance={travelDistance}
               motionRecipe={motionRecipe}
               textStyle={textStyle}
+              className={className}
             />
           );
         })}

package/src/view/text-run.tsx

@@ -1,17 +1,19 @@
 import React, { useId, useRef } from "react";
 import type { StyleProp, TextStyle } from "react-native";
 import { useTextGlyphs } from "../hooks/use-text-glyphs";
-import type { MotionRecipe } from "../types";
+import type { LaminarAlign, MotionRecipe } from "../types";
 import { GlyphRun } from "./glyph-run";
 
 type TextRunProps = {
   readonly value: string;
   readonly motionRecipe: MotionRecipe;
+  readonly align: LaminarAlign;
   readonly textStyle?: StyleProp<TextStyle>;
+  readonly className?: string;
 };
 
 export const TextRun = React.memo(
-  ({ value, motionRecipe, textStyle }: TextRunProps) => {
+  ({ value, motionRecipe, align, textStyle, className }: TextRunProps) => {
     // namespace ids per instance so repeated strings do not collide
     const scopeId = useId();
     const glyphs = useTextGlyphs(value, scopeId);
@@ -31,7 +33,9 @@ export const TextRun = React.memo(
           hasAnimatedRef.current ? motionRecipe.enterTransition : undefined
         }
         exitTransition={motionRecipe.exitTransition}
+        align={align}
         textStyle={textStyle}
+        className={className}
       />
     );
   }