feat: fully customizable AirPlay button

Author: dylancom

README.md

@@ -1,6 +1,6 @@
 # react-native-airplay-cast
 
-Stream audio or video to AirPlay-enabled devices.
+Stream audio or video to AirPlay-enabled devices with a customizable AirPlay button.
 
 ## Installation
 
@@ -13,9 +13,11 @@ npm install react-native-airplay-cast
 ```js
 import { AirPlayButton } from "react-native-airplay-cast";
 
-// ...
-
-<AirPlayButton style={{ width: 30, height: 30 }} />
+<AirPlayButton 
+  activeTintColor="blue"
+  tintColor="black"
+  style={{ width: 30, height: 30 }}
+/>
 ```
 
 ## Contributing

example/src/App.tsx

@@ -5,7 +5,11 @@ import { AirPlayButton } from 'react-native-airplay-cast';
 export default function App() {
   return (
     <View style={styles.container}>
-      <AirPlayButton />
+      <AirPlayButton
+        activeTintColor="blue"
+        tintColor="black"
+        style={styles.button}
+      />
     </View>
   );
 }
@@ -16,4 +20,8 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  button: {
+    width: 30,
+    height: 30,
+  },
 });

ios/RNAirPlayButtonManager.m

@@ -1,7 +1,6 @@
 #import <React/RCTViewManager.h>
 #import <Foundation/Foundation.h>
-#import <AVFoundation/AVFoundation.h>
-#import <MediaPlayer/MediaPlayer.h>
+#import <AVKit/AVRoutePickerView.h>
 
 @interface RNAirPlayButtonManager : RCTViewManager
 @end
@@ -12,17 +11,11 @@ @implementation RNAirPlayButtonManager
 
 - (UIView *)view
 {
-  if (@available(iOS 11.0, *)) {
-    AVRoutePickerView *airplayButton = [[AVRoutePickerView alloc] init];
-    airplayButton.activeTintColor = [UIColor blueColor];
-    airplayButton.tintColor = [UIColor whiteColor];
-    return airplayButton;
-  } else {
-    // If you still support previous iOS versions, you can use MPVolumeView
-    MPVolumeView *airplayButton = [[MPVolumeView alloc] init];
-    airplayButton.showsVolumeSlider = NO;
-    return airplayButton;
-  }
+  AVRoutePickerView *airPlayButton = [[AVRoutePickerView alloc] init];
+  return airPlayButton;
 }
 
+RCT_EXPORT_VIEW_PROPERTY(activeTintColor, UIColor);
+RCT_EXPORT_VIEW_PROPERTY(tintColor, UIColor);
+
 @end

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-airplay-cast",
-  "version": "0.1.0",
-  "description": "Stream audio or video to AirPlay-enabled devices",
+  "version": "1.0.0",
+  "description": "Stream audio or video to AirPlay-enabled devices with a customizable AirPlay button",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
   "types": "lib/typescript/src/index.d.ts",

src/index.tsx

@@ -1,10 +1,18 @@
-import { requireNativeComponent } from 'react-native';
+import { requireNativeComponent, ViewProps } from 'react-native';
 
 // type AirPlayCastType = {
 // };
 
 // const { AirPlayCast } = NativeModules;
 
-export const AirPlayButton = requireNativeComponent('RNAirPlayButton');
+type AirPlayButtonProps = ViewProps & {
+  activeTintColor?: string;
+  tintColor?: string;
+  style?: React.CSSProperties;
+};
+
+export const AirPlayButton = requireNativeComponent<AirPlayButtonProps>(
+  'RNAirPlayButton'
+);
 
 // export default AirPlayCast as AirPlayCastType;