---
sidebar_position: 9
sidebar_label: Customizing the screens
---

# Customizing the screens in a mobile app

How far a mobile app changes the screens depends on what draws it.

## Capacitor and Ionic

A Capacitor app is a web page, so the screens change as they do on the web, in three steps: [making the screens your own](../apps/customizing.md).

- **The look:** design tokens such as `--bm-color-accent` on the page.
- **A piece:** `components` on the React components from `@wordplus/realtime-ui/react`, or `::part()` and `<template slot>` on the elements.
- **The code:** `npx @wordplus/realtime-ui add call-screen` copies the view into your app, its tests and its preview with it.

Check every change at the width of a phone: `npx @wordplus/realtime-ui preview`, then `?width=phone`.

## React Native

The Better Messages screens are drawn for the web, so a React Native app draws its own on the SDK: its rooms, presence, events and who is online are all there ([React Native](../apps/react.md#react-native)). Calls and the ready-made parts in React Native come later.

## Swift and Kotlin

The native call screens take the pieces of the app too: [iOS](../ios/getting-started.md) and [Android](../android/getting-started.md).