@blazejkustra/react-native-onboarding 0.1.1

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 Blazej Kustra
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,360 @@
+https://github.com/user-attachments/assets/bb51a0c3-15be-42b6-b20d-c33c29b84bc7
+
+<!-- ![Banner](assets/banner.png) -->
+
+# @blazejkustra/react-native-onboarding
+
+✨ **Beautiful, customizable onboarding/tutorial flows** for React Native — with smooth animations, flexible theming, and highly customizable components.
+
+## 🚀 Features
+
+* **Cross-platform** – Works seamlessly on iOS, Android, and Web
+* **Smooth animations** – React Native Reanimated for smooth transitions
+* **Works out of the box** – Just install and use with default styles
+* **Flexible theming and custom components** – Complete control over colors, fonts, and styling
+
+## Inspired by [Private Mind App](https://github.com/software-mansion-labs/private-mind)
+
+A private AI app that runs entirely offline on your device, with no data sent to the cloud and no internet connection required. Private Mind represents a new era of AI! Powerful, personal, and completely private.
+
+![Banner](assets/private-mind.png)
+
+
+## 📦 Installation
+
+```sh
+npm install @blazejkustra/react-native-onboarding
+```
+
+The library requires these dependencies for animations and safe area context:
+
+```sh
+npm install react-native-reanimated react-native-safe-area-context
+```
+
+Optionally for image support, install one of:
+```sh
+npm install expo-image
+```
+
+```sh 
+npm install react-native-svg
+```
+
+## 🛠 Basic usage
+
+You can use Onboarding component with default styles just by passing required props to the component:
+
+```tsx
+import Onboarding from '@blazejkustra/react-native-onboarding';
+
+function MyOnboarding() {
+  return (
+    <Onboarding
+      introPanel={{
+        title: 'Welcome to My App',
+        subtitle: 'Let\'s get you started',
+        button: 'Get Started',
+        image: require('./assets/logo.png'),
+      }}
+      steps={[
+        {
+          title: 'Step 1',
+          description: 'This is the first step of your journey',
+          buttonLabel: 'Next',
+          image: require('./assets/step1.png'),
+          position: 'top',
+        },
+        {
+          title: 'Step 2', 
+          description: 'Learn about our amazing features',
+          buttonLabel: 'Continue',
+          image: require('./assets/step2.png'),
+          position: 'bottom',
+        },
+      ]}
+      onComplete={() => {
+        await AsyncStorage.setItem(ONBOARDING_COMPLETED_KEY, 'true');
+        console.log('Onboarding completed!')
+      }}
+      onSkip={() => console.log('Onboarding skipped')}
+      onStepChange={(step) => console.log('Current step:', step)}
+    />
+  );
+}
+```
+
+### Custom Components
+
+Or you can create your own custom components for the intro panel, individual steps, background, close button, etc.
+
+```tsx
+function CustomIntro({ onPressStart }: { onPressStart: () => void }) {
+  return (
+    ... your custom intro panel ...
+  );
+}
+
+function CustomStep({ onNext, onBack, isLast }: { onNext: () => void, onBack: () => void, isLast: boolean }) {
+  return (
+    ... your custom step component ...
+  );
+}
+
+function CustomBackground() {
+  return (
+    ... your custom background component ...
+  );
+}
+
+function CustomCloseButton({ onPress }: { onPress: () => void }) {
+  return (
+    ... your custom close button component ...
+  );
+}
+
+<Onboarding
+  introPanel={CustomIntro}
+  background={CustomBackground}
+  skipButton={CustomCloseButton}
+  steps={[
+    {
+      component: CustomStep,
+      image: require('./assets/step1.png'),
+      position: 'top',
+    },
+    // ... more steps
+  ]}
+  // ... other props
+/>
+```
+
+## 📖 API
+
+To see all the props and their types, check the [types](src/spill-onboarding/types.ts) file. Also example usages are available in the [example](example/src/screens) catalog.
+
+### OnboardingProps
+
+#### `introPanel`
+**Type:** `OnboardingIntroPanel`  
+**Required** - The welcome screen that users see at the start of the onboarding
+
+The intro panel can be either:
+- **Default panel**: Pass an object with `title`, `subtitle`, `button`, `image`
+- **Custom component**: Pass a render function that receives `onPressStart` callback
+
+```tsx
+// Default intro panel
+introPanel={{
+  title: "Welcome to MyApp",
+  subtitle: "Let's get you started",
+  button: "Get Started",
+  image: require('./assets/welcome.png')
+}}
+
+// Custom intro panel
+introPanel={({ onPressStart }) => (
+  <CustomWelcomeScreen onStart={onPressStart} />
+)}
+```
+
+![Intro Panel](assets/intro-panel.png)
+
+#### `steps`
+**Type:** `OnboardingStep[]`  
+**Required** - Array of onboarding steps to display
+  
+![Step](assets/step.png)
+
+Each step can be either a default text-based step or a fully custom component:
+
+```tsx
+// Default step
+{
+  label: "Step 1",
+  title: "Connect Your Account",
+  description: "Link your account to get started",
+  buttonLabel: "Connect",
+  image: require('./assets/step1.png'),
+  position: 'top'
+}
+
+// Custom step component
+{
+  component: ({ onNext, onBack, isLast }) => (
+    <CustomStepComponent 
+      onNext={onNext} 
+      onBack={onBack} 
+      isLast={isLast} 
+      ... other props ...
+    />
+  ),
+  image: require('./assets/step2.png'),
+  position: 'bottom'
+}
+```
+
+
+#### `onComplete`
+**Type:** `() => void`  
+**Required** - Callback fired when user completes the final step, usually used to save the completion state to the local storage and navigate to the main app.
+
+```tsx
+onComplete={() => {
+  // Navigate to main app
+  navigation.navigate('Home');
+  // Or save completion state
+  AsyncStorage.setItem('onboarding_completed', 'true');
+}}
+```
+
+#### `onSkip`
+**Type:** `() => void`  
+**Optional** - Callback fired when user skips onboarding, usually used to track the skip event and navigate away from the onboarding.
+
+```tsx
+onSkip={() => {
+  // Track skip event
+  analytics.track('onboarding_skipped');
+  // Navigate away
+  navigation.goBack();
+}}
+```
+
+#### `onStepChange`
+**Type:** `(stepIndex: number) => void`  
+**Default:** `undefined` - Callback fired when the active step changes
+
+```tsx
+onStepChange={(stepIndex) => {
+  // Track progress
+  analytics.track('onboarding_step', { step: stepIndex });
+}}
+```
+
+#### `showCloseButton`
+**Type:** `boolean`  
+**Default:** `true` - Whether to show the close button in the header
+
+```tsx
+showCloseButton={false} // Hide close button
+```
+
+#### `showBackButton`
+**Type:** `boolean`  
+**Default:** `true` - Whether to show back button on steps (except first step)
+
+![Back Button](assets/back-button.png)
+
+```tsx
+showBackButton={false} // Disable back navigation
+```
+
+#### `wrapInModalOnWeb`
+**Type:** `boolean`  
+**Default:** `true` - Whether to wrap the onboarding in a modal on web
+
+![Modal](assets/modal.png)
+
+```tsx
+wrapInModalOnWeb={false} // Disable modal wrapping
+```
+
+#### `animationDuration`
+**Type:** `number`  
+**Default:** `500` - Animation duration in milliseconds for step transitions
+
+```tsx
+animationDuration={300} // Faster animations
+animationDuration={800} // Slower if app is for seniors 👴🏽👵🏼
+```
+
+#### `colors`
+**Type:** `OnboardingColors`  
+**Default:**
+
+```tsx
+colors={{
+  background: {
+    primary: '#FFFFFF',
+    secondary: '#F8F9FA',
+    label: '#E9ECEF',
+    accent: '#007AFF'
+  },
+  text: {
+    primary: '#1C1C1E',
+    secondary: '#8E8E93',
+    contrast: '#FFFFFF'
+  }
+}}
+```
+
+#### `fonts`
+**Type:** `OnboardingFonts | string`  
+**Default:** `'System'` - Custom font configuration
+
+```tsx
+// Single font for all text
+fonts="Inter"
+
+// Detailed font configuration
+fonts={{
+  introTitle: 'Inter-Bold',
+  introSubtitle: 'Inter-Medium',
+  stepTitle: 'Inter-SemiBold',
+  stepDescription: 'Inter-Regular',
+  primaryButton: 'Inter-Medium'
+}}
+```
+
+#### `background`
+**Type:** `() => ReactNode`  
+**Default:** `undefined` - Custom background element rendered behind content
+
+```tsx
+background={() => (
+  <Image 
+    source={require('./assets/background.png')} 
+    style={StyleSheet.absoluteFillObject}
+  />
+)}
+```
+
+#### `skipButton`
+**Type:** `({ onPress }: { onPress: () => void }) => ReactNode`  
+**Default:** X icon - Custom close button renderer
+
+![Skip Button](assets/skip-button.png)
+
+```tsx
+skipButton={({ onPress }) => (
+  <TouchableOpacity onPress={onPress}>
+    <Text style={styles.customClose}>✕</Text>
+  </TouchableOpacity>
+)}
+```
+
+
+## 💡 Best Practices
+
+### Image Consistency
+Use images with the same dimensions for the best visual effect. This prevents layout shifts and creates smooth transitions between steps.
+
+### Persistent Storage
+Save onboarding completion state to persistent storage (MMKV, AsyncStorage) to prevent users from seeing the onboarding again after completion.
+
+### Navigation
+On completion, navigate users to the main app to provide a smooth transition from onboarding to the core experience.
+
+
+## 🤝 Contributing
+
+We welcome contributions! See [CONTRIBUTING.md](CONTRIBUTING.md) for development workflow and [CODE_OF_CONDUCT.md](CODE_OF_CONDUCT.md) for our code of conduct.
+
+## 📄 License
+
+MIT © [Blazej Kustra](https://github.com/blazejkustra)
+
+---
+
+Built with [create-react-native-library](https://github.com/callstack/react-native-builder-bob) 🛠

package/lib/module/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+import ThemeProvider from "./utils/ThemeContext.js";
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import SpillOnboarding from "./spill-onboarding/index.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function Onboarding({
+  colors,
+  fonts,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(SafeAreaProvider, {
+    children: /*#__PURE__*/_jsx(ThemeProvider, {
+      colors: colors,
+      fonts: fonts,
+      children: /*#__PURE__*/_jsx(SpillOnboarding, {
+        ...props
+      })
+    })
+  });
+}
+export default Onboarding;
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ThemeProvider","SafeAreaProvider","SpillOnboarding","jsx","_jsx","Onboarding","colors","fonts","props","children"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,OAAOA,aAAa,MAAM,yBAAsB;AAChD,SAASC,gBAAgB,QAAQ,gCAAgC;AAQjE,OAAOC,eAAe,MAAM,6BAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEjD,SAASC,UAAUA,CAAC;EAAEC,MAAM;EAAEC,KAAK;EAAE,GAAGC;AAAuB,CAAC,EAAE;EAChE,oBACEJ,IAAA,CAACH,gBAAgB;IAAAQ,QAAA,eACfL,IAAA,CAACJ,aAAa;MAACM,MAAM,EAAEA,MAAO;MAACC,KAAK,EAAEA,KAAM;MAAAE,QAAA,eAC1CL,IAAA,CAACF,eAAe;QAAA,GAAKM;MAAK,CAAG;IAAC,CACjB;EAAC,CACA,CAAC;AAEvB;AAEA,eAAeH,UAAU","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/module/spill-onboarding/adapters/expo-image.js

@@ -0,0 +1,13 @@
+"use strict";
+
+let ExpoImage = null;
+try {
+  const {
+    Image
+  } = require('expo-image');
+  ExpoImage = Image;
+} catch {
+  // expo-image not available
+}
+export { ExpoImage };
+//# sourceMappingURL=expo-image.js.map

package/lib/module/spill-onboarding/adapters/expo-image.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ExpoImage","Image","require"],"sourceRoot":"../../../../src","sources":["spill-onboarding/adapters/expo-image.ts"],"mappings":";;AAEA,IAAIA,SAAsC,GAAG,IAAI;AAEjD,IAAI;EACF,MAAM;IAAEC;EAAM,CAAC,GAAGC,OAAO,CAAC,YAAY,CAAC;EACvCF,SAAS,GAAGC,KAAK;AACnB,CAAC,CAAC,MAAM;EACN;AAAA;AAGF,SAASD,SAAS","ignoreList":[]}

package/lib/module/spill-onboarding/adapters/react-native-svg.js

@@ -0,0 +1,16 @@
+"use strict";
+
+let ReactNativeSVG = null;
+let ReactNativeSVGPath = null;
+try {
+  const {
+    Svg,
+    Path
+  } = require('react-native-svg');
+  ReactNativeSVG = Svg;
+  ReactNativeSVGPath = Path;
+} catch {
+  // react-native-svg not available
+}
+export { ReactNativeSVG, ReactNativeSVGPath };
+//# sourceMappingURL=react-native-svg.js.map

package/lib/module/spill-onboarding/adapters/react-native-svg.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ReactNativeSVG","ReactNativeSVGPath","Svg","Path","require"],"sourceRoot":"../../../../src","sources":["spill-onboarding/adapters/react-native-svg.ts"],"mappings":";;AAKA,IAAIA,cAAuC,GAAG,IAAI;AAClD,IAAIC,kBAA+C,GAAG,IAAI;AAE1D,IAAI;EACF,MAAM;IAAEC,GAAG;IAAEC;EAAK,CAAC,GAAGC,OAAO,CAAC,kBAAkB,CAAC;EACjDJ,cAAc,GAAGE,GAAG;EACpBD,kBAAkB,GAAGE,IAAI;AAC3B,CAAC,CAAC,MAAM;EACN;AAAA;AAGF,SAASH,cAAc,EAAEC,kBAAkB","ignoreList":[]}

package/lib/module/spill-onboarding/buttons/PrimaryButton.js

@@ -0,0 +1,50 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { TouchableOpacity, Text, StyleSheet } from 'react-native';
+import { useTheme } from "../../utils/ThemeContext.js";
+import { fontSizes } from "../../utils/fontStyles.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const PrimaryButton = ({
+  text,
+  onPress,
+  icon,
+  disabled = false,
+  style,
+  textStyle
+}) => {
+  const {
+    theme
+  } = useTheme();
+  const styles = useMemo(() => createStyles(theme, disabled), [theme, disabled]);
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    onPress: onPress,
+    disabled: disabled,
+    style: [styles.button, style],
+    children: [icon, /*#__PURE__*/_jsx(Text, {
+      style: [styles.text, textStyle],
+      children: text
+    })]
+  });
+};
+export default PrimaryButton;
+const createStyles = (theme, disabled) => StyleSheet.create({
+  button: {
+    height: 48,
+    width: '100%',
+    borderRadius: 12,
+    paddingHorizontal: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: theme.bg.primary,
+    opacity: disabled ? 0.4 : 1,
+    flexDirection: 'row',
+    gap: 2
+  },
+  text: {
+    fontFamily: theme.fonts.primaryButton,
+    fontSize: fontSizes.md,
+    color: theme.text.contrast
+  }
+});
+//# sourceMappingURL=PrimaryButton.js.map

package/lib/module/spill-onboarding/buttons/PrimaryButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","TouchableOpacity","Text","StyleSheet","useTheme","fontSizes","jsx","_jsx","jsxs","_jsxs","PrimaryButton","text","onPress","icon","disabled","style","textStyle","theme","styles","createStyles","button","children","create","height","width","borderRadius","paddingHorizontal","justifyContent","alignItems","backgroundColor","bg","primary","opacity","flexDirection","gap","fontFamily","fonts","primaryButton","fontSize","md","color","contrast"],"sourceRoot":"../../../../src","sources":["spill-onboarding/buttons/PrimaryButton.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SACEC,gBAAgB,EAChBC,IAAI,EACJC,UAAU,QAIL,cAAc;AACrB,SAASC,QAAQ,QAAQ,6BAA0B;AACnD,SAASC,SAAS,QAAQ,2BAAwB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAYnD,MAAMC,aAAa,GAAGA,CAAC;EACrBC,IAAI;EACJC,OAAO;EACPC,IAAI;EACJC,QAAQ,GAAG,KAAK;EAChBC,KAAK;EACLC;AACK,CAAC,KAAK;EACX,MAAM;IAAEC;EAAM,CAAC,GAAGb,QAAQ,CAAC,CAAC;EAC5B,MAAMc,MAAM,GAAGlB,OAAO,CACpB,MAAMmB,YAAY,CAACF,KAAK,EAAEH,QAAQ,CAAC,EACnC,CAACG,KAAK,EAAEH,QAAQ,CAClB,CAAC;EAED,oBACEL,KAAA,CAACR,gBAAgB;IACfW,OAAO,EAAEA,OAAQ;IACjBE,QAAQ,EAAEA,QAAS;IACnBC,KAAK,EAAE,CAACG,MAAM,CAACE,MAAM,EAAEL,KAAK,CAAE;IAAAM,QAAA,GAE7BR,IAAI,eACLN,IAAA,CAACL,IAAI;MAACa,KAAK,EAAE,CAACG,MAAM,CAACP,IAAI,EAAEK,SAAS,CAAE;MAAAK,QAAA,EAAEV;IAAI,CAAO,CAAC;EAAA,CACpC,CAAC;AAEvB,CAAC;AAED,eAAeD,aAAa;AAE5B,MAAMS,YAAY,GAAGA,CAACF,KAAY,EAAEH,QAAiB,KACnDX,UAAU,CAACmB,MAAM,CAAC;EAChBF,MAAM,EAAE;IACNG,MAAM,EAAE,EAAE;IACVC,KAAK,EAAE,MAAM;IACbC,YAAY,EAAE,EAAE;IAChBC,iBAAiB,EAAE,EAAE;IACrBC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE,QAAQ;IACpBC,eAAe,EAAEZ,KAAK,CAACa,EAAE,CAACC,OAAO;IACjCC,OAAO,EAAElB,QAAQ,GAAG,GAAG,GAAG,CAAC;IAC3BmB,aAAa,EAAE,KAAK;IACpBC,GAAG,EAAE;EACP,CAAC;EACDvB,IAAI,EAAE;IACJwB,UAAU,EAAElB,KAAK,CAACmB,KAAK,CAACC,aAAa;IACrCC,QAAQ,EAAEjC,SAAS,CAACkC,EAAE;IACtBC,KAAK,EAAEvB,KAAK,CAACN,IAAI,CAAC8B;EACpB;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/spill-onboarding/buttons/SecondaryButton.js

@@ -0,0 +1,51 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { TouchableOpacity, Text, StyleSheet } from 'react-native';
+import { useTheme } from "../../utils/ThemeContext.js";
+import { fontSizes } from "../../utils/fontStyles.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const SecondaryButton = ({
+  text,
+  onPress,
+  icon,
+  disabled = false,
+  style,
+  textStyle
+}) => {
+  const {
+    theme
+  } = useTheme();
+  const styles = useMemo(() => createStyles(theme, disabled), [theme, disabled]);
+  return /*#__PURE__*/_jsxs(TouchableOpacity, {
+    onPress: onPress,
+    disabled: disabled,
+    style: [styles.button, style],
+    children: [icon, !!text && /*#__PURE__*/_jsx(Text, {
+      style: [styles.text, textStyle],
+      children: text
+    })]
+  });
+};
+export default SecondaryButton;
+const createStyles = (theme, disabled) => StyleSheet.create({
+  button: {
+    height: 48,
+    paddingHorizontal: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderRadius: 12,
+    borderColor: theme.bg.accent,
+    opacity: disabled ? 0.4 : 1,
+    flexDirection: 'row',
+    gap: 2
+  },
+  text: {
+    fontFamily: theme.fonts.secondaryButton,
+    fontSize: fontSizes.sm,
+    color: theme.text.primary,
+    lineHeight: 20
+  }
+});
+//# sourceMappingURL=SecondaryButton.js.map

package/lib/module/spill-onboarding/buttons/SecondaryButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","TouchableOpacity","Text","StyleSheet","useTheme","fontSizes","jsx","_jsx","jsxs","_jsxs","SecondaryButton","text","onPress","icon","disabled","style","textStyle","theme","styles","createStyles","button","children","create","height","paddingHorizontal","alignItems","justifyContent","borderWidth","borderRadius","borderColor","bg","accent","opacity","flexDirection","gap","fontFamily","fonts","secondaryButton","fontSize","sm","color","primary","lineHeight"],"sourceRoot":"../../../../src","sources":["spill-onboarding/buttons/SecondaryButton.tsx"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SACEC,gBAAgB,EAChBC,IAAI,EACJC,UAAU,QAIL,cAAc;AACrB,SAASC,QAAQ,QAAQ,6BAA0B;AACnD,SAASC,SAAS,QAAQ,2BAAwB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAYnD,MAAMC,eAAe,GAAGA,CAAC;EACvBC,IAAI;EACJC,OAAO;EACPC,IAAI;EACJC,QAAQ,GAAG,KAAK;EAChBC,KAAK;EACLC;AACK,CAAC,KAAK;EACX,MAAM;IAAEC;EAAM,CAAC,GAAGb,QAAQ,CAAC,CAAC;EAC5B,MAAMc,MAAM,GAAGlB,OAAO,CACpB,MAAMmB,YAAY,CAACF,KAAK,EAAEH,QAAQ,CAAC,EACnC,CAACG,KAAK,EAAEH,QAAQ,CAClB,CAAC;EAED,oBACEL,KAAA,CAACR,gBAAgB;IACfW,OAAO,EAAEA,OAAQ;IACjBE,QAAQ,EAAEA,QAAS;IACnBC,KAAK,EAAE,CAACG,MAAM,CAACE,MAAM,EAAEL,KAAK,CAAE;IAAAM,QAAA,GAE7BR,IAAI,EACJ,CAAC,CAACF,IAAI,iBAAIJ,IAAA,CAACL,IAAI;MAACa,KAAK,EAAE,CAACG,MAAM,CAACP,IAAI,EAAEK,SAAS,CAAE;MAAAK,QAAA,EAAEV;IAAI,CAAO,CAAC;EAAA,CAC/C,CAAC;AAEvB,CAAC;AAED,eAAeD,eAAe;AAE9B,MAAMS,YAAY,GAAGA,CAACF,KAAY,EAAEH,QAAiB,KACnDX,UAAU,CAACmB,MAAM,CAAC;EAChBF,MAAM,EAAE;IACNG,MAAM,EAAE,EAAE;IACVC,iBAAiB,EAAE,EAAE;IACrBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxBC,WAAW,EAAE,CAAC;IACdC,YAAY,EAAE,EAAE;IAChBC,WAAW,EAAEZ,KAAK,CAACa,EAAE,CAACC,MAAM;IAC5BC,OAAO,EAAElB,QAAQ,GAAG,GAAG,GAAG,CAAC;IAC3BmB,aAAa,EAAE,KAAK;IACpBC,GAAG,EAAE;EACP,CAAC;EACDvB,IAAI,EAAE;IACJwB,UAAU,EAAElB,KAAK,CAACmB,KAAK,CAACC,eAAe;IACvCC,QAAQ,EAAEjC,SAAS,CAACkC,EAAE;IACtBC,KAAK,EAAEvB,KAAK,CAACN,IAAI,CAAC8B,OAAO;IACzBC,UAAU,EAAE;EACd;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/module/spill-onboarding/buttons/SkipButton.js

@@ -0,0 +1,35 @@
+"use strict";
+
+import { useMemo } from 'react';
+import { StyleSheet, TouchableOpacity } from 'react-native';
+import { useTheme } from "../../utils/ThemeContext.js";
+import CloseIcon from "../icons/CloseIcon.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+function SkipButton({
+  onPress
+}) {
+  const {
+    theme
+  } = useTheme();
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  return /*#__PURE__*/_jsx(TouchableOpacity, {
+    style: styles.wrapper,
+    onPress: onPress,
+    children: /*#__PURE__*/_jsx(CloseIcon, {
+      color: theme.text.primary,
+      size: 24
+    })
+  });
+}
+export default SkipButton;
+const createStyles = theme => StyleSheet.create({
+  wrapper: {
+    backgroundColor: theme.bg.secondary,
+    width: 32,
+    height: 32,
+    borderRadius: 6,
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+});
+//# sourceMappingURL=SkipButton.js.map

package/lib/module/spill-onboarding/buttons/SkipButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","StyleSheet","TouchableOpacity","useTheme","CloseIcon","jsx","_jsx","SkipButton","onPress","theme","styles","createStyles","style","wrapper","children","color","text","primary","size","create","backgroundColor","bg","secondary","width","height","borderRadius","justifyContent","alignItems"],"sourceRoot":"../../../../src","sources":["spill-onboarding/buttons/SkipButton.tsx"],"mappings":";;AAAA,SAASA,OAAO,QAAQ,OAAO;AAC/B,SAASC,UAAU,EAAEC,gBAAgB,QAAQ,cAAc;AAC3D,SAASC,QAAQ,QAAQ,6BAA0B;AAEnD,OAAOC,SAAS,MAAM,uBAAoB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAM3C,SAASC,UAAUA,CAAC;EAAEC;AAAe,CAAC,EAAE;EACtC,MAAM;IAAEC;EAAM,CAAC,GAAGN,QAAQ,CAAC,CAAC;EAC5B,MAAMO,MAAM,GAAGV,OAAO,CAAC,MAAMW,YAAY,CAACF,KAAK,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAE1D,oBACEH,IAAA,CAACJ,gBAAgB;IAACU,KAAK,EAAEF,MAAM,CAACG,OAAQ;IAACL,OAAO,EAAEA,OAAQ;IAAAM,QAAA,eACxDR,IAAA,CAACF,SAAS;MAACW,KAAK,EAAEN,KAAK,CAACO,IAAI,CAACC,OAAQ;MAACC,IAAI,EAAE;IAAG,CAAE;EAAC,CAClC,CAAC;AAEvB;AAEA,eAAeX,UAAU;AAEzB,MAAMI,YAAY,GAAIF,KAAY,IAChCR,UAAU,CAACkB,MAAM,CAAC;EAChBN,OAAO,EAAE;IACPO,eAAe,EAAEX,KAAK,CAACY,EAAE,CAACC,SAAS;IACnCC,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVC,YAAY,EAAE,CAAC;IACfC,cAAc,EAAE,QAAQ;IACxBC,UAAU,EAAE;EACd;AACF,CAAC,CAAC","ignoreList":[]}