@proximus/lavender-skeleton-native 0.1.0-alpha.0

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+# 0.1.0-alpha.0 (2025-09-24)
+
+### Features
+
+- **BCRI-4333430:** skeleton components ([#23](https://github.com/Pxs-Corporate/react-native-lavender/issues/23)) ([184f02f](https://github.com/Pxs-Corporate/react-native-lavender/commit/184f02f4f58dd825288b4db905b4bcbe74756ff8))

package/dist/CardSkeleton.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ISkeletonProps } from './types';
+export declare function PxCardSkeleton({ inverted, containerStyle }: ISkeletonProps): React.JSX.Element;
+//# sourceMappingURL=CardSkeleton.d.ts.map

package/dist/CardSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardSkeleton.d.ts","sourceRoot":"","sources":["../src/CardSkeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,EAAE,cAAc,qBAsB1E"}

package/dist/CarouselSkeleton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ISkeletonProps } from './types';
+export declare function PxCarouselSkeleton({ inverted, itemsVisible, containerStyle, }: {
+    itemsVisible?: number;
+} & ISkeletonProps): React.JSX.Element;
+//# sourceMappingURL=CarouselSkeleton.d.ts.map

package/dist/CarouselSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselSkeleton.d.ts","sourceRoot":"","sources":["../src/CarouselSkeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,YAAgB,EAChB,cAAc,GACf,EAAE;IACD,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,GAAG,cAAc,qBAqCjB"}

package/dist/DataUsageSkeleton.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ISkeletonProps } from './types';
+export declare function PxDataUsageSkeleton({ inverted, containerStyle, }: ISkeletonProps): React.JSX.Element;
+//# sourceMappingURL=DataUsageSkeleton.d.ts.map

package/dist/DataUsageSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataUsageSkeleton.d.ts","sourceRoot":"","sources":["../src/DataUsageSkeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,cAAc,GACf,EAAE,cAAc,qBAkChB"}

package/dist/MessageCardSkeleton.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ISkeletonProps } from './types';
+export declare function PxMessageCardSkeleton({ inverted, containerStyle, }: ISkeletonProps): React.JSX.Element;
+//# sourceMappingURL=MessageCardSkeleton.d.ts.map

package/dist/MessageCardSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageCardSkeleton.d.ts","sourceRoot":"","sources":["../src/MessageCardSkeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,cAAc,GACf,EAAE,cAAc,qBAiChB"}

package/dist/Skeleton.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { StyleProp, ViewProps, ViewStyle } from 'react-native';
+export type SkeletonGradientProps = ViewProps & {
+    /** Predefined shape */
+    variant: 'headingS' | 'headingM' | 'headingL' | 'body' | 'bodyS' | 'actionS' | 'actionL' | 'assetXS' | 'assetS' | 'assetL' | 'panel' | 'panelS';
+    width?: number | string;
+    containerStyle?: StyleProp<ViewStyle>;
+    expand?: boolean;
+    inverted?: boolean;
+};
+export declare function PxSkeleton(props: SkeletonGradientProps): React.JSX.Element;
+//# sourceMappingURL=Skeleton.d.ts.map

package/dist/Skeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../src/Skeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAC3D,OAAO,EAIL,SAAS,EAGT,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAC;AAOtB,MAAM,MAAM,qBAAqB,GAAG,SAAS,GAAG;IAC9C,uBAAuB;IACvB,OAAO,EACH,UAAU,GACV,UAAU,GACV,UAAU,GACV,MAAM,GACN,OAAO,GACP,SAAS,GACT,SAAS,GACT,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,OAAO,GACP,QAAQ,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAeF,wBAAgB,UAAU,CAAC,KAAK,EAAE,qBAAqB,qBA+EtD"}

package/dist/StatusSkeleton.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ISkeletonProps } from './types';
+export declare function PxStatusSkeleton({ inverted, containerStyle }: ISkeletonProps): React.JSX.Element;
+//# sourceMappingURL=StatusSkeleton.d.ts.map

package/dist/StatusSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusSkeleton.d.ts","sourceRoot":"","sources":["../src/StatusSkeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAEzC,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,EAAE,cAAc,qBAc5E"}

package/dist/TileSkeleton.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ISkeletonProps } from './types';
+export declare function PxTilesSkeleton({ inverted, containerStyle }: ISkeletonProps): React.JSX.Element;
+//# sourceMappingURL=TileSkeleton.d.ts.map

package/dist/TileSkeleton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TileSkeleton.d.ts","sourceRoot":"","sources":["../src/TileSkeleton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAsBzC,wBAAgB,eAAe,CAAC,EAAE,QAAQ,EAAE,cAAc,EAAE,EAAE,cAAc,qBAmB3E"}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export * from './Skeleton';
+export * from './CardSkeleton';
+export * from './MessageCardSkeleton';
+export * from './CarouselSkeleton';
+export * from './StatusSkeleton';
+export * from './TileSkeleton';
+export * from './DataUsageSkeleton';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,6 @@
+import { StyleProp, ViewStyle } from 'react-native';
+export interface ISkeletonProps {
+    inverted?: boolean;
+    containerStyle?: StyleProp<ViewStyle>;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEpD,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACvC"}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@proximus/lavender-skeleton-native",
+  "version": "0.1.0-alpha.0",
+  "description": "Lavender skeleton component",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "type": "module",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "prepublish": "yarn clean && yarn build",
+    "build": "npx tsc -p tsconfig.json"
+  },
+  "peerDependencies": {
+    "@proximus/lavender-common-native": "workspace:*",
+    "@proximus/lavender-styling-native": "workspace:*",
+    "@proximus/lavender-texts-native": "workspace:*"
+  },
+  "devDependencies": {
+    "@proximus/lavender-common-native": "0.1.0-alpha.4",
+    "@proximus/lavender-styling-native": "0.1.0-alpha.3",
+    "@proximus/lavender-texts-native": "0.1.0-alpha.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "lerna": {
+    "command": {
+      "publish": {
+        "assets": [
+          "dist",
+          "src",
+          "package.json"
+        ]
+      }
+    }
+  },
+  "gitHead": "8794f25d197ead361646d6e655ce64ba1c7f60c0"
+}

package/src/CardSkeleton.tsx

@@ -0,0 +1,29 @@
+import { View } from 'react-native';
+import { PxSkeleton } from './Skeleton';
+import React from 'react';
+import { useTheme } from '@proximus/lavender-styling-native';
+import { ISkeletonProps } from './types';
+
+export function PxCardSkeleton({ inverted, containerStyle }: ISkeletonProps) {
+  const { theme } = useTheme();
+
+  return (
+    <View
+      style={[containerStyle, { borderRadius: theme.t('RadiusMain').number }]}
+    >
+      <PxSkeleton variant={'assetL'} inverted={inverted} expand />
+      <View
+        style={{
+          gap: theme.t('SpacingSMobile').number,
+          borderBottomEndRadius: theme.t('RadiusMain').number,
+          borderBottomStartRadius: theme.t('RadiusMain').number,
+          padding: theme.t('PaddingSMobile').number,
+          backgroundColor: theme.t('ColorBackgroundSurfaceLight'),
+        }}
+      >
+        <PxSkeleton variant={'headingS'} inverted={inverted} />
+        <PxSkeleton variant={'body'} inverted={inverted} />
+      </View>
+    </View>
+  );
+}

package/src/CarouselSkeleton.tsx

@@ -0,0 +1,50 @@
+import { View } from 'react-native';
+import { PxSkeleton } from './Skeleton';
+import React from 'react';
+import { useTheme } from '@proximus/lavender-styling-native';
+import { ISkeletonProps } from './types';
+
+export function PxCarouselSkeleton({
+  inverted,
+  itemsVisible = 1,
+  containerStyle,
+}: {
+  itemsVisible?: number;
+} & ISkeletonProps) {
+  const { theme } = useTheme();
+
+  const panelVariant = itemsVisible === 1 ? 'panel' : 'panelS';
+
+  return (
+    <View
+      style={[
+        containerStyle,
+        {
+          gap: theme.t('SpacingSMobile').number,
+          borderRadius: theme.t('RadiusMain').number,
+        },
+      ]}
+    >
+      <View
+        style={{
+          flexDirection: 'row',
+          gap: theme.t('SpacingSMobile').number,
+          overflow: 'hidden',
+        }}
+      >
+        <PxSkeleton inverted={inverted} variant={panelVariant} />
+        <PxSkeleton inverted={inverted} variant={panelVariant} />
+        <PxSkeleton inverted={inverted} variant={panelVariant} />
+      </View>
+
+      <View
+        style={{
+          justifyContent: 'center',
+          flexDirection: 'row',
+        }}
+      >
+        <PxSkeleton inverted={inverted} variant={'body'} />
+      </View>
+    </View>
+  );
+}

package/src/DataUsageSkeleton.tsx

@@ -0,0 +1,45 @@
+import { View } from 'react-native';
+import { PxSkeleton } from './Skeleton';
+import React from 'react';
+import { useTheme } from '@proximus/lavender-styling-native';
+import { PxStatusSkeleton } from './StatusSkeleton';
+import { ISkeletonProps } from './types';
+
+export function PxDataUsageSkeleton({
+  inverted,
+  containerStyle,
+}: ISkeletonProps) {
+  const { theme } = useTheme();
+
+  return (
+    <View
+      style={[
+        containerStyle,
+        {
+          gap: theme.t('SpacingDefaultMobile').number,
+          borderRadius: theme.t('RadiusMain').number,
+          padding: theme.t('PaddingSMobile').number,
+          backgroundColor: theme.t('ColorBackgroundSurfaceLight'),
+        },
+      ]}
+    >
+      <View
+        style={{
+          gap: theme.t('SpacingXsMobile').number,
+        }}
+      >
+        <PxSkeleton variant={'headingS'} inverted={inverted} />
+        <PxSkeleton variant={'body'} inverted={inverted} />
+      </View>
+      <View
+        style={{
+          gap: theme.t('SpacingXsMobile').number,
+        }}
+      >
+        <PxSkeleton variant={'headingS'} inverted={inverted} />
+        <PxSkeleton variant={'body'} inverted={inverted} expand />
+        <PxStatusSkeleton />
+      </View>
+    </View>
+  );
+}

package/src/MessageCardSkeleton.tsx

@@ -0,0 +1,43 @@
+import { View } from 'react-native';
+import { PxSkeleton } from './Skeleton';
+import React from 'react';
+import { useTheme } from '@proximus/lavender-styling-native';
+import { ISkeletonProps } from './types';
+
+export function PxMessageCardSkeleton({
+  inverted,
+  containerStyle,
+}: ISkeletonProps) {
+  const { theme } = useTheme();
+
+  return (
+    <View
+      style={[
+        containerStyle,
+        {
+          backgroundColor: theme.t('ColorBackgroundSurfaceLight'),
+          borderRadius: theme.t('RadiusMain').number,
+          padding: theme.t('PaddingSMobile').number,
+          gap: theme.t('SpacingSMobile').number,
+        },
+      ]}
+    >
+      <View
+        style={{
+          flexDirection: 'row',
+          gap: theme.t('SpacingSMobile').number,
+        }}
+      >
+        <PxSkeleton variant={'assetS'} inverted={inverted} />
+        <View style={{ flex: 1, gap: theme.t('SpacingSMobile').number }}>
+          <PxSkeleton variant={'headingS'} inverted={inverted} />
+          <PxSkeleton variant={'body'} inverted={inverted} />
+        </View>
+        <PxSkeleton variant={'actionS'} inverted={inverted} />
+      </View>
+      <View>
+        <PxSkeleton variant={'actionL'} inverted={inverted} />
+      </View>
+    </View>
+  );
+}

package/src/Skeleton.tsx

@@ -0,0 +1,187 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  Animated,
+  Easing,
+  LayoutChangeEvent,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { useTheme } from '@proximus/lavender-styling-native';
+
+const DURATION = 1500;
+const ANGLE = 18;
+
+export type SkeletonGradientProps = ViewProps & {
+  /** Predefined shape */
+  variant:
+    | 'headingS'
+    | 'headingM'
+    | 'headingL'
+    | 'body'
+    | 'bodyS'
+    | 'actionS'
+    | 'actionL'
+    | 'assetXS'
+    | 'assetS'
+    | 'assetL'
+    | 'panel'
+    | 'panelS';
+  width?: number | string;
+  containerStyle?: StyleProp<ViewStyle>;
+  expand?: boolean;
+  inverted?: boolean;
+};
+
+function useColors({ inverted }: { inverted: boolean }) {
+  const { theme } = useTheme();
+  const invertedSuffix = inverted ? 'Inverted' : 'Default';
+  const backgroundColor = theme.t(
+    `ColorBackgroundStateDisabled${invertedSuffix}`
+  );
+  const highlightColor = inverted ? 'rgba(0,0,0,1)' : 'rgba(255,255,255,1)';
+  const highlightColorWithOpacity = inverted
+    ? 'rgba(0,0,0,0.24)'
+    : 'rgba(255,255,250,.24)';
+  return { backgroundColor, highlightColor, highlightColorWithOpacity };
+}
+
+export function PxSkeleton(props: SkeletonGradientProps) {
+  const { inverted = false, containerStyle, variant, expand = false } = props;
+  const [layout, setLayout] = useState({ width: 0, height: 0 });
+  const translateX = useRef(new Animated.Value(0)).current;
+  const { theme } = useTheme();
+  const { backgroundColor, highlightColor, highlightColorWithOpacity } =
+    useColors({ inverted });
+  const loopRef = useRef<Animated.CompositeAnimation | null>(null);
+
+  useEffect(() => {
+    if (layout.width <= 0) return;
+
+    // Stop any previous loop before starting a new one
+    loopRef.current?.stop();
+
+    translateX.setValue(-layout.width * 1.5);
+
+    const loop = Animated.loop(
+      Animated.timing(translateX, {
+        toValue: layout.width,
+        easing: Easing.cubic,
+        duration: DURATION,
+        useNativeDriver: true,
+      })
+    );
+    loopRef.current = loop;
+    loop.start();
+    return () => {
+      loop.stop();
+      loopRef.current = null;
+    };
+  }, [translateX, layout]);
+
+  return (
+    <View
+      style={[
+        containerStyle,
+        {
+          backgroundColor,
+          borderRadius: ['actionS', 'actionL'].includes(variant)
+            ? theme.t('RadiusPill').number
+            : theme.t('RadiusMain').number,
+          overflow: 'hidden',
+        },
+        styles[props.variant],
+        { ...(expand ? { width: '100%', maxWidth: undefined } : undefined) },
+      ]}
+      onLayout={(e: LayoutChangeEvent) => {
+        const { width, height } = e.nativeEvent.layout;
+        setLayout({ width, height });
+      }}
+    >
+      <Animated.View
+        style={{
+          position: 'absolute',
+
+          top: -3 * layout.height, // ensure coverage when rotated
+          bottom: -3 * layout.height,
+          width: layout.width,
+          transform: [{ translateX }, { rotate: `${ANGLE}deg` }],
+        }}
+      >
+        {layout.width > 0 && ( // Render gradient only when layout is measured will crash otherwise
+          <LinearGradient
+            style={{ flex: 1 }}
+            pointerEvents="none"
+            colors={[
+              highlightColorWithOpacity,
+              highlightColor,
+              highlightColorWithOpacity,
+            ]}
+            locations={[0, 0.5, 1]}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 0 }}
+          />
+        )}
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  headingS: {
+    height: 24,
+    minWidth: 120,
+    maxWidth: 240,
+  },
+  headingM: {
+    height: 32,
+    minWidth: 120,
+    maxWidth: 240,
+  },
+  headingL: {
+    height: 40,
+    minWidth: 120,
+    maxWidth: 240,
+  },
+  body: {
+    height: 16,
+    maxWidth: 300,
+    minWidth: 120,
+  },
+  bodyS: {
+    height: 16,
+    maxWidth: 180,
+    minWidth: 120,
+  },
+  actionS: {
+    height: 40,
+    width: 40,
+  },
+  actionL: {
+    height: 48,
+    width: 160,
+  },
+  assetS: {
+    height: 40,
+    width: 40,
+  },
+  assetXS: {
+    height: 16,
+    width: 16,
+  },
+  assetL: {
+    height: 80,
+    width: 80,
+  },
+  panel: {
+    height: 200,
+    width: 300,
+  },
+  panelS: {
+    height: 133,
+    width: 144,
+  },
+});

package/src/StatusSkeleton.tsx

@@ -0,0 +1,21 @@
+import { View } from 'react-native';
+import { PxSkeleton } from './Skeleton';
+import React from 'react';
+import { useTheme } from '@proximus/lavender-styling-native';
+import { ISkeletonProps } from './types';
+
+export function PxStatusSkeleton({ inverted, containerStyle }: ISkeletonProps) {
+  const { theme } = useTheme();
+
+  return (
+    <View
+      style={[
+        containerStyle,
+        { flexDirection: 'row', gap: theme.t('Spacing2xsMobile').number },
+      ]}
+    >
+      <PxSkeleton variant={'assetXS'} inverted={inverted} />
+      <PxSkeleton variant={'body'} inverted={inverted} />
+    </View>
+  );
+}

package/src/TileSkeleton.tsx

@@ -0,0 +1,46 @@
+import { View } from 'react-native';
+import { PxSkeleton } from './Skeleton';
+import React from 'react';
+import { useTheme } from '@proximus/lavender-styling-native';
+import { ISkeletonProps } from './types';
+
+function PxTileSkeleton({ inverted }: ISkeletonProps) {
+  const { theme } = useTheme();
+
+  return (
+    <View
+      style={{
+        alignItems: 'center',
+        gap: theme.t('SpacingSMobile').number,
+        borderBottomEndRadius: theme.t('RadiusMain').number,
+        borderBottomStartRadius: theme.t('RadiusMain').number,
+        padding: theme.t('PaddingSMobile').number,
+        backgroundColor: theme.t('ColorBackgroundSurfaceLight'),
+      }}
+    >
+      <PxSkeleton variant={'assetS'} inverted={inverted} />
+      <PxSkeleton variant={'headingS'} inverted={inverted} />
+    </View>
+  );
+}
+
+export function PxTilesSkeleton({ inverted, containerStyle }: ISkeletonProps) {
+  const { theme } = useTheme();
+
+  return (
+    <View
+      style={[
+        containerStyle,
+        {
+          gap: theme.t('SpacingSMobile').number,
+          flexDirection: 'row',
+          overflow: 'hidden',
+        },
+      ]}
+    >
+      <PxTileSkeleton inverted={inverted} />
+      <PxTileSkeleton inverted={inverted} />
+      <PxTileSkeleton inverted={inverted} />
+    </View>
+  );
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from './Skeleton';
+export * from './CardSkeleton';
+export * from './MessageCardSkeleton';
+export * from './CarouselSkeleton';
+export * from './StatusSkeleton';
+export * from './TileSkeleton';
+export * from './DataUsageSkeleton';

package/src/types.ts

@@ -0,0 +1,6 @@
+import { StyleProp, ViewStyle } from 'react-native';
+
+export interface ISkeletonProps {
+  inverted?: boolean;
+  containerStyle?: StyleProp<ViewStyle>;
+}

package/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../../tsconfig.npm.json",
+  "compilerOptions": {
+    "outDir": "dist",
+  },
+  "include": ["src","../../../lib.d.ts"],
+  "exclude": ["dist", "node_modules", "src/**/*.test.ts", "src/**/*.spec.ts"]
+}