Detect broken connection via app layer ping

views/SettingsView.js

@@ -11,6 +11,7 @@ import themeColors from '../components/themeColors';
 import MaterialIcon from "react-native-vector-icons/MaterialCommunityIcons";
 import EntypoIcon from "react-native-vector-icons/Entypo";
 import ImageHeader from "../components/ImageHeader";
+import { connect } from 'react-redux';
 
 
 // ---------------------------------------------------------------------------------------------
@@ -24,6 +25,7 @@ function SettingsTextInput(props) {
         placeholder={props.placeholder}
         placeholderTextColor="rgba(167,167,167,1)"
         selectionColor='rgb(120,120,120)'
+        value={props.value}
       ></TextInput>
     </React.Fragment>
   );
@@ -124,6 +126,7 @@ const settingsGroupStyles = StyleSheet.create({
   textInput: {
     color: "rgba(255,255,255,1)",
     marginTop: 8,
+    textAlign: "right",
   },
   slider: {
     minWidth: 100,
@@ -140,6 +143,7 @@ const settingsGroupStyles = StyleSheet.create({
 
 
 function SettingsView(props) {
+  console.log("settings props", props);
   return (
     <View style={{ flex: 1 }}>
       <StatusBar hidden={true} />
@@ -154,11 +158,11 @@ function SettingsView(props) {
           <SettingsGroup title="swimtracker Device">
             <SettingsTextInput
               label="URL/IP"
-              placeholder="192.168.178.??"
-            />
-            <SettingsSwitch
-              label="SomeSwitch"
+              placeholder="swimtracker-????"
+              value={props.settings.swimTrackerHost}
             />
+            <SettingsSwitch label="Start automatically" />
+            <SettingsSwitch label="Stop automatically" />
           </SettingsGroup>
         </View>
       </View>
@@ -166,4 +170,8 @@ function SettingsView(props) {
   )
 }
 
-export default SettingsView;
+const mapStateToProps = (state) => {
+  return { settings: state.settings };
+};
+
+export default connect(mapStateToProps)(SettingsView);