Refactor start

src/screens/SettingsScreen.js

@@ -1,63 +1,47 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+
 import {
     View,
     Text,
     TextInput,
+    
     } from 'react-native';
+
 import {
         Header,
         Button,
     } from 'react-native-elements';
 
+import { useAsyncStorage } from '@react-native-async-storage/async-storage';
 
-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>
+// I know all the previous stuff uses componets and classes, but for now this is the 
+// Only way I can get this to work properly
+
+export default function App() {
+  const [value, setValue] = useState('value');
+  const { getItem, setItem } = useAsyncStorage('@storage_key');
+
+  const readItemFromStorage = async () => {
+    const item = await getItem();
+    setValue(item);
+  };
+
+  const writeItemToStorage = async newValue => {
+    await setItem(newValue);
+    setValue(newValue);
+  };
+
+  useEffect(() => {
+    readItemFromStorage();
+  }, []);
+
+  return (
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+      <Text>Server IP: {value}</Text>
       <Text>{"\n"}</Text>
+      <TextInput onChangeText={newValue => writeItemToStorage(newValue) } style={{borderWidth: 1, width: 100}}>{value}</TextInput>
+     
       
-         
-        
-        <Button title="Save" type="outline"
-        />
-        </View>
-  
-      );
-    }
-  }
-
-  export default SettingsScreen;
+    </View>
+  );
+}