Lucra Flows

Lucra flows are full-screen or embedded UI experiences surfaced by the SDK.

Full-Screen Flows

Use LucraSDK.present to display a full-screen flow.

Available Flows

const Flows = {
  ONBOARDING: 'onboarding',
  VERIFY_IDENTITY: 'verifyIdentity',
  PROFILE: 'profile',
  ADD_FUNDS: 'addFunds',
  CREATE_GAMES_MATCHUP: 'createGamesMatchup',
  CREATE_SPORTS_MATCHUP: 'createSportsMatchup',
  WITHDRAW_FUNDS: 'withdrawFunds',
  PUBLIC_FEED: 'publicFeed',
  MY_MATCHUP: 'myMatchup',
  GAMES_CONTEST_DETAILS: 'gamesMatchupDetails',
  MATCHUP_DETAILS: 'matchupDetails',
  DEMOGRAPHIC_COLLECTION: 'demographicCollection',
} as const;

Presenting Flows

import { LucraSDK } from '@lucra-sports/lucra-react-native-sdk';

await LucraSDK.present({ name: LucraSDK.FLOW.ONBOARDING });
await LucraSDK.present({ name: LucraSDK.FLOW.VERIFY_IDENTITY });
await LucraSDK.present({ name: LucraSDK.FLOW.PROFILE });
await LucraSDK.present({ name: LucraSDK.FLOW.ADD_FUNDS });
await LucraSDK.present({ name: LucraSDK.FLOW.WITHDRAW_FUNDS });
await LucraSDK.present({ name: LucraSDK.FLOW.PUBLIC_FEED });
await LucraSDK.present({ name: LucraSDK.FLOW.MY_MATCHUP });
await LucraSDK.present({ name: LucraSDK.FLOW.DEMOGRAPHIC_COLLECTION });

Flows that require parameters:

await LucraSDK.present({
  name: LucraSDK.FLOW.CREATE_GAMES_MATCHUP,
  gameId: 'PING_PONG',
});

await LucraSDK.present({
  name: LucraSDK.FLOW.CREATE_SPORTS_MATCHUP,
});

await LucraSDK.present({
  name: LucraSDK.FLOW.GAMES_CONTEST_DETAILS,
  matchupId: 'MATCHUP_ID',
});

await LucraSDK.present({
  name: LucraSDK.FLOW.MATCHUP_DETAILS,
  matchupId: 'MATCHUP_ID',
});

Flow Descriptions and Parameters

• ONBOARDING: Starts the user onboarding flow.

• VERIFY_IDENTITY: Prompts the user to verify identity.

• PROFILE: Opens the Lucra profile view.

• ADD_FUNDS: Opens the add funds flow.

• WITHDRAW_FUNDS: Opens the withdraw funds flow.

• PUBLIC_FEED: Opens the sports public feed.

• MY_MATCHUP: Opens the user's matchup feed.

• DEMOGRAPHIC_COLLECTION: Prompts the user to complete demographics.

• CREATE_GAMES_MATCHUP: Create a games matchup. Optional params:

  • gameId (string): Your internal game identifier.

• CREATE_SPORTS_MATCHUP: Create a sports matchup.

• GAMES_CONTEST_DETAILS: Show a games matchup. Required params:

  • matchupId (string): Lucra matchup ID.

• MATCHUP_DETAILS: Show a generic matchup. Required params:

  • matchupId (string): Lucra matchup ID.

Dismissing Full-Screen Flows

Call LucraSDK.closeFullScreenLucraFlows() to programmatically dismiss any active Lucra full-screen UI:

setTimeout(() => {
  LucraSDK.closeFullScreenLucraFlows();
}, 10000);

Embedded Flows (Experimental)

Use LucraFlowView to embed a flow inside your React Native UI:

import { LucraFlowView, LucraSDK } from '@lucra-sports/lucra-react-native-sdk';

<LucraFlowView flow={LucraSDK.FLOW.PROFILE} className="flex-1" />

Android Note (react-native-screens)

On Android with react-native-screens, embedded Compose views may disappear. If you use embedded flows, remount them when the screen is focused:

import { useFocusEffect } from '@react-navigation/native';

const [flowKey, setFlowKey] = useState(Math.random().toString());

useFocusEffect(
  useCallback(() => {
    setFlowKey(Math.random().toString());
  }, [])
);

<LucraFlowView flow={LucraSDK.FLOW.PROFILE} key={flowKey} />