Puzzl React Native Onboarding Package

The Puzzl React Native onboarding package provides convenient mobile onboarding to Puzzl for workers directly from your React Native app.

Documentation

For more information about Puzzl's API, see our API Reference

Installation

Install the package with:

npm install puzzl-react-native-onboarding

Usage

After installing the package and importing the component to your project, you need to pass the following four props to the component: your Puzzl company ID, live API key, the employee ID of the worker that is being onboarded, and a callback function that determines what happens once the user finishes onboarding.

We recommend that you wrap the component in a Modal and use state to control when the modal opens/closes.

import ReactNativeOnboarding from 'puzzl-react-native-onboarding';
import { StyleSheet, Text, TouchableOpacity, View, Modal } from 'react-native';

export default function App() {
  const [showOnboarding, setOnboarding] = useState(false);

  return (
    <View style={styles.container}>
      <Text style={styles.instructions}>Register with Puzzl to get paid!</Text>

      <TouchableOpacity
        onPress={() => setOnboarding(true)}
        style={styles.button}
      >
        <Text style={styles.buttonText}>Onboard with Puzzl</Text>
      </TouchableOpacity>
      <Modal
        animationType={'slide'}
        visible={showOnboarding}
        onRequestClose={() => setOnboarding(false)}
        transparent
      >
        <ReactNativeOnboarding
          companyID='<COMPANY_ID>'
          APIKey='<API_KEY>'
          employeeID='<EMPLOYEE_ID>'
          showOnboarding={setOnboarding}
        />
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  logo: {
    width: 305,
    height: 159,
    marginBottom: 20,
    resizeMode: 'contain',
  },
  instructions: {
    color: '#888',
    fontSize: 18,
    marginHorizontal: 15,
    marginBottom: 10,
  },
  button: {
    marginTop: 70,
    backgroundColor: '#0E64DC',
    borderRadius: 5,
    paddingTop: 15,
    paddingBottom: 15,
    paddingRight: 45,
    paddingLeft: 45,
  },
  buttonText: {
    color: '#fff',
    fontSize: 22,
  },
});