Example - Destination picker (openScreen)

This example shows a partner-friendly navigation pattern:

Configure a destination in App Studio (right rail) via manifest.json
Use that destination in your block with useActions().openScreen()

Code

import * as React from 'react';
import { Text } from '@tapcart/mobile-components';

export default function DestinationPickerOpenScreenExample({ blockConfig, useActions }) {
  const actions = useActions();

  const destination = blockConfig?.destination;

  const handlePress = () => {
    if (!destination || destination.type === 'none') return;

    actions.openScreen({
      destination,
    });
  };

  const containerStyles = {
    padding: '24px 16px',
    margin: '10px',
    backgroundColor: '#f2f2f2',
    textAlign: 'center',
    borderRadius: '12px',
  };

  const buttonStyles = {
    marginTop: '16px',
    padding: '12px 24px',
    backgroundColor: destination?.type === 'none' ? '#999' : '#007AFF',
    color: '#fff',
    border: 'none',
    borderRadius: '8px',
    fontSize: '16px',
    cursor: destination?.type === 'none' ? 'not-allowed' : 'pointer',
  };

  return (
    <div style={containerStyles}>
      <Text type={'h1'}>Destination Picker</Text>
      <Text>
        {destination?.type && destination.type !== 'none'
          ? `Selected: ${destination.type}`
          : 'Select a destination in the right rail'}
      </Text>
      <button style={buttonStyles} onClick={handlePress} disabled={!destination || destination.type === 'none'}>
        Open destination
      </button>
    </div>
  );
}

Manifest

[
  {
    "id": "destination",
    "label": "Destination",
    "type": "destination",
    "defaultValue": {
      "type": "none",
      "location": null
    }
  }
]

Mock Data (optional)

This example does not use useVariables, so mockData.json is not required.

Back to Examples