react-airplay

Airplay bridge for React Native.

Installation

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

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 (
    <View>
      {isExternalPlaybackAvailable && (
        <AirplayButton
          prioritizesVideoDevices={true}
          tintColor={'red'}
          activeTintColor={'blue'}
          style={{
            width: 24,
            height: 24,
          }}
        />

        <Button title="Custom Button" onPress={() => showRoutePicker({prioritizesVideoDevices: true})}/>
      )}
      {routes.length && (
        <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 useCachedValue option parameter can be used:

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

const isScreenFocused = useIsFocused();

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

Contributing

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

License

MIT