Merge pull request #27 from barmej/v1.2

V1.1

example/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  root: true,
+  extends: '@react-native-community',
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+};

example/.gitignore

@@ -20,7 +20,6 @@ DerivedData
 *.hmap
 *.ipa
 *.xcuserstate
-project.xcworkspace
 
 # Android/IntelliJ
 #
@@ -30,6 +29,10 @@ build/
 local.properties
 *.iml
 
+# Visual Studio Code
+#
+.vscode/
+
 # node.js
 #
 node_modules/
@@ -40,6 +43,7 @@ yarn-error.log
 buck-out/
 \.buckd/
 *.keystore
+!debug.keystore
 
 # fastlane
 #
@@ -54,3 +58,6 @@ buck-out/
 
 # Bundle artifact
 *.jsbundle
+
+# CocoaPods
+/ios/Pods/

example/.prettierrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  bracketSpacing: false,
+  jsxBracketSameLine: true,
+  singleQuote: true,
+  trailingComma: 'all',
+};

example/App.js

@@ -6,41 +6,40 @@
  * @flow
  */
 
-import React, { Component } from "react";
-import { Platform, StyleSheet, Text, View } from "react-native";
-import YoutubePlayer from "react-native-yt-player";
+import React, {Component} from 'react';
+import {Platform, StyleSheet, Text, View} from 'react-native';
+import YoutubePlayer from 'react-native-yt-player';
 
-const TopBar = ({ play, fullScreen }) => (
+const TopBar = ({play, fullScreen}) => (
   <View
     style={{
-      alignSelf: "center",
-      position: "absolute",
-      top: 0
-    }}
-  >
-    {!fullScreen && <Text style={{ color: "#FFF" }}> Custom Top bar</Text>}
+      alignSelf: 'center',
+      position: 'absolute',
+      top: 0,
+    }}>
+    {!fullScreen && <Text style={{color: '#FFF'}}> Custom Top bar</Text>}
   </View>
 );
 
 export default class App extends Component<Props> {
   state = {
-    fullScreen: false
+    fullScreen: false,
   };
 
-  onFullScreen = fullScreen => {
-    console.log("fullscreen ", fullScreen);
-    this.setState({ fullScreen });
+  onFullScreen = (fullScreen) => {
+    console.log('fullscreen ', fullScreen);
+    this.setState({fullScreen});
   };
   render() {
     return (
-      <View style={{ paddingTop: 60 }}>
+      <View style={{paddingTop: 60}}>
         <YoutubePlayer
           topBar={TopBar}
           videoId="Z1LmpiIGYNs"
           autoPlay
           onFullScreen={this.onFullScreen}
-          onStart={() => console.log("onStart")}
-          onEnd={() => alert("on End")}
+          onStart={() => console.log('onStart')}
+          onEnd={() => alert('on End')}
         />
 
         <View>
@@ -59,18 +58,18 @@ export default class App extends Component<Props> {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    backgroundColor: "#F5FCFF"
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
   },
   welcome: {
     fontSize: 20,
-    textAlign: "center",
-    margin: 10
+    textAlign: 'center',
+    margin: 10,
   },
   instructions: {
-    textAlign: "center",
-    color: "#333333",
-    marginBottom: 5
-  }
+    textAlign: 'center',
+    color: '#333333',
+    marginBottom: 5,
+  },
 });

example/App.tsx

@@ -0,0 +1,55 @@
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * Generated with the TypeScript template
+ * https://github.com/react-native-community/react-native-template-typescript
+ *
+ * @format
+ */
+
+import React from 'react';
+import {SafeAreaView, StatusBar, Text, View} from 'react-native';
+import YoutubePlayer from 'react-native-yt-player';
+
+const TopBar = () => (
+  <View
+    style={{
+      alignSelf: 'center',
+      position: 'absolute',
+      top: 0,
+    }}>
+    <Text style={{color: '#FFF'}}> Custom Top bar</Text>
+  </View>
+);
+
+const App = () => {
+  return (
+    <>
+      <StatusBar barStyle="dark-content" />
+      <SafeAreaView>
+        <View style={{paddingTop: 60}}>
+          <YoutubePlayer
+            topBar={TopBar}
+            videoId="H5R9jZMBNI8"
+            // autoPlay
+            //onFullScreen={this.onFullScreen}
+            onStart={() => console.log('onStart')}
+            onEnd={() => console.log('on End')}
+          />
+
+          <View>
+            <Text>
+              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Commodi,
+              aspernatur rerum, deserunt cumque ipsam unde nam voluptatum
+              tenetur cupiditate veritatis autem quidem ad repudiandae sapiente
+              odit voluptates fugit placeat ut!
+            </Text>
+          </View>
+        </View>
+      </SafeAreaView>
+    </>
+  );
+};
+
+export default App;