import React from "react";
import { View, Text } from "react-native";
import { Airplay, AirplayButton, AirplayListener } from "rn-airplay";

class Component extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      airplayConnected: false,
      airplayAvailable: false
    };
  }

  componentDidMount() {
    this.airplayConnected = AirplayListener.addListener(
      "airplayConnected",
      devices => this.setState({ airplayConnected: devices.connected })
    );

    this.airplayAvailable = AirplayListener.addListener(
      "airplayAvailable",
      devices => this.setState({ airplayAvailable: devices.available })
    );

    Airplay.startScan();
  }

  componentWillUnmount() {
    Airplay.endScan();

    this.airplayConnected.remove();
    this.airplayAvailable.remove();
  }

  render() {
    const { airplayConnected, airplayAvailable } = this.state;

    return (
      <View>
        {airplayConnected && <Text>Airplay connected</Text>}
        {airplayAvailable && <Text>Airplay available</Text>}
        <AirplayButton />
      </View>
    );
  }
}