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, type FlxUiFlowHandle } from '@flowx/react-native-sdk'
import { useEffect, useState } from 'react'

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

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

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

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

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

interface FlxUiFlowHandle {
  UiFlowView: ComponentType
  dispose(): void
}

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

import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
import { FlxProcessRenderer } from '@flowx/react-native-sdk';

// Define your custom loader components
const StartProcessLoader = () => (
  <View style={styles.scrim}>
    <View style={styles.card}>
      <ActivityIndicator size="large" color="#ffffff" />
      <Text style={styles.label}>Starting process...</Text>
    </View>
  </View>
);

const SpecificActionLoader = () => (
  <View style={styles.scrim}>
    <View style={styles.card}>
      <ActivityIndicator size="large" color="#ffffff" />
      <Text style={styles.label}>Executing specific action...</Text>
    </View>
  </View>
);

const styles = StyleSheet.create({
  // The SDK renders your loader full-screen with no scrim or card of its own,
  // so the loader paints its own dim scrim. Use absolute fill: the SDK centers
  // the node, so a flex child would collapse to its content size instead of
  // covering the screen.
  scrim: {
    ...StyleSheet.absoluteFillObject,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.25)',
  },
  card: {
    minHeight: 100,
    padding: 24,
    borderRadius: 32,
    alignItems: 'center',
    justifyContent: 'center',
    gap: 16,
    backgroundColor: '#1b1b3a',
  },
  label: {
    color: '#ffffff',
  },
});

// Register the custom loaders in your component
export function MyFlxContainer() {
  return (
    <FlxProcessRenderer
      {...otherProps}
      customLoader={{
        startProcess: <StartProcessLoader />,
        // reloadProcess: <ReloadProcessLoader />,
        // defaultAction: <DefaultActionLoader />,
        // defaultUpload: <DefaultUploadLoader />,
        actions: {
          action1: <SpecificActionLoader />,
          // action2: <SaveDataLoader />,
        },
      }}
    />
  );
}

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

FlowX.configure({
  // ...other configuration
  customLoader: {
    startProcess: <StartProcessLoader />,
    actions: {
      action1: <SpecificActionLoader />,
    },
  },
});

type FlxCustomLoader = {
  actions?: Record<string, ReactNode>
  startProcess?: ReactNode
  reloadProcess?: ReactNode
  defaultAction?: ReactNode
  defaultUpload?: ReactNode
}

import { getEnumeration, getTag, getMediaItemURL } from '@flowx/core-sdk';

function getEnumeration(name: string, parentName?: string): Promise<NomenclatorValue[]>

const countries = await getEnumeration('countries');
// [{ id: 'AT', value: 'AT', label: 'Austria', ... }, { id: 'RO', value: 'RO', label: 'Romania', ... }]

function getTag(tag: string): Promise<string | undefined>

const clearLabel = await getTag('@@sys_clear');
// The prefix is optional — this resolves the same tag:
const sameLabel = await getTag('sys_clear');

function getMediaItemURL(mediaItemId: string): Promise<string | undefined>

import { Image } from 'react-native';

const logoUrl = await getMediaItemURL('company_logo');

// e.g. render it:
{logoUrl && <Image source={{ uri: logoUrl }} style={styles.logo} />}

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

FlowX.configure({
  // ...other configuration
  cacheDocuments: false, // always re-download documents
});

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

FlowX.configure({
  // ...other configuration
  updateStateEnabled: false, // rely on SSE only, skip the foreground re-fetch
});

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

FlowX.configure({
  // ...other configuration
  customHeaders: {
    'x-correlation-id': sessionId,
    'x-api-key': gatewayKey,
  },
});

// Later — e.g. after the session rotates. Replaces the record above wholly:
FlowX.configure({
  customHeaders: {
    'x-correlation-id': newSessionId,
    'x-api-key': gatewayKey,
  },
});

type HttpRequestInterceptor = {
  onFulfilled?: (
    config: InternalAxiosRequestConfig
  ) => InternalAxiosRequestConfig | Promise<InternalAxiosRequestConfig>
  onRejected?: (error: any) => any
}

type HttpResponseInterceptor = {
  onFulfilled?: (response: AxiosResponse) => AxiosResponse | Promise<AxiosResponse>
  onRejected?: (error: any) => any
}

import {
  FlowX,
  type HttpRequestInterceptor,
  type HttpResponseInterceptor,
} from '@flowx/react-native-sdk';

const requestTagging: HttpRequestInterceptor = {
  onFulfilled: (config) => {
    config.headers['x-request-id'] = generateRequestId();
    return config;
  },
};

const errorReporting: HttpResponseInterceptor = {
  onRejected: (error) => {
    crashReporting.recordError(error);
    return Promise.reject(error);
  },
};

FlowX.configure({
  // ...other configuration
  requestInterceptors: [requestTagging],
  responseInterceptors: [errorReporting],
});

type AnalyticsData = {
  type: 'SCREEN' | 'ACTION'
  value: string                                 // the analytics expression from the action params
  screen?: string
  component?: string
  label?: string
  customPayload?: Record<string, unknown> | null // the parsed analyticsCustomPayload
}

import { FlowX, type AnalyticsData } from '@flowx/react-native-sdk';

const unsubscribe = FlowX.analyticsCollector((data: AnalyticsData) => {
  analytics.track(data.value, {
    screen: data.screen,
    component: data.component,
    label: data.label,
    ...data.customPayload,
  });
});

// Stop collecting, e.g. on logout:
unsubscribe();

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

FlowX.newProcessStarted = (processInstanceUuid) => {
  saveActiveProcessInstance(processInstanceUuid);
};

// Single listener: assigning replaces the previous one; clear it with undefined.
FlowX.newProcessStarted = undefined;

type FlxLogEvent = {
  timestamp: string // ISO 8601 with milliseconds, UTC
  category: 'rest' | 'sse' | 'expression' | 'cms'
  type: string      // e.g. 'request' | 'response' | 'error' for the rest category
  payload: Record<string, unknown>
}

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

// Pretty-print every SDK event to the console:
const unsubscribe = FlowX.logSink(formattedLogger);

// Or send only network traffic to your own telemetry:
FlowX.logSink((event) => telemetry.log(event), { categories: ['rest', 'sse'] });

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

import { SafeAreaView } from 'react-native-safe-area-context';

<SafeAreaView style={{ flex: 1 }} edges={['top', 'bottom']}>
  <FlxChatRenderer
    apiUrl={baseUrl}
    authToken={accessToken}
    staticAssetsPath={staticAssetsPath}
    language={language}
    locale={locale}
    themeId={themeId}
    organizationId={organizationId}
    projectId={projectId}
    workspaceId={workspaceId}
    source={source}
    chatConfig={chatConfig}
    cache={cache}
  />
</SafeAreaView>

{
  "expo": {
    "plugins": ["@flowx/react-native-ui-toolkit/app.plugin.js"]
  }
}