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 months 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 (over 5 years ago)
- Default Branch: main
- Last Pushed: 2026-03-31T10:23:21.000Z (2 months ago)
- Last Synced: 2026-03-31T10:31:46.183Z (2 months ago)
- Topics: airplay, cast, ios, react, react-native
- Language: TypeScript
- Homepage:
- Size: 4.22 MB
- Stars: 44
- Watchers: 2
- Forks: 13
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# react-airplay
[](https://www.npmjs.com/package/react-airplay)
Airplay bridge for React Native.
## Installation
```sh
yarn add react-airplay
npx pod-install
```
## Usage
```tsx
import {
AirplayButton,
showRoutePicker,
useAirplayConnectivity,
useExternalPlaybackAvailability,
useAvAudioSessionRoutes,
} from "react-airplay";
import { Button, Text, View } from "react-native";
export function App() {
const isAirplayConnected = useAirplayConnectivity();
const isExternalPlaybackAvailable = useExternalPlaybackAvailability();
const routes = useAvAudioSessionRoutes();
return (
{isExternalPlaybackAvailable && (
<>
showRoutePicker({ prioritizesVideoDevices: true })}
/>
>
)}
{routes.length > 0 && (
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