https://github.com/tien/react-airplay

Airplay bridge for React Native
https://github.com/tien/react-airplay

airplay cast ios react react-native

Last synced: 2 days ago
JSON representation

Airplay bridge for React Native

• Host: GitHub
• URL: https://github.com/tien/react-airplay
• Owner: tien
• License: mit
• Created: 2021-02-15T10:43:58.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2024-11-04T16:23:07.000Z (3 months ago)
• Last Synced: 2025-02-04T22:49:18.411Z (10 days ago)
• Topics: airplay, cast, ios, react, react-native
• Language: TypeScript
• Homepage:
• Size: 4.56 MB
• Stars: 38
• Watchers: 3
• Forks: 9
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-airplay

[![npm](https://img.shields.io/npm/v/react-airplay)](https://www.npmjs.com/package/react-airplay)

Airplay bridge for React Native.

## Installation

```sh

yarn add react-airplay

npx pod-install

```

- Extra step for creating a bridging header:

  > Only required if your project doesn't already use Swift

  Create an empty Swift file in XCode, it will then ask if you want to create a bridging header

## Usage

```tsx

import {

  AirplayButton,

  showRoutePicker,

  useAirplayConnectivity,

  useExternalPlaybackAvailability,

  useAvAudioSessionRoutes,

} from 'react-airplay';

import {Button, Text} from 'react-native'

const App = () => {

  const isAirplayConnected = useAirplayConnectivity();

  const isExternalPlaybackAvailable = useExternalPlaybackAvailability();

  const routes = useAvAudioSessionRoutes();

  return (

    

      {isExternalPlaybackAvailable && (

        

         showRoutePicker({prioritizesVideoDevices: true})}/>

      )}

      {routes.length && (

        Currently playing on {routes.map((route) => route.portName).join(', ')}

      )}

    

  );

};

```

### Note

Enabling route detection increase power consumption, as per [Apple documentation](https://developer.apple.com/documentation/avfoundation/avroutedetector/2915762-isroutedetectionenabled). So be sure to un-mount the component when not in use, if that's not possible (e.g. when component is part of a `react-navigation` screen) the `enabled` option parameter can be used:

```typescript

import { useIsFocused } from "@react-navigation/native";

import { useExternalPlaybackAvailability } from "react-airplay";

const isScreenFocused = useIsFocused();

const isExternalPlaybackAvailable = useExternalPlaybackAvailability({

  enabled: isScreenFocused,

});

```

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT