text: /**
   * Sample React Native App
   * https://github.com/facebook/react-native
   * @flow
   */
  
  import React, { Component } from "react";
  import { Alert, StyleSheet, Text, View, Dimensions, TouchableOpacity } from "react-native";
  import Video from "react-native-fast-video";
  
  const { height, width } = Dimensions.get("screen");
  
  type Props = {};
  
  type State = {
    showLocal: boolean
  };
  
  function Button({ text, onPress }: { text: string, onPress: () => void }) {
    return (
      <TouchableOpacity
        onPress={onPress}
        style={styles.button}
      >
        <Text style={{color: 'white'}}>{text}</Text>
      </TouchableOpacity>
    )
  }
  
  export default class App extends Component<Props, State> {
    state = {
      showLocal: false
    }
    render() {
      return (
        <View style={styles.container}>
          <Video
            source={
              this.state.showLocal ?
                require('../basic/broadchurch.mp4') :
                {
                  uri:  "https://rawgit.com/mediaelement/mediaelement-files/master/big_buck_bunny.mp4"
                }
            }
            ref={player => {
              this.player = player;
            }}
            onEnd={() => {
              this.player.seek(0);
            }}
            onError={(err) => {
              Alert.alert(JSON.stringify(err))
            }}
            style={{ flex: 1, height, width }}
          />
          <View style={styles.absoluteOverlay}>
            <Button
              onPress={async () => {
                let response = await this.player.save();
                let uri = response.uri;
                console.warn("Download URI", uri);
              }}
              text="Save"
            />
            <Button
              onPress={() => {
                this.setState(state => ({ showLocal: !state.showLocal }))
              }}
              text={this.state.showLocal ? "Show Remote" : "Show Local"}
            />
          </View>
        </View>
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: "center",
      alignItems: "center",
      backgroundColor: "#F5FCFF"
    },
    absoluteOverlay: {
      flexDirection: 'row',
      position: 'absolute',
      top: 0,
      width: '100%',
      marginTop: 50,
    },
    button: {
      padding: 10,
      backgroundColor: '#9B2FAE',
      borderRadius: 8,
      flex: 1,
      alignItems: 'center',
      marginHorizontal: 5,
    },
    welcome: {
      fontSize: 20,
      textAlign: "center",
      margin: 10
    }
  });
  