initial add

src/screens/AboutScreen.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import {
+    View,
+    Text,
+  } from 'react-native';
+
+class AboutScreen extends React.Component {
+    static navigationOptions = ({ navigation }) => {
+      return {
+        title: navigation.getParam('otherParam', 'About'),
+        headerStyle: {
+          backgroundColor: '#3333ff',
+        },
+        headerTintColor: '#fff',
+      };
+    };
+  
+    render() {
+      return (
+        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+    <Text>About Screen{"\n"}{"\n"}
+    RPI Media Center Control v 1.0 beta</Text>
+        </View>
+      );
+    }
+  }
+
+  export default AboutScreen;

src/screens/FilesScreen.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import axios from 'axios';
+
+import {
+    View,
+    Text,
+    FlatList, // Solves the problem with the 5 movie limit in the app
+  } from 'react-native';
+  
+  // these imports make headers and buttons look better
+  import {
+      Header,
+      Button,
+  } from 'react-native-elements';
+
+function play(name) {
+    // Play handler
+    axios.get('http://192.168.1.158:8080/play/'+name)
+    .then(res => {
+    // Still don't care about response
+    })
+    
+    }
+
+class FilesScreen extends React.Component {
+
+    constructor(props){
+      super(props);
+      this.state ={ data: []};
+  }
+    static navigationOptions = ({ navigation }) => {
+      return {
+        title: navigation.getParam('otherParam', 'File Selection'),
+        headerStyle: {
+          backgroundColor: '#3333ff',
+        },
+        headerTintColor: '#fff',
+      };
+    };
+  
+    componentDidMount() {
+     axios.get('http://192.168.1.158:8080/list/')
+     .then(res => {
+       this.setState({
+         data: res.data.data,
+       })
+     })
+        
+    }
+      
+  
+  
+    render() {
+      let movies = this.state.data
+  
+      return (
+      
+       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+       <Text>Pick a movie</Text>
+       <FlatList
+      keyExtractor={movies => movies}
+      data={movies}
+      renderItem={({ item }) => {
+        return <Button title={item} type="outline" onPress = {() => play(item)}
+    />
+       }}  
+      /> 
+      </View>
+     );
+    }
+  
+  }
+
+  export default FilesScreen;

src/screens/HomeScreen.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import {
+	Button,
+} from 'react-native-elements';
+import {
+  View,
+  Text,
+} from 'react-native';
+// play,pause,stop icons
+import { AntDesign } from '@expo/vector-icons'; 
+import { MaterialCommunityIcons } from '@expo/vector-icons'; 
+import axios from 'axios'; // Took a while to figure out how to use it, but its simpler then the
+
+function bp(name) {
+// Button press handler important
+axios.get('http://192.168.1.158:8080/'+name)
+.then(res => {
+  // We don't care fore now
+})
+}
+
+class HomeScreen extends React.Component {
+    static navigationOptions = ({ navigation }) => {
+      return {
+        title: navigation.getParam('otherParam', 'RPI Media Center Control'),
+        headerStyle: {
+          backgroundColor: '#3333ff',
+        },
+        headerTintColor: '#fff',
+      };
+    };
+  
+    render() {
+      return (
+             
+        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+          <Text>Controls</Text>
+  
+           <Button
+            title="Select file to play" type="outline"
+            onPress={() => this.props.navigation.navigate('Files')}
+        /><Text>{"\n"}</Text>
+       
+       <View style={{flexDirection: 'row' }}>
+       <Button
+            icon={<AntDesign name="pausecircleo" size={24} color="black" />} title="Pause" type="outline"
+        onPress = {() => bp('pause/')}
+        />      
+        <Button
+            icon={<AntDesign name="playcircleo" size={24} color="black" />} title="Resume" type="outline"
+            onPress = {() => bp('resume/')}
+        />
+        <Button
+            icon={<MaterialCommunityIcons name="stop-circle-outline" size={24} color="black" />} title="Stop" type="outline"
+            onPress = {() => bp('stop/')}
+        /><Text>{"\n"}</Text>
+        </View>
+        <Text>{"\n"}</Text>
+  
+       <Button
+            title="Settings" type="outline"
+            onPress={() => this.props.navigation.navigate('Settings')}
+          /><Text>{"\n"}</Text>
+          <Button
+            title="About" type="outline"
+            onPress={() => this.props.navigation.navigate('About')}
+          />
+        </View>
+      
+      );
+    }
+  }
+
+  export default HomeScreen;

src/screens/SettingsScreen.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import {
+    View,
+    Text,
+    TextInput,
+    } from 'react-native';
+import {
+        Header,
+        Button,
+    } from 'react-native-elements';
+
+
+class SettingsScreen extends React.Component {
+    // 1
+    constructor(props) {
+      super(props);
+      this.state = { text: "" };
+    }
+  
+    //2
+    changeText(inputText) {
+      const formattedText = "\u{1F632}" + inputText;
+      this.setState({ text: formattedText });
+    }
+  
+    //3
+    endEditing() {
+      const formattedText = this.state.text + "\u{2708}";
+      this.setState({ text: formattedText });
+    }
+    
+    static navigationOptions = ({ navigation }) => {
+      return {
+        title: navigation.getParam('otherParam', 'Settings'),
+        headerStyle: {
+          backgroundColor: '#3333ff',
+        },
+        headerTintColor: '#fff',
+      };
+    };
+   
+  
+   
+    render() {
+      return (
+        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+    <Text>Settings Screen{"\n"}{"\n"}
+      RPI Media Center Control v 1.0 beta Settings{"\n"}</Text>
+      <Text>{"\n"}server IP/hostname: </Text>
+        <TextInput name="IP" style={{borderWidth: 1, width: 100}} ></TextInput>
+      <Text>{"\n"}</Text>
+      
+         
+        
+        <Button title="Save" type="outline"
+        />
+        </View>
+  
+      );
+    }
+  }
+
+  export default SettingsScreen;