Native Components - Boxo Documentation

Native components are UI components that are natively developed on the iOS and Android that can be used in combination with web UI components with the help of events from the JS SDK. List of native components and native features that are available to your miniapp:

`AppBoxoWebAppSetNavigationBar`

Activates native navigation bar.

Example:

appboxo.send('AppBoxoWebAppSetNavigationBar', {
  title: 'Light nav bar',     // Navigation bar title
  backButton: true,           // Controls back button visibility
  background: '#ffffff',      // Navigation bar background color
  frontColor: '#000000',      // Navigation bar and status bar accent color
  show: true                  // Controls navigation bar visibility,
  isBackgroundTransparent: true,        // When set to true, will make background transparent
  frontColorWhenTransparent: '#ffffff', // Navigation bar and status bar accent color when navigation has transparent background
  changeBackgroundOnScroll: true        // Will smoothly change backgroound from transparent to `background` color on scroll
})

Sending event with only required changes will preserve initial options:

appboxo.send('AppBoxoWebAppSetNavigationBar', {
  title: 'Changed some time later'
})

Tab bar

`AppBoxoWebAppSetTabBar`

Initialized native tab bar component

Parameters

show required boolean Defines TabBar visibility
activeTab required number Active TabBar item id
list required Array<{ tabId: number, tabName: string, tabIcon: string }> Define tabs
options required { color: string, background: string, selectedColor: string, hasBorder: boolean, borderColor: string } Tab bar options
badges optional Array<{ tabId: number, background: string, color: string, value?: string }> Define tab item badges.

Example:

appboxo.send('AppBoxoWebAppSetTabBar', {
  show: true,
  activeTab: 1,
  list: [
    {
      tabId: 1,
      tabName: 'Home',
      tabIcon: ICON_URL
    },
    {
      tabId: 2,
      tabName: 'About',
      tabIcon: ICON_URL
    },
    {
      tabId: 3,
      tabName: 'Services',
      tabIcon: ICON_URL
    }
  ],
  badges: [
    {
      tabId: 1,
      background: '#ff0000',
      color: '#ffffff',
      value: '4'
    },
    {
      tabId: 3,
      background: '#ff0000',
      color: '#ffffff',
      value: '1'
    }
  ],
  options: {
    color: '#aaaaaa',
    background: '#ffffff',
    selectedColor: '#2eb8da',
    hasBorder: true,
    borderColor: '#dddddd'
  }
})

Sending event with only required changes will preserve initial options:

appboxo.send('AppBoxoWebAppSetTabBar', {
  activeTab: 2
})

appboxo.send('AppBoxoWebAppSetTabBar', {
  options: {
    color: '#ffffff',
    background: '#000000',
    selectedColor: '#2eb8da',
    hasBorder: false
  }
})

`AppBoxoWebAppTabBarItemClick`

Event that should be subscribed to in order to get active tab item click Example:

appboxo.subscribe((event) => {
  if (!event.detail) {
    return
  }

  const { type, data } = event.detail

  if (type === 'AppBoxoWebAppTabBarItemClick') {
    if (data.tabId) {
      // Active tab id received
    }
  }
})

QR code reader

`AppBoxoWebAppOpenQRCodeReader`

Opens native QR code reader.

This method will prompt a permission request for camera. Example:

appboxo.send('AppBoxoWebAppOpenQRCodeReader');

Results from QR code reader are received by events: AppBoxoWebAppOpenQRCodeReaderResult or AppBoxoWebAppOpenQRCodeReaderFailed Example:

// Subscribe to events to receive data
appboxo.subscribe(event => {
  if (!event.detail) {
    return;
  }

  const { type, data } = event.detail;

  if (type === 'AppBoxoWebAppOpenQRCodeReaderResult') {
    // Reading result of the QR Code Reader
    console.log(data.code_data);
  }

  if (type === 'AppBoxoWebAppOpenQRCodeReaderFailed') {
    // Catching the error
    console.log(data.error_type, data.error_data);
  }
});

Action sheet

`AppBoxoWebAppShowActionSheet`

Shows native action sheet

Parameters

header optional string Action sheet header text
list required Array<{ id: number, text: string, role?: 'cancel' | 'destructive' | 'selected' }> Define action sheet items

Example:

appboxo.send('AppBoxoWebAppShowActionSheet', {
  header: 'Albums',
  list: [
    {
      id: 1,
      text: 'Delete',
      role:'destructive'
    },
    {
      id: 2,
      text: 'Selected',
      role:'selected'
    },
    {
      id: 3,
      text: 'Share',
    },
    {
      id: 4,
      text: 'Play',
    },
    {
      id: 5,
      text: 'Cancel',
      role: 'cancel'
    }
  ]
})

`AppBoxoWebAppActionSheetItemClick`

Event that should be subscribed to in order to get action sheet item click Example:

appboxo.subscribe((event) => {
  if (!event.detail) {
    return
  }

  const { type, data } = event.detail

  if (type === 'AppBoxoWebAppActionSheetItemClick') {
    if (data.id) {
      // Action sheet item id received
    }
  }
})

Action buttons

`AppBoxoWebAppSetActionButton`

Changes the params of action button

Example:

appboxo.send('AppBoxoWebAppSetActionButton', {
  isLight: true, //optional - By default is value from MiniappSettings
  visible: true  //optional
})

Alert

`AppBoxoWebAppShowAlert`

Show native alert box

Parameters

header optional string Alert header text
message optional string Alert message
buttons required Array<{ id: number, text: string, role?: 'cancel' | 'destructive' }> Define buttons

Example:

const showAlert = async () => {
  const data = await appboxo.sendPromise('AppBoxoWebAppShowAlert', {
    header: 'Native alert',
    message: 'This is a native alert box.',
    buttons: [
      {
        id: 1,
        text: 'Cancel',
        role:'destructive'
      },
      {
        id: 2,
        text: 'Ok'
      }
    ]
  });

  // Selected button
  const selectedButton = data.id
};

Geolocation

`AppBoxoWebAppGetGeodata`

Requests user geodata. This method will prompt a permission request to access geolocation.

Example:

const getGeodata = async () => {
  const data = await appboxo.sendPromise('AppBoxoWebAppGetGeodata');

  return {
    isAvailable: !!data.available,
    lat: parseFloat(data.lat),
    long: parseFloat(data.long)
  };
};

Map

`AppBoxoWebAppChooseLocation`

Open full screen map to choose location This method will prompt a permission request to access geolocation.

Example:

const chooseLocation = async () => {
  const data = await appboxo.sendPromise('AppBoxoWebAppChooseLocation');

  return {
    latitude: parseFloat(data.latitude),
    longitude: parseFloat(data.longitude)
  };
};

`AppBoxoWebAppOpenLocation`

Open full screen map to that shows markered location This method will prompt a permission request to access geolocation. Example:

const openLocation = async () => {
  const data = await appboxo.sendPromise('AppBoxoWebAppOpenLocation', {
    latitude: 42.5264986,
    longitude: 74.5788997,
    scale: 13
  });

  console.log(data)

  // Returns:
  // {
  //   result: true
  // }
};

Image gallery

`AppBoxoWebAppShowImages`

Open full screen native image gallery

Parameters start_index optional number Index to start showing from images required Array<string> Image urls Example:

appboxo.send('AppBoxoWebAppShowImages', {
  images: [
    // image urls
  ]
});

After image gallery is closed, the same event will be dispatched back to the miniapp with result data. Example:

appboxo.subscribe((event) => {
  if (!event.detail) {
    return
  }

  const { type, data } = event.detail

  if (type === 'AppBoxoWebAppShowImages') {
    if (data.result) {
      // Image gallery has been shown successfully
    } else {
      // There were problems loading provided images
    }
  }
})

Loading indicator

`AppBoxoWebAppLoadingIndicator`

Shows native loading indicator.

Important: Loading indicator will timeout after 30 seconds with prompt to hide it if no event is dispatched to change it. Example:

appboxo.send('AppBoxoWebAppLoadingIndicator', {
  show: true
})

Haptic feedback

`AppBoxoWebAppVibrate`

Triggers haptic engine on the device, if available.

Parameters style optional 'light' | 'medium' | 'heavy' Controls strength of vibration, defaults to ‘light’. Example:

appboxo.send('AppBoxoWebAppVibrate', {
  style: 'medium'
})

Storage

`AppBoxoWebAppStorageGet`

Requests a value from the storage Parameters keys required Array<string> Keys for getting ([a-zA-Z_-0-9]) Example:

const getUserData = async () => {
  const userData = await appboxo.sendPromise('AppBoxoWebAppStorageGet', {
    keys: ['username', 'email']
  });

  console.log(userData)

  // Returns:
  // {
  //   keys: [
  //     {
  //       key: 'username',
  //       value: 'John'
  //     },
  //     {
  //       key: 'email',
  //       value: 'john@doe.com'
  //     }
  //   ]
  // }
};

`AppBoxoWebAppStorageGetKeys`

Request list of keys of some stored values Parameters count required number Count of keys to get. Max value is 1000 offset optional number The offset required to fetch a specific subset of keys. Default: 0 Example:

const getStorageKeys = async () => {
  const storageKeys = await appboxo.sendPromise('AppBoxoWebAppStorageGetKeys', {
    count: 10
  });

  console.log(storageKeys);

  // Returns:
  // {
  //   keys: ['username', 'email']
  // }
};

`AppBoxoWebAppStorageSet`

Stores value in storage Parameters key required string The key of value ([a-zA-Z_-0-9]) value optional string value Example:

const saveData = async ({ key, value }) => {
  const response = await appboxo.sendPromise('AppBoxoWebAppStorageSet', {
    key,
    value
  });

  console.log(response);

  // Returns:
  // {
  //   result: true
  // }
};

`AppBoxoWebAppStorageRemove`

Removes value in storage Parameters key required string The key of value ([a-zA-Z_-0-9]) Example:

const removeData = async ({ key }) => {
  const response = await appboxo.sendPromise('AppBoxoWebAppStorageRemove', { key });

  console.log(response);

  // Returns:
  // {
  //   result: true
  // }
};

`AppBoxoWebAppStorageClear`

Clears all data in storage Example:

const clearStorage = async () => {
  const response = await appboxo.sendPromise('AppBoxoWebAppStorageClear');

  console.log(response);

  // Returns:
  // {
  //   result: true
  // }
};

Clipboard

`AppBoxoWebAppGetClipboard`

Gets the content on the system clipboard. Example:

const getClipboard = async () => {
  const response = await appboxo.sendPromise('AppBoxoWebAppGetClipboard');

  console.log(response);

  // Returns:
  // {
  //   data: 'from clipboard or null'
  // }
};

`AppBoxoWebAppSetClipboard`

Sets the content on the system clipboard. Parameters data required string Content to be copied to clipboard Example:

const setClipboard = async () => {
  const response = await appboxo.sendPromise('AppBoxoWebAppSetClipboard', {
    data: 'copied to clipboard'
  });

  console.log(response);

  // Returns:
  // {
  //   result: true
  // }
};

Accelerometer

`AppBoxoWebAppStartAccelerometer`

Starts listening on acceleration data. Example:

const startAccelerometer = async () => {
  const response = await appboxo.sendPromise('AppBoxoWebAppStartAccelerometer', {
    interval: 200 // Update interval in ms
  });

  console.log(response);

  // Returns:
  // {
  //   result: true
  // }
};

`AppBoxoWebAppStopAccelerometer`

Stops listening on acceleration data. Example:

const stopAccelerometer = async () => {
  const response = await appboxo.sendPromise('AppBoxoWebAppStopAccelerometer');

  console.log(response);

  // Returns:
  // {
  //   result: true
  // }
};

`AppBoxoWebAppOnAccelerometerChange`

Listens on the acceleration data event. You can send AppBoxoWebAppStopAccelerometer event to stop listening. Example:

appboxo.subscribe((event) => {
  if (!event.detail) {
    return
  }

  const { type, data } = event.detail

  if (type === 'AppBoxoWebAppOnAccelerometerChange') {
    console.log(data.x)
    console.log(data.y)
    console.log(data.z)
  }
})

Gyroscope

`AppBoxoWebAppStartGyroscope`

Starts listening on gyroscope data. Example:

const startAccelerometer = async () => {
  const response = await appboxo.sendPromise('AppBoxoWebAppStartGyroscope', {
    interval: 200 // Update interval in ms
  })

  console.log(response);

  // Returns:
  // {
  //   result: true
  // }
};

AppBoxoWebAppStopGyroscope Stops listening on gyroscope data. Example:

const stopAccelerometer = async () => {
  const response = await appboxo.sendPromise('AppBoxoWebAppStopGyroscope');

  console.log(response);

  // Returns:
  // {
  //   result: true
  // }
};

`AppBoxoWebAppOnGyroscopeChange`

Listens on the gyroscope data event. You can send AppBoxoWebAppStopGyroscope event to stop listening. Example:

appboxo.subscribe((event) => {
  if (!event.detail) {
    return
  }

  const { type, data } = event.detail

  if (type === 'AppBoxoWebAppOnGyroscopeChange') {
    console.log(data.x)
    console.log(data.y)
    console.log(data.z)
  }
})

Compass

`AppBoxoWebAppStartCompass`

Starts listening on compass data. Example:

const startCompass = async () => {
  const response = await appboxo.sendPromise('AppBoxoWebAppStartCompass')

  console.log(response);

  // Returns:
  // {
  //   result: true
  // }
};

`AppBoxoWebAppStopCompass`

Stops listening on compass data. Example:

const stopCompass = async () => {
  const response = await appboxo.sendPromise('AppBoxoWebAppStopCompass');

  console.log(response);

  // Returns:
  // {
  //   result: true
  // }
};

`AppBoxoWebAppOnCompassChange`

Listens on the compass data event. You can send AppBoxoWebAppStopCompass event to stop listening. Example:

appboxo.subscribe((event) => {
  if (!event.detail) {
    return
  }

  const { type, data } = event.detail

  if (type === 'AppBoxoWebAppOnCompassChange') {
    console.log(data.direction)
  }
})

​Navigation bar

​AppBoxoWebAppSetNavigationBar

​Tab bar

​AppBoxoWebAppSetTabBar

​AppBoxoWebAppTabBarItemClick

​QR code reader

​AppBoxoWebAppOpenQRCodeReader

​Action sheet

​AppBoxoWebAppShowActionSheet

​AppBoxoWebAppActionSheetItemClick

​Action buttons

​AppBoxoWebAppSetActionButton

​Alert

​AppBoxoWebAppShowAlert

​Geolocation

​AppBoxoWebAppGetGeodata

​Map

​AppBoxoWebAppChooseLocation

​AppBoxoWebAppOpenLocation

​Image gallery

​AppBoxoWebAppShowImages

​Loading indicator

​AppBoxoWebAppLoadingIndicator

​Haptic feedback

​AppBoxoWebAppVibrate

​Storage

​AppBoxoWebAppStorageGet

​AppBoxoWebAppStorageGetKeys

​AppBoxoWebAppStorageSet

​AppBoxoWebAppStorageRemove

​AppBoxoWebAppStorageClear

​Clipboard

​AppBoxoWebAppGetClipboard

​AppBoxoWebAppSetClipboard

​Accelerometer

​AppBoxoWebAppStartAccelerometer

​AppBoxoWebAppStopAccelerometer

​AppBoxoWebAppOnAccelerometerChange

​Gyroscope

​AppBoxoWebAppStartGyroscope

​AppBoxoWebAppOnGyroscopeChange

​Compass

​AppBoxoWebAppStartCompass

​AppBoxoWebAppStopCompass

​AppBoxoWebAppOnCompassChange

Navigation bar

`AppBoxoWebAppSetNavigationBar`

Tab bar

`AppBoxoWebAppSetTabBar`

`AppBoxoWebAppTabBarItemClick`

QR code reader

`AppBoxoWebAppOpenQRCodeReader`

Action sheet

`AppBoxoWebAppShowActionSheet`

`AppBoxoWebAppActionSheetItemClick`

Action buttons

`AppBoxoWebAppSetActionButton`

Alert

`AppBoxoWebAppShowAlert`

Geolocation

`AppBoxoWebAppGetGeodata`

Map

`AppBoxoWebAppChooseLocation`

`AppBoxoWebAppOpenLocation`

Image gallery

`AppBoxoWebAppShowImages`

Loading indicator

`AppBoxoWebAppLoadingIndicator`

Haptic feedback

`AppBoxoWebAppVibrate`

Storage

`AppBoxoWebAppStorageGet`

`AppBoxoWebAppStorageGetKeys`

`AppBoxoWebAppStorageSet`

`AppBoxoWebAppStorageRemove`

`AppBoxoWebAppStorageClear`

Clipboard

`AppBoxoWebAppGetClipboard`

`AppBoxoWebAppSetClipboard`

Accelerometer

`AppBoxoWebAppStartAccelerometer`

`AppBoxoWebAppStopAccelerometer`

`AppBoxoWebAppOnAccelerometerChange`

Gyroscope

`AppBoxoWebAppStartGyroscope`

`AppBoxoWebAppOnGyroscopeChange`

Compass

`AppBoxoWebAppStartCompass`

`AppBoxoWebAppStopCompass`

`AppBoxoWebAppOnCompassChange`