kovalee-rn-onboarding-kit

🎉 Welcome to OnboardingKit - Your solution to creating engaging and beautiful onboarding experiences for your apps with minimal effort! 🚀

We understand how crucial a first impression can be, and that’s why we’ve crafted OnboardingKit to help you make that initial user interaction as delightful and informative as possible. Forget about the tedious setup processes and dive straight into crafting a captivating onboarding journey for your users.

🖥 Platforms & Prerequisites

Before we get started, let’s make sure you’re all set to integrate OnboardingKit into your project. Here’s what you need:

• iOS 16.0 or later 🍏
• React Native 0.68.0 or later 🛠

Got everything? Great! Let’s move on.

📦 Installation

Integrating OnboardingKit into your iOS project is a breeze. Using npm or yarn, add OnboardingKit to your project:

yarn add onboardingkit-reactnative-wrapper

Or, if you prefer npm:

npm install onboardingkit-reactnative-wrapper

🛠 Usage

Creating an onboarding experience is now as easy as writing React components. Feed OnboardingKit a configuration object or a JSON file, and let it handle the rest.

import { KovaleeRNOnboardingKitView } from "kovalee-rn-onboarding-kit";

// ...

<KovaleeRNOnboardingKitView
    fileName="onboarding"
    onEventTrigger={(eventData) => {}}
    onOnboardingDismiss={(values) => {}}
/>

• fileName: This is where you provide the configuration for your onboarding UI, which you can generate using our handy web configurator. filenName is just the name of your json file, without the extension.
• onEventTrigger: A callback function that gets triggered on every user interaction within the onboarding view.
• onDismiss: A callback function that gets called when the onboarding journey is complete, providing you with the user’s selections.

🌟 Examples & Getting Started

To get you up and running in no time, here’s a straightforward example implementation:

import React, { useState } from 'react';

import { StyleSheet, View, Button, Modal, SafeAreaView } from 'react-native';
import { KovaleeRNOnboardingKitView } from 'kovalee-rn-onboarding-kit';

export default function App() {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View style={styles.container}>
      <Button title="Show Modal" onPress={() => setModalVisible(true)} />

      <Modal
        animationType="slide"
        transparent={false}
        visible={modalVisible}
        onRequestClose={() => {
          setModalVisible(false);
        }}>
        <SafeAreaView style={styles.safeArea}>
          <KovaleeRNOnboardingKitView
            fileName="onboarding"
            onEventTrigger={(eventData) => {
              const { name, properties } = eventData.nativeEvent;
              console.log(name, properties);
            }}
            onOnboardingDismiss={(values) => {
              const output = values.nativeEvent;
              console.log(output);
              setModalVisible(false);
            }}
            style={styles.box}
          />
        </SafeAreaView>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: '100%',
    height: '100%',
  },
  safeArea: {
    flex: 1,
  },
});

And voila! You’re all set to craft mesmerizing onboarding experiences that captivate and inform. Welcome to the world of seamless integration and delightful user journeys with OnboardingKit. Enjoy coding! 🎊