### Start Metro Bundler

Source: https://github.com/theoplayer/react-native-theoplayer-ui/blob/develop/example/README.md

Starts the Metro bundler, which is essential for developing React Native applications. This command should be run from the root of your React Native project.

```bash
# using npm
npm start

# OR using Yarn
yarn start
```

--------------------------------

### Install React Native THEOplayer UI Dependencies

Source: https://github.com/theoplayer/react-native-theoplayer-ui/blob/develop/doc/getting-started.md

Installs the core UI package, the player, and a required peer dependency for SVG rendering using npm or yarn. Ensure these are added to your project's dependencies.

```bash
npm install \
  @theoplayer/react-native-ui \
  react-native-theoplayer \
  react-native-svg
```

--------------------------------

### Run React Native App on iOS

Source: https://github.com/theoplayer/react-native-theoplayer-ui/blob/develop/example/README.md

Launches the React Native application on an iOS simulator or device. Ensure the Metro bundler is running in a separate terminal.

```bash
# using npm
npm run ios

# OR using Yarn
yarn ios
```

--------------------------------

### Reloading App Changes

Source: https://github.com/theoplayer/react-native-theoplayer-ui/blob/develop/example/README.md

Instructions for reloading the application to see changes after modifying code. This involves using keyboard shortcuts or the developer menu.

```bash
For Android: Press the R key twice or select "Reload" from the Developer Menu (Ctrl + M on Windows/Linux or Cmd ⌘ + M on macOS).

For iOS: Hit Cmd ⌘ + R in your iOS Simulator.
```

--------------------------------

### Run React Native App on Android

Source: https://github.com/theoplayer/react-native-theoplayer-ui/blob/develop/example/README.md

Launches the React Native application on an Android emulator or device. Ensure the Metro bundler is running in a separate terminal.

```bash
# using npm
npm run android

# OR using Yarn
yarn android
```

--------------------------------

### Basic THEOplayerDefaultUi Usage

Source: https://github.com/theoplayer/react-native-theoplayer-ui/blob/develop/doc/getting-started.md

Demonstrates how to render the default THEOplayer UI component within a React Native application. It applies absolute styling and passes player configuration and a ready callback.

```tsx
const App = () => {
  return (
    <THEOplayerDefaultUi
      style={StyleSheet.absoluteFill}
      config={playerConfig}
      onPlayerReady={onPlayerReady}
    />
  );
};
```

--------------------------------

### Custom UI Layout with Basic Playback and Ad Controls

Source: https://github.com/theoplayer/react-native-theoplayer-ui/blob/develop/doc/getting-started.md

Demonstrates a custom UI layout for THEOplayer in React Native, featuring basic playback controls and specific UI elements for ad playback slots. It utilizes components like `THEOplayerView`, `UiContainer`, `ControlBar`, `SeekBar`, `PlayButton`, and ad-specific components. This example shows how to structure the UI for both content and ad playback.

```tsx
import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import THEOplayerView, { THEOplayer, THEOplayerConfig } from 'react-native-theoplayer';
import {
  UiContainer,
  DEFAULT_THEOPLAYER_THEME,
  ControlBar,
  SeekBar,
  MuteButton,
  TimeLabel,
  Spacer,
  FullscreenButton,
  PlayButton,
  SkipButton,
  CenteredControlBar,
  CenteredDelayedActivityIndicator,
  AdClickThroughButton,
  AdDisplay,
  AdCountdown,
  AdSkipButton
} from 'react-native-theoplayer/ui';

const playerConfig: THEOplayerConfig = {
  licenseKey: 'YOUR_LICENSE_KEY',
};

export default function App() {
  const [player, setPlayer] = useState<THEOplayer | undefined>(undefined);

  const onPlayerReady = (player: THEOplayer) => {
    setPlayer(player);
  };

  return (
    <View style={StyleSheet.absoluteFill}>
      <THEOplayerView config={playerConfig} onPlayerReady={onPlayerReady}>
        {player !== undefined && (
          <UiContainer
            theme={DEFAULT_THEOPLAYER_THEME}
            player={player}
            behind={<CenteredDelayedActivityIndicator size={50} />}
            center={
              <CenteredControlBar
                left={<SkipButton skip={-10} />}
                middle={<PlayButton />}
                right={<SkipButton skip={30} />}
              />
            }
            bottom={
              <>
                <ControlBar>
                  <SeekBar />
                </ControlBar>
                <ControlBar>
                  <MuteButton />
                  <TimeLabel showDuration={true} />
                  <Spacer />
                  <FullscreenButton />
                </ControlBar>
              </>
            }
            adTop={
              <ControlBar>
                <AdClickThroughButton />
              </ControlBar>
            }
            adCenter={<CenteredControlBar middle={<PlayButton />} />}
            adBottom={
              <>
                <ControlBar style={{ justifyContent: 'flex-start' }}>
                  <AdDisplay />
                  <AdCountdown />
                  <Spacer />
                  <AdSkipButton />
                </ControlBar>
                <ControlBar>
                  <MuteButton />
                  <SeekBar />
                </ControlBar>
              </>
            }
          />
        )}
      </THEOplayerView>
    </View>
  );
}

```

--------------------------------

### Configure Native Dependencies

Source: https://github.com/theoplayer/react-native-theoplayer-ui/blob/develop/doc/getting-started.md

Specifies native dependencies for React Native projects, ensuring proper linking of modules like react-native-svg and react-native-google-cast. This is crucial for projects that don't auto-link these dependencies.

```typescript
module.exports = {
  dependencies: {
    'react-native-google-cast': {},
    'react-native-svg': {},
  },
};
```

--------------------------------

### THEOplayerDefaultUi with Custom Slots

Source: https://github.com/theoplayer/react-native-theoplayer-ui/blob/develop/doc/getting-started.md

Shows how to extend the default THEOplayer UI by injecting custom components into the top and bottom control bars. This allows for adding custom buttons or elements to the player interface.

```tsx
const App = () => {
  return (
    <THEOplayerDefaultUi
      style={StyleSheet.absoluteFill}
      config={playerConfig}
      bottomSlot={<PipButton/>}
      topSlot={<MyCustomComponent/>}
    />
  );
};
```

--------------------------------

### Localizing THEOplayer UI with Custom Translations

Source: https://github.com/theoplayer/react-native-theoplayer-ui/blob/develop/doc/localization.md

Demonstrates how to provide custom Dutch translations for THEOplayer UI elements by passing a `locale` prop with a partial `Locale` object. This allows for internationalization and tailoring the viewing experience.

```tsx
import React from 'react';
import { StyleSheet } from 'react-native';
import { THEOplayerDefaultUi } from 'react-native-theoplayer-ui';

// Assuming playerConfig is defined elsewhere
const playerConfig = {};

const App = () => {
  const myCustomLocale = {
    backButton: 'Terug',
    settingsTitle: 'Instellingen',
    qualityTitle: 'Videokwaliteit',
    audioTitle: 'Taal',
    subtitleTitle: 'Ondertitels',
    playbackRateTitle: 'Afspeelsnelheid',
    liveLabel: 'LIVE'
    // For a full list of available keys, see the Localization interface.
  };

  return (
    <THEOplayerDefaultUi
      style={StyleSheet.absoluteFill}
      config={playerConfig}
      locale={myCustomLocale}
    />
  );
};

export default App;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.