Package Exports

react-airplay
react-airplay/lib/commonjs/index.js
react-airplay/lib/module/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-airplay) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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