Package Exports

puzzl-react-native-onboarding

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (puzzl-react-native-onboarding) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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,
  },
});