react-airplay

Airplay bridge for React Native.

Installation

yarn add react-airplay
npx pod-install

Usage

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 (
    <View>
      {isExternalPlaybackAvailable && (
        <>
          <AirplayButton
            prioritizesVideoDevices
            tintColor="red"
            activeTintColor="blue"
            style={{
              width: 24,
              height: 24,
            }}
          />
          <Button
            title="Custom Button"
            onPress={() => showRoutePicker({ prioritizesVideoDevices: true })}
          />
        </>
      )}
      {routes.length > 0 && (
        <Text>
          Currently playing on{" "}
          {routes.map((route) => route.portName).join(", ")}
        </Text>
      )}
    </View>
  );
}

Note

Enabling route detection increase power consumption, as per Apple documentation. 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:

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

const isScreenFocused = useIsFocused();

const isExternalPlaybackAvailable = useExternalPlaybackAvailability({
  enabled: isScreenFocused,
});

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT