Example - Navigate with openScreen

This example shows a minimal block that navigates to another screen using Tapcart.action("screen/open", ...).

What this builds

A simple button that navigates to the Cart route:

Destination: { type: "route", id: "cart" }

Code

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

export default function OpenScreenNavigateExample({ useTapcart }) {
  const Tapcart = useTapcart();

  const handleOpenScreen = () => {
    Tapcart.action('screen/open', {
      destination: {
        type: 'route',
        id: 'cart',
      },
    });
  };

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

  const buttonStyles = {
    marginTop: '16px',
    padding: '12px 24px',
    backgroundColor: '#007AFF',
    color: '#fff',
    border: 'none',
    borderRadius: '8px',
    fontSize: '16px',
    cursor: 'pointer',
  };

  return (
    <div style={containerStyles}>
      <Text type={'h1'}>Navigate Example</Text>
      <button style={buttonStyles} onClick={handleOpenScreen}>
        Go to Cart
      </button>
    </div>
  );
}

Manifest

This example does not require any configuration.

[]

Notes

Tapcart.action('screen/open', ...) and useActions().openScreen(...) are equivalent ways to trigger the same navigation.
If you want to link to other destinations, update the destination object.
For a destination picker in App Studio, add a destination field to your manifest.json.

Mock Data (optional)

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

If you want to experiment with useVariables while you develop, you can add a mockData.json file next to code.jsx.

{
  "customer": {
    "firstName": "Taylor"
  }
}

Back to Examples