@prototyp/skeletor 1.0.9 → 1.0.10

package/README.md

@@ -64,7 +64,7 @@ Use this as the top-level wrapper for every screen you navigate to. Is not inten
 
 #### Props
 
-```
+```javascript
 /** Pass a specific background view (gradients, animated backgrounds etc) OR just a background color value. Custom components should be 100% height and width to span the full screen area. */
 background?: JSX.Element | string;
 hideTopSafeArea?: boolean;
@@ -80,7 +80,7 @@ isLandscape?: boolean;
 
 #### Usage
 
-```typescript
+```javascript
 function Component: React.FC = () => {
 	return <Screen background={<GradientBackground />} statusBarType="dark-content">
 	 ...
@@ -96,7 +96,7 @@ Will detect configured Font type, built with the ability to easily customize the
 
 #### Props
 
-```typescript
+```javascript
 /** Inferred from @types/Font.d.ts */
 font?: Font;
 /** Either define [fontSize, lineHeight] or just one size applied to both fontSize and lineHeight */
@@ -106,13 +106,14 @@ letterSpacing?: TextStyle["letterSpacing"];
 color?: string;
 textAlign?: TextStyle["textAlign"];
 opacity?: TextStyle["opacity"];
+animations?: Partial<ViewStyle>;
 ```
 
 #### Usage
 
 To use the `Text` component, simply import it and pass in the desired props.
 
-```typescript
+```javascript
 import { Text } from "./Text";
 
 function MyComponent() {
@@ -132,15 +133,42 @@ This is a flexible and customizable React Native component that can be used as e
 
 #### Props
 
-```typescript
+```javascript
 /** Determine if Block is scrollable or not. If scrollable, extends ScrollView props. */
 scrollable?: boolean;
+animations?: Partial<ViewStyle>;
+/** Whether the element is absolutely positioned. */
+absolute?: boolean;
+zIndex?: number;
+overflow?: ViewStyle["overflow"];
+/** Offsets to use in combination with position. Can be defined as [top, left?, bottom?, right?] or as an object **/
+offsets?:
+	| [ViewStyle["top"]]
+  | [ViewStyle["top"], ViewStyle["left"]]
+  | [ViewStyle["top"], ViewStyle["left"], ViewStyle["bottom"]]
+  | [ViewStyle["top"], ViewStyle["left"], ViewStyle["bottom"], ViewStyle["right"]]
+  | {
+      top?: ViewStyle["top"];
+      bottom?: ViewStyle["bottom"];
+      left?: ViewStyle["left"];
+      right?: ViewStyle["right"];
+    };
 align?: ViewStyle["alignItems"];
 alignSelf?: ViewStyle["alignSelf"];
 justify?: ViewStyle["justifyContent"];
 flexDirection?: ViewStyle["flexDirection"];
-flexWrap?: ViewStyle["flexWrap"];
-flex?: number;
+flex?:
+	| number
+	| {
+			columnGap?: ViewStyle["columnGap"],
+      flex?: ViewStyle["flex"],
+      flexBasis?: ViewStyle["flexBasis"],
+      flexGrow?: ViewStyle["flexGrow"],
+      flexShrink?: ViewStyle["flexShrink"],
+      flexWrap?: ViewStyle["flexWrap"],
+      gap?: ViewStyle["gap"],
+      rowGap?: ViewStyle["rowGap"]
+		};
 width?: number | string;
 height?: number | string;
 minHeight?: number | string;
@@ -176,7 +204,7 @@ border?: {
 	borderTopLeftRadius?: number;
 	borderTopRightRadius?: number;
 	borderBottomLeftRadius?: number;
-	borderBottomRightRadius?: number;
+	... // all other border-related properties
 };
 
 ```
@@ -185,7 +213,7 @@ border?: {
 
 Use cases are many, but simple. This component is intended to be used as a building block for your layout. One example is:
 
-```typescript
+```javascript
 <Block
   maxHeight="75%"
   flexDirection="row"
@@ -206,7 +234,7 @@ This scroll view will automatically scroll to an active input field rendered ins
 
 #### Props
 
-```typescript
+```javascript
 /** Decimal value of screen height percentage the input will be positioned at. */
 /** Defaults to 0.3, just above the keyboard. */
 focusPositionOffset?: number;
@@ -216,7 +244,7 @@ height?: "full" | "auto";
 
 #### Usage
 
-```typescript
+```javascript
 <InputFocusScrollView  focusPositionOffset={0.1}>
 	{(onInputFocus) => (
 		...
@@ -238,13 +266,134 @@ height?: "full" | "auto";
 </InputFocusScrollView>
 ```
 
+## Animations (>=v1.0.10)
+
+New utilities have been created to reduce boilerplate when using animations Animated from react-native. The previous hook-based approach is still available.
+
+### Overview
+
+The concept behind this approach is to:
+
+1. Define element animations and how they are triggered via `animateParallel`, `animateSequence` or `animateStagger`.
+2. Place compiled element animations on an animation timeline OR trigger element animations separately.
+
+### Defining element animations using animateParallel, animateStagger, animateSequence
+
+Use these methods to construct <b>element</b> animations in a super simple way. Create these animations outside the component body to avoid unnecessary re-renders and other lifecycle related issues. All animations are done via native driver, <i>except if the animation loops to avoid issues with the animation itself.</i>
+
+`animateParallel` will animate all of the defined element styles in parallel (meaning they will all start animating at the same time). In the example below, this means that opacity, translateY and translateX will all start animating at once. Additional configuration is possible as a second parameter, where you can define the animation `duration`, `loop` and `easing`. The default configuration is `{ duration: 800, easing: Easing.ease(Easing.quad) }`.
+
+Usage
+
+```javascript
+const element1 = animateParallel({
+  opacity: [0, 1],
+  translateX: [20, 0],
+  translateY: [20, 0],
+});
+```
+
+`animateSequence` will animate all of the defined element styles in sequence (meaning every property will start animating only when the previous property has finished animating). In the example below, that means that opacity, translateY and translateX will animate in sequence as they are defined - opacity first, translateX second, translateY last. Additional configuration is possible as a second parameter, where you can define the animation `duration`, `loop` and `easing`. The default configuration is `{ duration: 800, easing: Easing.ease(Easing.quad) }`.
+
+Usage
+
+```javascript
+const element1 = animateSequence({
+  opacity: [0, 1],
+  translateX: [20, 0],
+  translateY: [20, 0],
+});
+```
+
+`animateStagger` will animate all of the defined elements in the order they are defined at a staggered pace defined in the configuration object (meaning every property will start animating after an X amount of miliseconds between animation starts, in the order they are defined in). In the example below, that means that opacity, translateY and translateX will animate in sequence with a 400ms delay between them. Additional configuration is possible as a second parameter, where you can define the animation `duration`, `stagger`, `loop` and `easing`. The default configuration is `{ duration: 800, stagger: 400, easing: Easing.ease(Easing.quad) }`.
+
+Usage
+
+```javascript
+const element1 = animateStagger({
+  opacity: [0, 1],
+  translateX: [20, 0],
+  translateY: [20, 0],
+});
+```
+
+### Defining element animation timeline
+
+Once defined, the animations can be layed out on a timeline using the `createAnimationTimeline` function. The return value of the `createAnimationTimeline` is an `Animated.CompositeAnimation` wrapping all defined animations on the timeline, giving you a single start/stop function to trigger all animations wrapped in the timeline.
+
+The configuration object is of type `{ [ms: number]: ElementAnimation<K>[]; }`, with the key of the object representing the point-in-time in ms when the associated animation array will trigger. In the following example, this means that, once started, at 0ms (without delay) the `element1` animation set will start, and at 2000ms the `element2` animation will start.
+
+### Everything combined
+
+Usage
+
+```javascript
+const element1 = animateParallel({ opacity: [0, 1] }, { duration: 400 });
+const element2 = animateStagger(
+  {
+    opacity: [0, 1],
+    translateX: [20, 0],
+    translateY: [20, 0],
+  },
+  { stagger: 1200, duration: 800 },
+);
+
+const timeline = createAnimationTimeline({
+  0: [element1],
+  2000: [element2],
+});
+
+export const Component: React.FC = () => {
+	...
+	useEffect(() => {
+		if(startAnimation) {
+			timeline.start();
+		} else {
+			timeline.reset();
+		}
+	}, [startAnimation])
+
+	return <Block animations={element1.animations}>...</Block>
+}
+```
+
+### Reversing element animations.
+
+Instead of just reseting the animation, which does not play the animation back in reverse, the utility also exposes a `reverse` function which will animate the element back to it's initial values.
+Instead of `element.reset()`, use `element.reverse()`. This can also be used on timelines.
+
+Usage
+
+```javascript
+const element = animateStagger(
+  {
+    opacity: [0, 1],
+    translateX: [20, 0],
+    translateY: [20, 0],
+  },
+  { stagger: 1200, duration: 800 },
+);
+
+...
+
+useEffect(() => {
+  if (startAnimation) {
+    element.start();
+  } else {
+    element.reverse();
+  }
+}, [startAnimation]);
+```
+
 ## Hooks
 
 ### useForm & useFormUtils
 
 Read documentation about useForm here: https://github.com/prototypdigital/skeleform
 
-### useAnimation & useAnimationTimeline
+### LEGACY: useAnimation & useAnimationTimeline
+
+This approach is not going to be maintained anymore starting from version 1.0.10. New utilities have been created that are more performant and more flexible, but the following hooks will still be available for the foreseeable future. For more information on the new approach, see <b>Animations</b> above.
 
 ---
 
@@ -256,7 +405,7 @@ Read documentation about useForm here: https://github.com/prototypdigital/skelef
 
 ```javascript
 const inputs = useAnimation(...);
-const  heading  =  useAnimation(
+const heading = useAnimation(
 	{opacity: [0, 1], translateY: [20, 0]},
 	{duration: 400},
 );
@@ -272,8 +421,10 @@ useAnimTimeline({
 
 ...
 
-// Transformations cannot be applied outside the transform style.
-// so translateY has to be passed in through the transform style prop.
+// Animations can be passed directly into the Block component without any particular modification
+<Block animations={heading.animations}>...</Block>
+
+// If not using Block, transformations (scale, rotate, translate) cannot be applied outside the transform style - translateY has to be passed in through the transform style prop.
 <Animated.View
 	style={{
 		...heading.animations,

package/lib/module/components/Block/Block.js

@@ -1,12 +1,11 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React, { useMemo } from "react";
-import { ScrollView, StyleSheet, View } from "react-native";
-import { extractAlignmentProperties, extractSizeProperties } from "../../utils";
-const BlockElement = _ref => {
-  let {
-    children,
-    ...props
-  } = _ref;
+import { Animated, ScrollView, StyleSheet } from "react-native";
+import { extractAlignmentProperties, extractAnimationProperties, extractFlexProperties, extractPositionProperties, extractSizeProperties } from "../../utils";
+const BlockElement = ({
+  children,
+  ...props
+}) => {
   const {
     border,
     paddings,
@@ -14,34 +13,26 @@ const BlockElement = _ref => {
     background,
     style,
     overflow,
+    animations,
     ...view
   } = props;
-  const size = extractSizeProperties(props);
-  const {
-    align: alignItems,
-    justify: justifyContent,
-    ...alignment
-  } = extractAlignmentProperties(props);
+  const animationProps = useMemo(() => extractAnimationProperties(animations), [animations]);
+  const flexProps = useMemo(() => extractFlexProperties(props), [props]);
+  const sizeProps = useMemo(() => extractSizeProperties(props), [props]);
+  const positionProps = useMemo(() => extractPositionProperties(props), [props]);
+  const alignmentProps = useMemo(() => extractAlignmentProperties(props), [props]);
   const styles = useMemo(() => StyleSheet.flatten([{
-    ...margins,
-    ...paddings,
-    ...alignment,
-    ...size,
-    ...border,
-    alignItems,
-    justifyContent,
     backgroundColor: background,
     overflow
-  }, style]), [alignment, size, background, style, overflow, margins, paddings]);
-  return /*#__PURE__*/React.createElement(View, _extends({}, view, {
-    style: styles
+  }, alignmentProps, margins, paddings, border, flexProps, sizeProps, positionProps, style]), [alignmentProps, sizeProps, background, style, overflow, margins, paddings, positionProps, flexProps, border]);
+  return /*#__PURE__*/React.createElement(Animated.View, _extends({}, view, {
+    style: [styles, animationProps]
   }), children);
 };
-export const Block = _ref2 => {
-  let {
-    children,
-    ...props
-  } = _ref2;
+export const Block = ({
+  children,
+  ...props
+}) => {
   const {
     scrollable,
     ...rest
@@ -61,10 +52,10 @@ export const Block = _ref2 => {
     keyboardShouldPersistTaps: "handled",
     showsHorizontalScrollIndicator: showsHorizontalScrollIndicator,
     showsVerticalScrollIndicator: showsVerticalScrollIndicator,
-    contentContainerStyle: {
+    contentContainerStyle: [{
       flexGrow: 1,
       backgroundColor: rest.background
-    },
+    }],
     bounces: bounces
   }, element());
 };

package/lib/module/components/Block/Block.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useMemo","ScrollView","StyleSheet","View","extractAlignmentProperties","extractSizeProperties","BlockElement","children","props","border","paddings","margins","background","style","overflow","view","size","align","alignItems","justify","justifyContent","alignment","styles","flatten","backgroundColor","Block","scrollable","rest","element","horizontal","showsHorizontalScrollIndicator","showsVerticalScrollIndicator","bounces","flexGrow"],"sourceRoot":"../../src","sources":["Block.tsx"],"mappings":";AAAA,OAAOA,KAAK,IAAuBC,OAAO,QAAQ,OAAO;AACzD,SACEC,UAAU,EAEVC,UAAU,EACVC,IAAI,QAGC,cAAc;AAErB,SAASC,0BAA0B,EAAEC,qBAAqB,QAAQ,aAAa;AAsB/E,MAAMC,YAA4D,GAAG,QAG/D;EAAA,IAHgE;IACpEC,QAAQ;IACR,GAAGC;EACL,CAAC;EACC,MAAM;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,OAAO;IAAEC,UAAU;IAAEC,KAAK;IAAEC,QAAQ;IAAE,GAAGC;EAAK,CAAC,GACvEP,KAAK;EAEP,MAAMQ,IAAI,GAAGX,qBAAqB,CAACG,KAAK,CAAC;EACzC,MAAM;IACJS,KAAK,EAAEC,UAAU;IACjBC,OAAO,EAAEC,cAAc;IACvB,GAAGC;EACL,CAAC,GAAGjB,0BAA0B,CAACI,KAAK,CAAC;EAErC,MAAMc,MAAM,GAAGtB,OAAO,CACpB,MACEE,UAAU,CAACqB,OAAO,CAAC,CACjB;IACE,GAAGZ,OAAO;IACV,GAAGD,QAAQ;IACX,GAAGW,SAAS;IACZ,GAAGL,IAAI;IACP,GAAGP,MAAM;IACTS,UAAU;IACVE,cAAc;IACdI,eAAe,EAAEZ,UAAU;IAC3BE;EACF,CAAC,EACDD,KAAK,CACN,CAAC,EACJ,CAACQ,SAAS,EAAEL,IAAI,EAAEJ,UAAU,EAAEC,KAAK,EAAEC,QAAQ,EAAEH,OAAO,EAAED,QAAQ,CAAC,CAClE;EAED,oBACE,oBAAC,IAAI,eAAKK,IAAI;IAAE,KAAK,EAAEO;EAAO,IAC3Bf,QAAQ,CACJ;AAEX,CAAC;AAKD,OAAO,MAAMkB,KAA8C,GAAG,SAGxD;EAAA,IAHyD;IAC7DlB,QAAQ;IACR,GAAGC;EACL,CAAC;EACC,MAAM;IAAEkB,UAAU;IAAE,GAAGC;EAAK,CAAC,GAAGnB,KAAK;EACrC,MAAMoB,OAAO,GAAG,mBAAM,oBAAC,YAAY,EAAKD,IAAI,EAAGpB,QAAQ,CAAgB;EAEvE,IAAI,CAACmB,UAAU,EAAE;IACf,OAAOE,OAAO,EAAE;EAClB;EAEA,MAAM;IACJC,UAAU;IACVC,8BAA8B;IAC9BC,4BAA4B;IAC5BC;EACF,CAAC,GAAGxB,KAAK;EAET,oBACE,oBAAC,UAAU;IACT,UAAU,EAAEqB,UAAW;IACvB,yBAAyB,EAAC,SAAS;IACnC,8BAA8B,EAAEC,8BAA+B;IAC/D,4BAA4B,EAAEC,4BAA6B;IAC3D,qBAAqB,EAAE;MAAEE,QAAQ,EAAE,CAAC;MAAET,eAAe,EAAEG,IAAI,CAACf;IAAW,CAAE;IACzE,OAAO,EAAEoB;EAAQ,GAEhBJ,OAAO,EAAE,CACC;AAEjB,CAAC"}
+{"version":3,"names":["React","useMemo","Animated","ScrollView","StyleSheet","extractAlignmentProperties","extractAnimationProperties","extractFlexProperties","extractPositionProperties","extractSizeProperties","BlockElement","children","props","border","paddings","margins","background","style","overflow","animations","view","animationProps","flexProps","sizeProps","positionProps","alignmentProps","styles","flatten","backgroundColor","createElement","View","_extends","Block","scrollable","rest","element","horizontal","showsHorizontalScrollIndicator","showsVerticalScrollIndicator","bounces","keyboardShouldPersistTaps","contentContainerStyle","flexGrow"],"sourceRoot":"../../src","sources":["Block.tsx"],"mappings":";AAAA,OAAOA,KAAK,IAAuBC,OAAO,QAAQ,OAAO;AACzD,SACEC,QAAQ,EACRC,UAAU,EAGVC,UAAU,QAGL,cAAc;AAWrB,SACEC,0BAA0B,EAC1BC,0BAA0B,EAC1BC,qBAAqB,EACrBC,yBAAyB,EACzBC,qBAAqB,QAChB,aAAa;AA+BpB,MAAMC,YAA4D,GAAGA,CAAC;EACpEC,QAAQ;EACR,GAAGC;AACL,CAAC,KAAK;EACJ,MAAM;IACJC,MAAM;IACNC,QAAQ;IACRC,OAAO;IACPC,UAAU;IACVC,KAAK;IACLC,QAAQ;IACRC,UAAU;IACV,GAAGC;EACL,CAAC,GAAGR,KAAK;EAET,MAAMS,cAAc,GAAGpB,OAAO,CAC5B,MAAMK,0BAA0B,CAACa,UAAU,CAAC,EAC5C,CAACA,UAAU,CACb,CAAC;EACD,MAAMG,SAAS,GAAGrB,OAAO,CAAC,MAAMM,qBAAqB,CAACK,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EACtE,MAAMW,SAAS,GAAGtB,OAAO,CAAC,MAAMQ,qBAAqB,CAACG,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EACtE,MAAMY,aAAa,GAAGvB,OAAO,CAC3B,MAAMO,yBAAyB,CAACI,KAAK,CAAC,EACtC,CAACA,KAAK,CACR,CAAC;EACD,MAAMa,cAAc,GAAGxB,OAAO,CAC5B,MAAMI,0BAA0B,CAACO,KAAK,CAAC,EACvC,CAACA,KAAK,CACR,CAAC;EAED,MAAMc,MAAM,GAAGzB,OAAO,CACpB,MACEG,UAAU,CAACuB,OAAO,CAAC,CACjB;IACEC,eAAe,EAAEZ,UAAU;IAC3BE;EACF,CAAC,EACDO,cAAc,EACdV,OAAO,EACPD,QAAQ,EACRD,MAAM,EACNS,SAAS,EACTC,SAAS,EACTC,aAAa,EACbP,KAAK,CACN,CAAC,EACJ,CACEQ,cAAc,EACdF,SAAS,EACTP,UAAU,EACVC,KAAK,EACLC,QAAQ,EACRH,OAAO,EACPD,QAAQ,EACRU,aAAa,EACbF,SAAS,EACTT,MAAM,CAEV,CAAC;EAED,oBACEb,KAAA,CAAA6B,aAAA,CAAC3B,QAAQ,CAAC4B,IAAI,EAAAC,QAAA,KAAKX,IAAI;IAAEH,KAAK,EAAE,CAACS,MAAM,EAAEL,cAAc;EAAE,IACtDV,QACY,CAAC;AAEpB,CAAC;AAYD,OAAO,MAAMqB,KAA8C,GAAGA,CAAC;EAC7DrB,QAAQ;EACR,GAAGC;AACL,CAAC,KAAK;EACJ,MAAM;IAAEqB,UAAU;IAAE,GAAGC;EAAK,CAAC,GAAGtB,KAAK;EACrC,MAAMuB,OAAO,GAAGA,CAAA,kBAAMnC,KAAA,CAAA6B,aAAA,CAACnB,YAAY,EAAKwB,IAAI,EAAGvB,QAAuB,CAAC;EAEvE,IAAI,CAACsB,UAAU,EAAE;IACf,OAAOE,OAAO,CAAC,CAAC;EAClB;EAEA,MAAM;IACJC,UAAU;IACVC,8BAA8B;IAC9BC,4BAA4B;IAC5BC;EACF,CAAC,GAAG3B,KAAK;EAET,oBACEZ,KAAA,CAAA6B,aAAA,CAAC1B,UAAU;IACTiC,UAAU,EAAEA,UAAW;IACvBI,yBAAyB,EAAC,SAAS;IACnCH,8BAA8B,EAAEA,8BAA+B;IAC/DC,4BAA4B,EAAEA,4BAA6B;IAC3DG,qBAAqB,EAAE,CACrB;MAAEC,QAAQ,EAAE,CAAC;MAAEd,eAAe,EAAEM,IAAI,CAAClB;IAAW,CAAC,CACjD;IACFuB,OAAO,EAAEA;EAAQ,GAEhBJ,OAAO,CAAC,CACC,CAAC;AAEjB,CAAC"}

package/lib/module/components/InputFocusScrollView/InputFocusScrollView.js

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React, { useRef, useState } from "react";
-import { Platform, ScrollView, StyleSheet, Dimensions } from "react-native";
+import { Dimensions, Platform, ScrollView, StyleSheet } from "react-native";
 /**
  * This scroll view will automatically scroll to an active input field rendered within it, provided you attach the onInputFocus callback to the input onFocus prop.
  *
@@ -8,24 +8,25 @@ import { Platform, ScrollView, StyleSheet, Dimensions } from "react-native";
  * @example <InputFocusScrollView>{(onInputFocus) => <TextInput onFocus={onInputFocus} ... />}</InputFocusScrollView>
  * NOTE: This works on iOS only, Android does this by default with @param android:windowSoftInputMode
  */
-export const InputFocusScrollView = _ref => {
-  let {
-    children,
-    style,
-    contentContainerStyle,
-    height = "full",
-    focusPositionOffset = 0.3,
-    margins,
-    paddings,
-    ...rest
-  } = _ref;
+export const InputFocusScrollView = ({
+  children,
+  style,
+  contentContainerStyle,
+  height = "full",
+  focusPositionOffset = 0.3,
+  margins,
+  paddings,
+  ...rest
+}) => {
   const screenHeight = useRef(Dimensions.get("screen").height).current;
   const ref = useRef(null);
   /** Cached scroll position to keep focus on input if layout shifts. */
   const [scrollPosition, setScrollPosition] = useState(null);
   const [scrollTarget, setScrollTarget] = useState(null);
   function onInputFocus(e) {
-    if (Platform.OS !== "ios" || !scrollTarget) return;
+    if (Platform.OS !== "ios" || !scrollTarget) {
+      return;
+    }
     e.currentTarget.measureLayout(scrollTarget, (nope, top, nuuh, elementHeight) => {
       var _ref$current;
       let scrollY = top - elementHeight;
@@ -36,7 +37,7 @@ export const InputFocusScrollView = _ref => {
       // Cache scroll position for layout shift cases
       setScrollPosition(scrollY);
       // Scroll to input position
-      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.scrollTo({
+      (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.scrollTo({
         y: scrollY
       });
     }, () => console.error("failed to measure layout"));
@@ -48,7 +49,7 @@ export const InputFocusScrollView = _ref => {
     if (Platform.OS !== "ios" || !scrollPosition) {
       return;
     }
-    (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.scrollTo({
+    (_ref$current2 = ref.current) === null || _ref$current2 === void 0 || _ref$current2.scrollTo({
       y: scrollPosition,
       animated: false
     });

package/lib/module/components/InputFocusScrollView/InputFocusScrollView.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useRef","useState","Platform","ScrollView","StyleSheet","Dimensions","InputFocusScrollView","children","style","contentContainerStyle","height","focusPositionOffset","margins","paddings","rest","screenHeight","get","current","ref","scrollPosition","setScrollPosition","scrollTarget","setScrollTarget","onInputFocus","e","OS","currentTarget","measureLayout","nope","top","nuuh","elementHeight","scrollY","undefined","scrollTo","y","console","error","onContentSizeChange","animated","containerStyles","flatten","styles","contentStyles","content","create","full","auto","flexGrow","paddingBottom"],"sourceRoot":"../../src","sources":["InputFocusScrollView.tsx"],"mappings":"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"}
+{"version":3,"names":["React","useRef","useState","Dimensions","Platform","ScrollView","StyleSheet","InputFocusScrollView","children","style","contentContainerStyle","height","focusPositionOffset","margins","paddings","rest","screenHeight","get","current","ref","scrollPosition","setScrollPosition","scrollTarget","setScrollTarget","onInputFocus","e","OS","currentTarget","measureLayout","nope","top","nuuh","elementHeight","_ref$current","scrollY","undefined","scrollTo","y","console","error","onContentSizeChange","_ref$current2","animated","containerStyles","flatten","styles","contentStyles","content","createElement","_extends","scrollToOverflowEnabled","scrollEventThrottle","onLayout","showsVerticalScrollIndicator","showsHorizontalScrollIndicator","create","full","auto","flexGrow","paddingBottom"],"sourceRoot":"../../src","sources":["InputFocusScrollView.tsx"],"mappings":"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"}

package/lib/module/components/Screen/Screen.js

@@ -1,21 +1,20 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React from "react";
-import { SafeAreaView, View, StyleSheet, StatusBar, Platform, Dimensions } from "react-native";
+import { Dimensions, Platform, SafeAreaView, StatusBar, StyleSheet, View } from "react-native";
 import { useSkeletor } from "../../hooks";
 import { Block } from "../Block";
-export const Screen = _ref => {
-  let {
-    background,
-    children,
-    hideBottomSafeArea,
-    hideTopSafeArea,
-    bottomSafeAreaColor,
-    topSafeAreaColor,
-    style,
-    statusBarType,
-    isLandscape,
-    ...rest
-  } = _ref;
+export const Screen = ({
+  background,
+  children,
+  hideBottomSafeArea,
+  hideTopSafeArea,
+  bottomSafeAreaColor,
+  topSafeAreaColor,
+  style,
+  statusBarType,
+  isLandscape,
+  ...rest
+}) => {
   const {
     defaultStatusBarType
   } = useSkeletor();

package/lib/module/components/Screen/Screen.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","SafeAreaView","View","StyleSheet","StatusBar","Platform","Dimensions","useSkeletor","Block","Screen","background","children","hideBottomSafeArea","hideTopSafeArea","bottomSafeAreaColor","topSafeAreaColor","style","statusBarType","isLandscape","rest","defaultStatusBarType","styles","container","backgroundColor","paddingTop","OS","currentHeight","create","position","height","get","width"],"sourceRoot":"../../src","sources":["Screen.tsx"],"mappings":";AAAA,OAAOA,KAAK,MAA6B,OAAO;AAChD,SACEC,YAAY,EACZC,IAAI,EAEJC,UAAU,EACVC,SAAS,EACTC,QAAQ,EACRC,UAAU,QACL,cAAc;AACrB,SAASC,WAAW,QAAQ,aAAa;AACzC,SAASC,KAAK,QAAQ,UAAU;AAehC,OAAO,MAAMC,MAAgD,GAAG,QAW1D;EAAA,IAX2D;IAC/DC,UAAU;IACVC,QAAQ;IACRC,kBAAkB;IAClBC,eAAe;IACfC,mBAAmB;IACnBC,gBAAgB;IAChBC,KAAK;IACLC,aAAa;IACbC,WAAW;IACX,GAAGC;EACL,CAAC;EACC,MAAM;IAAEC;EAAqB,CAAC,GAAGb,WAAW,EAAE;EAE9C,oBACE,0CACGG,UAAU,KACR,OAAOA,UAAU,KAAK,QAAQ,gBAC7B,oBAAC,IAAI;IAAC,KAAK,EAAE,CAACW,MAAM,CAACC,SAAS,EAAE;MAAEC,eAAe,EAAEb;IAAW,CAAC;EAAE,EAAG,gBAEpE,oBAAC,IAAI;IAAC,KAAK,EAAEW,MAAM,CAACC;EAAU,GAAEZ,UAAU,CAC3C,CAAC,EAEH,CAACG,eAAe,iBACf,oBAAC,YAAY;IAAC,KAAK,EAAE;MAAEU,eAAe,EAAER;IAAiB;EAAE,EAC5D,eAED,oBAAC,SAAS;IACR,WAAW;IACX,eAAe,EAAC,aAAa;IAC7B,QAAQ,EAAEE,aAAa,IAAIG;EAAqB,EAChD,eAEF,oBAAC,KAAK;IACJ,QAAQ,EAAE;MACRI,UAAU,EACRnB,QAAQ,CAACoB,EAAE,KAAK,SAAS,IAAI,CAACP,WAAW,GACrCd,SAAS,CAACsB,aAAa,IAAI,EAAE,GAC7B;IACR,CAAE;IACF,IAAI,EAAE,CAAE;IACR,KAAK,EAAEV;EAAM,GACTG,IAAI,GAEPR,QAAQ,CACH,EAEP,CAACC,kBAAkB,iBAClB,oBAAC,YAAY;IACX,KAAK,EAAE;MACLW,eAAe,EAAET;IACnB;EAAE,EAEL,CACA;AAEP,CAAC;AAED,MAAMO,MAAM,GAAGlB,UAAU,CAACwB,MAAM,CAAC;EAC/BL,SAAS,EAAE;IACTM,QAAQ,EAAE,UAAU;IACpBC,MAAM,EAAEvB,UAAU,CAACwB,GAAG,CAAC,QAAQ,CAAC,CAACD,MAAM;IACvCE,KAAK,EAAEzB,UAAU,CAACwB,GAAG,CAAC,QAAQ,CAAC,CAACC;EAClC;AACF,CAAC,CAAC"}
+{"version":3,"names":["React","Dimensions","Platform","SafeAreaView","StatusBar","StyleSheet","View","useSkeletor","Block","Screen","background","children","hideBottomSafeArea","hideTopSafeArea","bottomSafeAreaColor","topSafeAreaColor","style","statusBarType","isLandscape","rest","defaultStatusBarType","createElement","Fragment","styles","container","backgroundColor","translucent","barStyle","_extends","paddings","paddingTop","OS","currentHeight","flex","create","position","height","get","width"],"sourceRoot":"../../src","sources":["Screen.tsx"],"mappings":";AAAA,OAAOA,KAAK,MAA6B,OAAO;AAChD,SACEC,UAAU,EACVC,QAAQ,EACRC,YAAY,EACZC,SAAS,EACTC,UAAU,EACVC,IAAI,QAEC,cAAc;AAErB,SAASC,WAAW,QAAQ,aAAa;AACzC,SAASC,KAAK,QAAQ,UAAU;AAehC,OAAO,MAAMC,MAAgD,GAAGA,CAAC;EAC/DC,UAAU;EACVC,QAAQ;EACRC,kBAAkB;EAClBC,eAAe;EACfC,mBAAmB;EACnBC,gBAAgB;EAChBC,KAAK;EACLC,aAAa;EACbC,WAAW;EACX,GAAGC;AACL,CAAC,KAAK;EACJ,MAAM;IAAEC;EAAqB,CAAC,GAAGb,WAAW,CAAC,CAAC;EAE9C,oBACEP,KAAA,CAAAqB,aAAA,CAAArB,KAAA,CAAAsB,QAAA,QACGZ,UAAU,KACR,OAAOA,UAAU,KAAK,QAAQ,gBAC7BV,KAAA,CAAAqB,aAAA,CAACf,IAAI;IAACU,KAAK,EAAE,CAACO,MAAM,CAACC,SAAS,EAAE;MAAEC,eAAe,EAAEf;IAAW,CAAC;EAAE,CAAE,CAAC,gBAEpEV,KAAA,CAAAqB,aAAA,CAACf,IAAI;IAACU,KAAK,EAAEO,MAAM,CAACC;EAAU,GAAEd,UAAiB,CAClD,CAAC,EAEH,CAACG,eAAe,iBACfb,KAAA,CAAAqB,aAAA,CAAClB,YAAY;IAACa,KAAK,EAAE;MAAES,eAAe,EAAEV;IAAiB;EAAE,CAAE,CAC9D,eAEDf,KAAA,CAAAqB,aAAA,CAACjB,SAAS;IACRsB,WAAW;IACXD,eAAe,EAAC,aAAa;IAC7BE,QAAQ,EAAEV,aAAa,IAAIG;EAAqB,CACjD,CAAC,eAEFpB,KAAA,CAAAqB,aAAA,CAACb,KAAK,EAAAoB,QAAA;IACJC,QAAQ,EAAE;MACRC,UAAU,EACR5B,QAAQ,CAAC6B,EAAE,KAAK,SAAS,IAAI,CAACb,WAAW,GACrCd,SAAS,CAAC4B,aAAa,IAAI,EAAE,GAC7B;IACR,CAAE;IACFC,IAAI,EAAE,CAAE;IACRjB,KAAK,EAAEA;EAAM,GACTG,IAAI,GAEPR,QACI,CAAC,EAEP,CAACC,kBAAkB,iBAClBZ,KAAA,CAAAqB,aAAA,CAAClB,YAAY;IACXa,KAAK,EAAE;MACLS,eAAe,EAAEX;IACnB;EAAE,CACH,CAEH,CAAC;AAEP,CAAC;AAED,MAAMS,MAAM,GAAGlB,UAAU,CAAC6B,MAAM,CAAC;EAC/BV,SAAS,EAAE;IACTW,QAAQ,EAAE,UAAU;IACpBC,MAAM,EAAEnC,UAAU,CAACoC,GAAG,CAAC,QAAQ,CAAC,CAACD,MAAM;IACvCE,KAAK,EAAErC,UAAU,CAACoC,GAAG,CAAC,QAAQ,CAAC,CAACC;EAClC;AACF,CAAC,CAAC"}

package/lib/module/components/SkeletorProvider/SkeletorContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","SkeletorDefaults","defaultFont","undefined","defaultFontSize","defaultStatusBarType","defaultTextColor","SkeletorContext","createContext"],"sourceRoot":"../../src","sources":["SkeletorContext.ts"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAO,MAAMC,gBAAgC,GAAG;EAC9CC,WAAW,EAAEC,SAAS;EACtBC,eAAe,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC;EACzBC,oBAAoB,EAAE,cAAc;EACpCC,gBAAgB,EAAE;AACpB,CAAC;AAED,OAAO,MAAMC,eAAe,gBAC1BP,KAAK,CAACQ,aAAa,CAAiBP,gBAAgB,CAAC"}
+{"version":3,"names":["React","SkeletorDefaults","defaultFont","undefined","defaultFontSize","defaultStatusBarType","defaultTextColor","SkeletorContext","createContext"],"sourceRoot":"../../src","sources":["SkeletorContext.ts"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAIzB,OAAO,MAAMC,gBAAgC,GAAG;EAC9CC,WAAW,EAAEC,SAAS;EACtBC,eAAe,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC;EACzBC,oBAAoB,EAAE,cAAc;EACpCC,gBAAgB,EAAE;AACpB,CAAC;AAED,OAAO,MAAMC,eAAe,gBAC1BP,KAAK,CAACQ,aAAa,CAAiBP,gBAAgB,CAAC"}

package/lib/module/components/SkeletorProvider/SkeletorProvider.js

@@ -2,11 +2,10 @@ import React from "react";
 import { SkeletorContext, SkeletorDefaults } from "./SkeletorContext";
 /** Create a Font.d.ts type in your typescript types directory and define fonts as follows:
  * @example type Font = "Helvetica" | "Montserrat" ...  */
-export const SkeletorProvider = _ref => {
-  let {
-    children,
-    ...config
-  } = _ref;
+export const SkeletorProvider = ({
+  children,
+  ...config
+}) => {
   return /*#__PURE__*/React.createElement(SkeletorContext.Provider, {
     value: {
       ...SkeletorDefaults,

package/lib/module/components/SkeletorProvider/SkeletorProvider.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","SkeletorContext","SkeletorDefaults","SkeletorProvider","children","config"],"sourceRoot":"../../src","sources":["SkeletorProvider.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAA6B,OAAO;AAEhD,SAASC,eAAe,EAAEC,gBAAgB,QAAQ,mBAAmB;AAIrE;AACA;AACA,OAAO,MAAMC,gBAAoD,GAAG,QAG9D;EAAA,IAH+D;IACnEC,QAAQ;IACR,GAAGC;EACL,CAAC;EACC,oBACE,oBAAC,eAAe,CAAC,QAAQ;IAAC,KAAK,EAAE;MAAE,GAAGH,gBAAgB;MAAE,GAAGG;IAAO;EAAE,GACjED,QAAQ,CACgB;AAE/B,CAAC"}
+{"version":3,"names":["React","SkeletorContext","SkeletorDefaults","SkeletorProvider","children","config","createElement","Provider","value"],"sourceRoot":"../../src","sources":["SkeletorProvider.tsx"],"mappings":"AAAA,OAAOA,KAAK,MAA6B,OAAO;AAGhD,SAASC,eAAe,EAAEC,gBAAgB,QAAQ,mBAAmB;AAIrE;AACA;AACA,OAAO,MAAMC,gBAAoD,GAAGA,CAAC;EACnEC,QAAQ;EACR,GAAGC;AACL,CAAC,KAAK;EACJ,oBACEL,KAAA,CAAAM,aAAA,CAACL,eAAe,CAACM,QAAQ;IAACC,KAAK,EAAE;MAAE,GAAGN,gBAAgB;MAAE,GAAGG;IAAO;EAAE,GACjED,QACuB,CAAC;AAE/B,CAAC"}

package/lib/module/components/SkeletorProvider/index.js

@@ -1,3 +1,3 @@
-export * from "./SkeletorProvider";
 export * from "./SkeletorContext";
+export * from "./SkeletorProvider";
 //# sourceMappingURL=index.js.map

package/lib/module/components/SkeletorProvider/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AAAA,cAAc,oBAAoB;AAClC,cAAc,mBAAmB"}
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["index.ts"],"mappings":"AAAA,cAAc,mBAAmB;AACjC,cAAc,oBAAoB"}

package/lib/module/components/Text/Text.js

@@ -1,31 +1,34 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React, { useMemo } from "react";
-import { StyleSheet, Text as RNText } from "react-native";
-import { extractSizeProperties } from "../../utils";
+import { Animated, StyleSheet } from "react-native";
 import { useSkeletor } from "../../hooks";
+import { extractAnimationProperties, extractFlexProperties, extractPositionProperties, extractSizeProperties } from "../../utils";
 /** Create a Font.d.ts type in your typescript types directory and define fonts as follows:
  * @example type Font = "Helvetica" | "Montserrat" ...  */
-export const Text = _ref => {
-  let {
-    font,
-    size,
-    textTransform,
-    letterSpacing,
-    color,
-    style,
-    children,
-    textAlign,
-    opacity,
-    margins,
-    paddings,
-    ...props
-  } = _ref;
+export const Text = ({
+  font,
+  size,
+  textTransform,
+  letterSpacing,
+  color,
+  style,
+  children,
+  textAlign,
+  opacity,
+  margins,
+  paddings,
+  animations,
+  ...props
+}) => {
   const {
     defaultFont,
     defaultFontSize,
     defaultTextColor
   } = useSkeletor();
-  const sizeProps = extractSizeProperties(props);
+  const animationProps = useMemo(() => extractAnimationProperties(animations), [animations]);
+  const positionProps = useMemo(() => extractPositionProperties(props), [props]);
+  const flexProps = useMemo(() => extractFlexProperties(props), [props]);
+  const sizeProps = useMemo(() => extractSizeProperties(props), [props]);
   const textSize = useMemo(() => {
     function mapper(value) {
       if (Array.isArray(value)) {
@@ -45,18 +48,14 @@ export const Text = _ref => {
   }, [size, defaultFontSize]);
   const styles = useMemo(() => StyleSheet.flatten([{
     color: color || defaultTextColor,
-    ...textSize,
     fontFamily: font || defaultFont,
     opacity,
     textAlign,
     textTransform,
-    letterSpacing,
-    ...margins,
-    ...paddings,
-    ...sizeProps
-  }, style]), [color, font, opacity, textAlign, textTransform, textSize, margins, paddings, style]);
-  return /*#__PURE__*/React.createElement(RNText, _extends({
-    style: styles,
+    letterSpacing
+  }, textSize, margins, paddings, sizeProps, flexProps, positionProps, style]), [color, font, opacity, textAlign, textTransform, textSize, margins, paddings, style, positionProps, sizeProps, flexProps, defaultTextColor, defaultFont, letterSpacing]);
+  return /*#__PURE__*/React.createElement(Animated.Text, _extends({
+    style: [styles, animationProps],
     allowFontScaling: false,
     maxFontSizeMultiplier: 1
   }, props), children);