# Embedded Content

Integrate Embedded Content into your React Native app to display Scene content directly within your app's screens. For information about Embedded Content, including overview, use cases, and how to create Embedded Content view styles and Scenes, see [Embedded Content]({{< ref "/guides/features/messaging/scenes/embedded-content.md" >}}).




## Adding an embedded view

The `AirshipEmbeddedView` component defines a place for Airship Embedded Content to be displayed. When defining an `AirshipEmbeddedView`, specify the `embeddedId` for the content it should display. The value of the `embeddedId` must be the ID of an Embedded Content view style in your project.

**Basic integration**

```typescript
import { AirshipEmbeddedView } from '@ua/react-native-airship'

// Show any "home_banner" Embedded Content
<AirshipEmbeddedView embeddedId="home_banner" />
```


## Sizing

The `AirshipEmbeddedView` accepts an optional `style` prop for controlling its dimensions and layout. You can use standard React Native `ViewStyle` properties to set width, height, and other layout constraints.

**Custom sizing**

```typescript
<AirshipEmbeddedView 
  embeddedId="home_banner"
  style={{
    width: '100%',
    minHeight: 200
  }}
/>
```


## Checking if embedded content is ready

Use `Airship.inApp.isEmbeddedReady` to check if embedded content is currently available for a given ID:

```typescript
import Airship from '@ua/react-native-airship'

const isReady = Airship.inApp.isEmbeddedReady("home_banner")
```


## Listening for embedded content updates

Use `Airship.inApp.addEmbeddedReadyListener` to listen for changes in the availability of embedded content for a given ID. The listener receives a boolean indicating whether content is ready to display. The listener is called immediately with the current state when first added, and then again whenever the state changes.

**Embedded ready listener**

```typescript
import Airship from '@ua/react-native-airship'

const subscription = Airship.inApp.addEmbeddedReadyListener("home_banner", (isReady) => {
  console.log("home_banner is ready:", isReady)
})

// Remove the listener when no longer needed
subscription.remove()
```


## Showing a placeholder when content is unavailable

The `AirshipEmbeddedView` renders nothing when no content is available. Use `addEmbeddedReadyListener` to toggle between a placeholder and the embedded view based on content availability.

**Embedded view with placeholder**

```typescript
import React, { useState, useEffect } from 'react'
import { View, Text, StyleSheet } from 'react-native'
import Airship, { AirshipEmbeddedView } from '@ua/react-native-airship'

function HomeBanner() {
  const [isReady, setIsReady] = useState(
    Airship.inApp.isEmbeddedReady("home_banner")
  )

  useEffect(() => {
    const subscription = Airship.inApp.addEmbeddedReadyListener(
      "home_banner",
      (ready) => {
        setIsReady(ready)
      }
    )

    return () => {
      subscription.remove()
    }
  }, [])

  if (!isReady) {
    return (
      <View style={styles.placeholder}>
        <Text>No content available</Text>
      </View>
    )
  }

  return (
    <AirshipEmbeddedView
      embeddedId="home_banner"
      style={styles.banner}
    />
  )
}

const styles = StyleSheet.create({
  placeholder: {
    width: '100%',
    height: 200,
    justifyContent: 'center',
    alignItems: 'center',
  },
  banner: {
    width: '100%',
    minHeight: 200,
  },
})
```