React Native SDK

import { SafeAreaProvider } from 'react-native-safe-area-context'
import { KeyboardProvider } from 'react-native-keyboard-controller'

export default function App() {
  return (
    <SafeAreaProvider>
      <KeyboardProvider>
        {/* FlowX process view goes here */}
      </KeyboardProvider>
    </SafeAreaProvider>
  )
}

import { FlowX } from '@flowx/react-native-sdk'

FlowX.setAccessToken(accessToken)

import { FlowX } from '@flowx/react-native-sdk'

FlowX.configure({
  baseURL: 'https://yourDomain.dev',
  processApiPath: 'onboarding',
  organizationId: '10000001-0001-0001-8001-100000000001',
  language: 'en',
  locale: 'en-US',
  staticAssetsPath: 'https://yourDomain.dev/static',
  isDraft: false,
})

import { FlowX, type FlxProcessHandle } from '@flowx/react-native-sdk'
import { useEffect, useState } from 'react'

export function OnboardingScreen() {
  const [handle, setHandle] = useState<FlxProcessHandle | null>(null)

  useEffect(() => {
    let active = true
    let pending: FlxProcessHandle | null = null

    FlowX.startProcess({
      workspaceId: '8f52744-8403-4e8d-...',
      projectId: '111111-222222-333333-44444',
      processName: 'client_identification',
      params: { firstName: 'John', lastName: 'Smith' },
    }).then((h) => {
      if (!active) {
        h.dispose()
        return
      }
      pending = h
      setHandle(h)
    })

    return () => {
      active = false
      pending?.dispose()
    }
  }, [])

  if (!handle) return null
  const { ProcessView } = handle
  return <ProcessView />
}

interface FlxProcessHandle {
  ProcessView: ComponentType
  dispose(): void
}

import { FlowX, type FlxProcessHandle } from '@flowx/react-native-sdk'
import { useEffect, useState } from 'react'

export function ResumeScreen({ processInstanceUuid }: { processInstanceUuid: string }) {
  const [handle, setHandle] = useState<FlxProcessHandle | null>(null)

  useEffect(() => {
    let active = true
    let pending: FlxProcessHandle | null = null

    FlowX.continueProcess({
      processInstanceUuid,
    }).then((h) => {
      if (!active) {
        h.dispose()
        return
      }
      pending = h
      setHandle(h)
    })

    return () => {
      active = false
      pending?.dispose()
    }
  }, [processInstanceUuid])

  if (!handle) return null
  const { ProcessView } = handle
  return <ProcessView />
}

import { FlowX } from '@flowx/react-native-sdk'
import { customComponents } from './customComponents'

FlowX.configure({
  baseURL: 'https://yourDomain.dev',
  processApiPath: 'onboarding',
  organizationId: '10000001-0001-0001-8001-100000000001',
  components: customComponents,
})

type FlxCustomComponentProps = {
  input: FlxCustomComponentData
  registerValidation: (fn: () => boolean | Promise<boolean>) => void
  saveData: (fn: () => Record<string, unknown>) => void
  isSubmitted: boolean
}

interface FlxCustomComponentData {
  data: Record<string, any>                                        // process data mapped via inputKeys
  actions: ProcessAction[]                                         // metadata for each bound action
  actionsFn: Record<string, (params?: Record<string, unknown> | FormData) => Promise<void>>  // trigger a process action; resolves when it completes
}

import { ComponentType } from 'react'
import { View } from 'react-native'
import { type FlxCustomComponentProps } from '@flowx/react-native-sdk'
import { FlxButton, FlxText } from '@flowx/react-native-ui-toolkit'

const ClientDetailsForm = ({ input }: FlxCustomComponentProps) => (
  <View>
    <FlxText variant="p2">First name: {input?.data?.firstName}</FlxText>
    <FlxButton onPress={() => input?.actionsFn?.submitClientDetails?.({ firstName: 'Jane' })}>
      Save
    </FlxButton>
  </View>
)

export const customComponents: Record<string, ComponentType<FlxCustomComponentProps>> = {
  ClientDetailsForm,
}

type ValidatorFn = (...params: string[]) => (value: unknown) => boolean | Promise<boolean>

import { FlowX } from '@flowx/react-native-sdk'

const validators = {
  // No params: the field must equal a fixed value.
  mustBe45: () => (value) => value === '4.5',

  // Params come from the validator config in the Designer.
  minLength: (min: string) => (value) => String(value ?? '').length >= Number(min),
}

FlowX.configure({
  baseURL: 'https://yourDomain.dev',
  processApiPath: 'onboarding',
  organizationId: '10000001-0001-0001-8001-100000000001',
  validators,
})

import { useEffect, useState } from 'react'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { KeyboardProvider } from 'react-native-keyboard-controller'
import { FlowX, type FlxProcessHandle } from '@flowx/react-native-sdk'

FlowX.configure({
  baseURL: 'https://yourDomain.dev',
  processApiPath: 'onboarding',
  organizationId: '10000001-0001-0001-8001-100000000001',
  language: 'en',
  locale: 'en-US',
  staticAssetsPath: 'https://yourDomain.dev/static',
  validators: {
    mustBe45: () => (value) => value === '4.5',
    minLength: (min: string) => (value) => String(value ?? '').length >= Number(min),
  },
})

function OnboardingScreen({ authToken }: { authToken: string }) {
  const [handle, setHandle] = useState<FlxProcessHandle | null>(null)

  useEffect(() => {
    FlowX.setAccessToken(authToken)

    let active = true
    let pending: FlxProcessHandle | null = null

    FlowX.startProcess({
      workspaceId: '8f52744-8403-4e8d-...',
      projectId: '111111-222222-333333-44444',
      processName: 'client_identification',
      params: { firstName: 'John' },
    }).then((h) => {
      if (!active) {
        h.dispose()
        return
      }
      pending = h
      setHandle(h)
    })

    return () => {
      active = false
      pending?.dispose()
    }
  }, [authToken])

  if (!handle) return null
  const { ProcessView } = handle
  return <ProcessView />
}

export default function App({ authToken }: { authToken: string }) {
  return (
    <SafeAreaProvider>
      <KeyboardProvider>
        <OnboardingScreen authToken={authToken} />
      </KeyboardProvider>
    </SafeAreaProvider>
  )
}