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 {
+// I know all the previous stuff uses componets and classes, but for now this is the 
-    // 1
+// Only way I can get this to work properly
-    constructor(props) {
+
-      super(props);
+export default function App() {
-      this.state = { text: "" };
+  const [value, setValue] = useState('value');
-    }
+  const { getItem, setItem } = useAsyncStorage('@storage_key');
-  
+
-    //2
+  const readItemFromStorage = async () => {
-    changeText(inputText) {
+    const item = await getItem();
-      const formattedText = "\u{1F632}" + inputText;
+    setValue(item);
-      this.setState({ text: formattedText });
+  };
-    }
+
-  
+  const writeItemToStorage = async newValue => {
-    //3
+    await setItem(newValue);
-    endEditing() {
+    setValue(newValue);
-      const formattedText = this.state.text + "\u{2708}";
+  };
-      this.setState({ text: formattedText });
+
-    }
+  useEffect(() => {
-    
+    readItemFromStorage();
-    static navigationOptions = ({ navigation }) => {
+  }, []);
-      return {
+
-        title: navigation.getParam('otherParam', 'Settings'),
+  return (
-        headerStyle: {
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}>
-          backgroundColor: '#3333ff',
+      <Text>Server IP: {value}</Text>
-        },
-        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>
+      <TextInput onChangeText={newValue => writeItemToStorage(newValue) } style={{borderWidth: 1, width: 100}}>{value}</TextInput>
+     
       
-         
+    </View>
-        
+  );
-        <Button title="Save" type="outline"
+}
-        />
-        </View>
-  
-      );
-    }
-  }
-
-  export default SettingsScreen;