@skel-ui/react-native 1.0.0-alpha.c6a0c37 → 1.0.0-alpha.cc98c67

package/README.md

@@ -1,71 +1,75 @@
-# Getting Started
+Skel UI resolves the challenges of implementing skeletons by eliminating the need to create dedicated loading screens and providing an easier way to manage skeleton states using React Context.
 
-Skel UI resolves the challenges of implementing skeletons by eliminating the need to create dedicated loading screens and providing an easier way to manage skeleton states using react-context.
+See the comparision [here](https://skel-ui.augustin.zip/#comparision).
 
-## Installation
+## Get Started
 
-Install the package into your project via command line.
+### Add Skel Provider
 
-```bash
-npm install @skel-ui/react
-```
+Wrap your application with Skel UI provider.
 
-## Importing CSS
 
-Import the CSS file into the root of your application.
+```tsx
+import * as Skel from "@skel-ui/react-native";
 
-```js
-import "@skel-ui/react/styles.css";
+export default function App() {
+  return <Skel.Provider> ... </Skel.Provider>;
+}
 ```
 
-## Start crafting UI
+### Implement Skel UI
 
 Now it's time for you to craft your user interface to life!
 
-```jsx
-import * as Skel from "@skel-ui/react";
-import Image from "next/image";
+```tsx
+import * as Skel from "@skel-ui/react-native";
+import RN from "react-native";
 
-function Profile() {
-  const { user, isLoading } = useProfile();
+export default function PostCard() {
+  const { post, isLoading } = usePost();
 
   return (
     <Skel.Root isLoading={isLoading}>
-      <Skel.Item className="user-avatar">
-        <Image src={user.profile} />
-      </Skel.Item>
-      <Skel.Item as="h1" className="user-email">
-        {user.email}
-      </Skel.Item>
+      <RN.View style={styles.card}>
+        <Skel.Image src={post?.image} style={styles.cardImage} />
+        <Skel.Text sw="65%" style={styles.cardTitle}>
+          {post?.title}
+        </Skel.Text>
+        <Skel.Text numberOfLines={3} style={styles.cardDescription}>
+          {post?.description}
+        </Skel.Text>
+      </RN.View>
     </Skel.Root>
   );
 }
-```
-
-Now, not only have you designed the skeleton, but you have also done the actual UI. Additionally, the skeleton state for the entire UI is handled in a single place at the `<Skel.Root>` .
-
-## Customization
-
-Customize the default color and border-radius of skeleton using css variables.
 
-```css title="global.css"
-:root {
-    --skel-ui-color1: #a1a1aa;
-    --skel-ui-color2: #e4e4e7;
-    --skel-ui-radius: 0.25rem;
-}
+const styles = RN.StyleSheet.create({
+  card: {
+    width: 320,
+    padding: 10,
+    marginHorizontal: "auto",
+    borderWidth: 1,
+    borderColor: "#e2e8f0",
+    borderRadius: 8,
+  },
+  cardImage: {
+    borderRadius: 4,
+    aspectRatio: 800 / 530,
+  },
+  cardTitle: {
+    marginTop: 16,
+    marginBottom: 8,
+    fontSize: 24,
+    lineHeight: 28,
+    fontWeight: 800,
+  },
+  cardDescription: {
+    fontSize: 14,
+    lineHeight: 20,
+  },
+});
 ```
 
-Each `Skel.Item` will have a `data-loading` attribute that is set to `"true"` when the item is in a loading state, and `"false"` otherwise. You can use this attribute in your CSS to create styles based on the loading state.
-
-```css
-/* This style will be applied during loading. */
-.user-email[data-loading="true"] {
-  width: 5rem;
-}
+Now, not only have you designed the skeleton, but you have also done the actual UI. Additionally, the skeleton state for the entire UI is handled in a single place at the `<Skel.Root>` .
 
-/* This style will be applied after loading is done. */
-.user-email[data-loading="false"]:hover {
-  background: #f97316;
-}
-```
+For full documentation, visit [skel-ui.augustin.zip](https://skel-ui.augustin.zip/)

package/dist/Animation.d.ts

@@ -3,21 +3,25 @@ import { ReactNode } from "react";
 import { View } from "react-native";
 import { EasingFunction, EasingFunctionFactory } from "react-native-reanimated";
 import { TStyle } from "./funcs";
-type UIOptions = {
+type AnimationProps = Pick<SkelComponentProps<typeof View>, "sw" | "sh" | "sr"> & {
+    style?: TStyle;
+    numberOfLines?: number;
+};
+export type UIOptions = {
+    color?: string;
     radius?: number;
-    colors?: [string, string];
+    shimmer?: {
+        color?: string;
+    };
     animation?: {
+        component: ReactNode;
+    } | {
+        delay?: number;
         easing?: EasingFunction | EasingFunctionFactory;
         duration?: number;
-    } | {
-        component: ReactNode;
     };
     skelUIPulse?: boolean;
 };
-type AnimationProps = Pick<SkelComponentProps<typeof View>, "sw" | "sh" | "sr"> & {
-    style?: TStyle;
-    numberOfLines?: number;
-};
 export declare const UIOptionsContext: import("react").Context<UIOptions>;
 export declare function Animation({ sw, sh, sr, style, numberOfLines }: AnimationProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/Animation.js

@@ -39,30 +39,41 @@ var import_react_native = require("react-native");
 var import_react_native_reanimated = __toESM(require("react-native-reanimated"));
 var import_funcs = require("./funcs");
 const UIOptionsContext = (0, import_react.createContext)({});
-function Pluse({ colors, animation }) {
+function Pluse({ color, animation }) {
   const opacity = (0, import_react_native_reanimated.useSharedValue)(0.5);
   (0, import_react_native_reanimated.useFrameCallback)(() => {
-    if (opacity.value === 1) opacity.value = (0, import_react_native_reanimated.withTiming)(0.5, animation);
-    if (opacity.value === 0.5) opacity.value = (0, import_react_native_reanimated.withTiming)(1, animation);
+    if (opacity.value === 1 || opacity.value === 0.5) {
+      const { delay, ...options } = animation;
+      opacity.value = (0, import_react_native_reanimated.withDelay)(delay, (0, import_react_native_reanimated.withTiming)(opacity.value === 1 ? 0.5 : 1, options));
+    }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_reanimated.default.View, { style: { width: "100%", height: "100%", opacity, backgroundColor: colors[0] }, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: " \u200C " }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native_reanimated.default.View, { style: { width: "100%", height: "100%", opacity, backgroundColor: color }, "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { children: " \u200C " }) });
 }
-function Gradient({ colors, animation }) {
-  const translateX = (0, import_react_native_reanimated.useSharedValue)("-100%");
+function Shimmer({ color, shimmer, animation }) {
+  const translate = (0, import_react_native_reanimated.useSharedValue)("-100%");
+  const cords = {
+    x: { start: { x: 0, y: 0 }, end: { x: 1, y: 0 } },
+    y: { start: { x: 0, y: 0 }, end: { x: 0, y: 1 } }
+  };
+  const style = { width: "100%", height: "100%" };
   (0, import_react.useEffect)(() => {
-    translateX.value = (0, import_react_native_reanimated.withRepeat)((0, import_react_native_reanimated.withTiming)("100%", animation), -1, false);
+    const { delay, ...options } = animation;
+    translate.value = (0, import_react_native_reanimated.withDelay)(delay, (0, import_react_native_reanimated.withRepeat)((0, import_react_native_reanimated.withTiming)("100%", options), -1, false));
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: { backgroundColor: colors[0] }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: { backgroundColor: color }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_react_native_reanimated.default.View,
     {
-      style: { width: "100%", height: "100%", transform: [{ translateX }] },
+      style: {
+        ...style,
+        transform: [{ translateX: translate }]
+        // transform: [{ [isVertical ? "translateY" : ("translateX" as never)]: translate as unknown as number }],
+      },
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_expo_linear_gradient.LinearGradient,
         {
-          start: { x: 0, y: 0 },
-          end: { x: 1, y: 0 },
-          style: { width: "100%", height: "100%" },
-          colors: [...colors, colors[0]]
+          ...cords.x,
+          style,
+          colors: [color, shimmer.color, color]
         }
       )
     }
@@ -71,11 +82,20 @@ function Gradient({ colors, animation }) {
 function Animation({ sw, sh, sr, style = {}, numberOfLines = 1 }) {
   const text = (0, import_react.useMemo)(() => new Array(numberOfLines).fill(" \u200C ").join("\n"), [numberOfLines]);
   const { viewStyle, textStyle } = (0, import_funcs.filterStyle)(style);
-  const { colors = ["#cbd5e1", "#f1f0f0"], radius = 4, animation = {}, skelUIPulse } = (0, import_react.useContext)(UIOptionsContext);
-  const isCustomAnimation = "component" in animation;
-  const animationItemProps = {
-    colors,
-    animation: { duration: skelUIPulse ? 1e3 : 2e3, easing: import_react_native_reanimated.Easing.bezier(0.4, 0, 0.6, 1), ...animation }
+  const { color = "#cbd5e1", radius = 4, shimmer = {}, animation = {}, skelUIPulse } = (0, import_react.useContext)(UIOptionsContext);
+  const $props = {
+    color,
+    radius,
+    shimmer: {
+      color: "#f1f0f0",
+      ...shimmer
+    },
+    animation: {
+      delay: 0,
+      easing: import_react_native_reanimated.Easing.bezier(0.4, 0, 0.6, 1),
+      duration: skelUIPulse ? 1e3 : 2e3,
+      ...animation
+    }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_react_native.View,
@@ -91,7 +111,7 @@ function Animation({ sw, sh, sr, style = {}, numberOfLines = 1 }) {
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: textStyle, children: text }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: { inset: 0, position: "absolute" }, children: isCustomAnimation ? animation.component : skelUIPulse ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pluse, { ...animationItemProps }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Gradient, { ...animationItemProps }) })
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: { inset: 0, position: "absolute" }, children: "component" in animation ? animation.component : skelUIPulse ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pluse, { ...$props }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Shimmer, { ...$props }) })
       ]
     }
   );

package/dist/cjs/index.js

@@ -26,18 +26,22 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var src_exports = {};
-__export(src_exports, {
-  Custom: () => Custom,
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button,
   Image: () => Image,
+  Item: () => Item,
   Pressable: () => Pressable,
   Provider: () => Provider,
   Root: () => Root,
-  SkelProvider: () => SkelProvider,
   Text: () => Text,
+  TextInput: () => TextInput,
+  TouchableHighlight: () => TouchableHighlight,
+  TouchableOpacity: () => TouchableOpacity,
+  TouchableWithoutFeedback: () => TouchableWithoutFeedback,
   View: () => View
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_core = require("@skel-ui/core");
 var import_react = __toESM(require("react"));
@@ -59,28 +63,34 @@ function createSkelComponent(type) {
   };
 }
 function SkelProvider({
-  colors,
+  color,
   radius,
+  shimmer,
   children,
   animation,
   skelUIPulse
 }) {
   const value = import_react.default.useMemo(
-    () => ({ colors, radius, animation, skelUIPulse }),
-    [colors, radius, animation, skelUIPulse]
+    () => ({ color, radius, shimmer, animation, skelUIPulse }),
+    [color, radius, shimmer, animation, skelUIPulse]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Animation.UIOptionsContext.Provider, { value, children });
 }
-function SkelCustom({
+function SkelItem({
   component,
   ...rest
 }) {
   return createSkelComponent(component)(rest);
 }
 const Root = import_core.SkelRoot;
-const Custom = SkelCustom;
+const Item = SkelItem;
 const Provider = SkelProvider;
 const View = createSkelComponent(ReactNative.View);
 const Text = createSkelComponent(ReactNative.Text);
 const Image = createSkelComponent(ReactNative.Image);
+const Button = createSkelComponent(ReactNative.Button);
 const Pressable = createSkelComponent(ReactNative.Pressable);
+const TextInput = createSkelComponent(ReactNative.TextInput);
+const TouchableOpacity = createSkelComponent(ReactNative.TouchableOpacity);
+const TouchableHighlight = createSkelComponent(ReactNative.TouchableHighlight);
+const TouchableWithoutFeedback = createSkelComponent(ReactNative.TouchableWithoutFeedback);

package/dist/esm/Animation.js

@@ -6,35 +6,47 @@ import Animated, {
   Easing,
   useFrameCallback,
   useSharedValue,
+  withDelay,
   withRepeat,
   withTiming
 } from "react-native-reanimated";
 import { filterStyle } from "./funcs";
 const UIOptionsContext = createContext({});
-function Pluse({ colors, animation }) {
+function Pluse({ color, animation }) {
   const opacity = useSharedValue(0.5);
   useFrameCallback(() => {
-    if (opacity.value === 1) opacity.value = withTiming(0.5, animation);
-    if (opacity.value === 0.5) opacity.value = withTiming(1, animation);
+    if (opacity.value === 1 || opacity.value === 0.5) {
+      const { delay, ...options } = animation;
+      opacity.value = withDelay(delay, withTiming(opacity.value === 1 ? 0.5 : 1, options));
+    }
   });
-  return /* @__PURE__ */ jsx(Animated.View, { style: { width: "100%", height: "100%", opacity, backgroundColor: colors[0] }, "aria-hidden": true, children: /* @__PURE__ */ jsx(Text, { children: " \u200C " }) });
+  return /* @__PURE__ */ jsx(Animated.View, { style: { width: "100%", height: "100%", opacity, backgroundColor: color }, "aria-hidden": true, children: /* @__PURE__ */ jsx(Text, { children: " \u200C " }) });
 }
-function Gradient({ colors, animation }) {
-  const translateX = useSharedValue("-100%");
+function Shimmer({ color, shimmer, animation }) {
+  const translate = useSharedValue("-100%");
+  const cords = {
+    x: { start: { x: 0, y: 0 }, end: { x: 1, y: 0 } },
+    y: { start: { x: 0, y: 0 }, end: { x: 0, y: 1 } }
+  };
+  const style = { width: "100%", height: "100%" };
   useEffect(() => {
-    translateX.value = withRepeat(withTiming("100%", animation), -1, false);
+    const { delay, ...options } = animation;
+    translate.value = withDelay(delay, withRepeat(withTiming("100%", options), -1, false));
   }, []);
-  return /* @__PURE__ */ jsx(View, { style: { backgroundColor: colors[0] }, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(View, { style: { backgroundColor: color }, children: /* @__PURE__ */ jsx(
     Animated.View,
     {
-      style: { width: "100%", height: "100%", transform: [{ translateX }] },
+      style: {
+        ...style,
+        transform: [{ translateX: translate }]
+        // transform: [{ [isVertical ? "translateY" : ("translateX" as never)]: translate as unknown as number }],
+      },
       children: /* @__PURE__ */ jsx(
         LinearGradient,
         {
-          start: { x: 0, y: 0 },
-          end: { x: 1, y: 0 },
-          style: { width: "100%", height: "100%" },
-          colors: [...colors, colors[0]]
+          ...cords.x,
+          style,
+          colors: [color, shimmer.color, color]
         }
       )
     }
@@ -43,11 +55,20 @@ function Gradient({ colors, animation }) {
 function Animation({ sw, sh, sr, style = {}, numberOfLines = 1 }) {
   const text = useMemo(() => new Array(numberOfLines).fill(" \u200C ").join("\n"), [numberOfLines]);
   const { viewStyle, textStyle } = filterStyle(style);
-  const { colors = ["#cbd5e1", "#f1f0f0"], radius = 4, animation = {}, skelUIPulse } = useContext(UIOptionsContext);
-  const isCustomAnimation = "component" in animation;
-  const animationItemProps = {
-    colors,
-    animation: { duration: skelUIPulse ? 1e3 : 2e3, easing: Easing.bezier(0.4, 0, 0.6, 1), ...animation }
+  const { color = "#cbd5e1", radius = 4, shimmer = {}, animation = {}, skelUIPulse } = useContext(UIOptionsContext);
+  const $props = {
+    color,
+    radius,
+    shimmer: {
+      color: "#f1f0f0",
+      ...shimmer
+    },
+    animation: {
+      delay: 0,
+      easing: Easing.bezier(0.4, 0, 0.6, 1),
+      duration: skelUIPulse ? 1e3 : 2e3,
+      ...animation
+    }
   };
   return /* @__PURE__ */ jsxs(
     View,
@@ -63,7 +84,7 @@ function Animation({ sw, sh, sr, style = {}, numberOfLines = 1 }) {
       },
       children: [
         /* @__PURE__ */ jsx(Text, { style: textStyle, children: text }),
-        /* @__PURE__ */ jsx(View, { style: { inset: 0, position: "absolute" }, children: isCustomAnimation ? animation.component : skelUIPulse ? /* @__PURE__ */ jsx(Pluse, { ...animationItemProps }) : /* @__PURE__ */ jsx(Gradient, { ...animationItemProps }) })
+        /* @__PURE__ */ jsx(View, { style: { inset: 0, position: "absolute" }, children: "component" in animation ? animation.component : skelUIPulse ? /* @__PURE__ */ jsx(Pluse, { ...$props }) : /* @__PURE__ */ jsx(Shimmer, { ...$props }) })
       ]
     }
   );

package/dist/esm/index.js

@@ -19,38 +19,48 @@ function createSkelComponent(type) {
   };
 }
 function SkelProvider({
-  colors,
+  color,
   radius,
+  shimmer,
   children,
   animation,
   skelUIPulse
 }) {
   const value = React.useMemo(
-    () => ({ colors, radius, animation, skelUIPulse }),
-    [colors, radius, animation, skelUIPulse]
+    () => ({ color, radius, shimmer, animation, skelUIPulse }),
+    [color, radius, shimmer, animation, skelUIPulse]
   );
   return /* @__PURE__ */ jsx(UIOptionsContext.Provider, { value, children });
 }
-function SkelCustom({
+function SkelItem({
   component,
   ...rest
 }) {
   return createSkelComponent(component)(rest);
 }
 const Root = SkelRoot;
-const Custom = SkelCustom;
+const Item = SkelItem;
 const Provider = SkelProvider;
 const View = createSkelComponent(ReactNative.View);
 const Text = createSkelComponent(ReactNative.Text);
 const Image = createSkelComponent(ReactNative.Image);
+const Button = createSkelComponent(ReactNative.Button);
 const Pressable = createSkelComponent(ReactNative.Pressable);
+const TextInput = createSkelComponent(ReactNative.TextInput);
+const TouchableOpacity = createSkelComponent(ReactNative.TouchableOpacity);
+const TouchableHighlight = createSkelComponent(ReactNative.TouchableHighlight);
+const TouchableWithoutFeedback = createSkelComponent(ReactNative.TouchableWithoutFeedback);
 export {
-  Custom,
+  Button,
   Image,
+  Item,
   Pressable,
   Provider,
   Root,
-  SkelProvider,
   Text,
+  TextInput,
+  TouchableHighlight,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
   View
 };

package/dist/index.d.ts

@@ -1,19 +1,24 @@
 import { SkelComponentProps, SkelRoot } from "@skel-ui/core";
-import type { ComponentProps, ComponentType, ContextType, ReactNode } from "react";
+import type { ComponentProps, ComponentType, ReactNode } from "react";
 import React from "react";
 import * as ReactNative from "react-native";
-import { UIOptionsContext } from "./Animation";
-export declare function SkelProvider({ colors, radius, children, animation, skelUIPulse, }: ContextType<typeof UIOptionsContext> & {
+import { UIOptions } from "./Animation";
+declare function SkelProvider({ color, radius, shimmer, children, animation, skelUIPulse, }: UIOptions & {
     children: ReactNode;
 }): import("react/jsx-runtime").JSX.Element;
-declare function SkelCustom<T extends ComponentType<ComponentProps<T>>>({ component, ...rest }: {
+declare function SkelItem<T extends ComponentType<ComponentProps<T>>>({ component, ...rest }: {
     component: T;
 } & ComponentProps<T> & Pick<SkelComponentProps<T>, "sw" | "sh" | "sr">): import("react/jsx-runtime").JSX.Element;
 export declare const Root: typeof SkelRoot;
-export declare const Custom: typeof SkelCustom;
+export declare const Item: typeof SkelItem;
 export declare const Provider: typeof SkelProvider;
 export declare const View: ({ sw, sh, sr, children, ...props }: SkelComponentProps<typeof ReactNative.View>) => import("react/jsx-runtime").JSX.Element;
 export declare const Text: ({ sw, sh, sr, children, ...props }: SkelComponentProps<typeof ReactNative.Text>) => import("react/jsx-runtime").JSX.Element;
 export declare const Image: ({ sw, sh, sr, children, ...props }: SkelComponentProps<typeof ReactNative.Image>) => import("react/jsx-runtime").JSX.Element;
+export declare const Button: ({ sw, sh, sr, children, ...props }: SkelComponentProps<typeof ReactNative.Button>) => import("react/jsx-runtime").JSX.Element;
 export declare const Pressable: ({ sw, sh, sr, children, ...props }: SkelComponentProps<React.ForwardRefExoticComponent<ReactNative.PressableProps & React.RefAttributes<ReactNative.View>>>) => import("react/jsx-runtime").JSX.Element;
+export declare const TextInput: ({ sw, sh, sr, children, ...props }: SkelComponentProps<typeof ReactNative.TextInput>) => import("react/jsx-runtime").JSX.Element;
+export declare const TouchableOpacity: ({ sw, sh, sr, children, ...props }: SkelComponentProps<React.ForwardRefExoticComponent<ReactNative.TouchableOpacityProps & React.RefAttributes<ReactNative.View>>>) => import("react/jsx-runtime").JSX.Element;
+export declare const TouchableHighlight: ({ sw, sh, sr, children, ...props }: SkelComponentProps<React.ForwardRefExoticComponent<ReactNative.TouchableHighlightProps & React.RefAttributes<ReactNative.View>>>) => import("react/jsx-runtime").JSX.Element;
+export declare const TouchableWithoutFeedback: ({ sw, sh, sr, children, ...props }: SkelComponentProps<typeof ReactNative.TouchableWithoutFeedback>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@skel-ui/react-native",
   "author": "https://github.com/sudoaugustin",
-  "version": "1.0.0-alpha.c6a0c37",
+  "version": "1.0.0-alpha.cc98c67",
   "license": "MIT",
-  "description": "Next era of skeleton loading for React Native",
+  "description": "Lightweight and powerful skeleton library for React.",
   "files": [
     "dist"
   ],
@@ -48,7 +48,7 @@
     "@skel-ui/core": "1.0.0"
   },
   "devDependencies": {
-    "@types/react": "^18.3.12",
+    "@types/react": "18.3.12",
     "esbuild": "^0.24.0",
     "expo-linear-gradient": "^14.0",
     "react": "^18.3.1",
@@ -59,7 +59,7 @@
     "commons-tsconfig": "0.0.1"
   },
   "peerDependencies": {
-    "expo-linear-gradient": "^14.0.",
+    "expo-linear-gradient": "^14.0",
     "react": "^17.0 || ^18.0",
     "react-native": "*",
     "react-native-reanimated": "^3.0"