swimtracker-app/views/SettingsView.js

import React, { useState } from "react";
import {
  StyleSheet,
  View,
  StatusBar,
  TextInput,
  ImageBackground,
  Text,
  TouchableOpacity,
  SafeAreaView,
  Slider,
  Switch,
} from "react-native";
import themeColors from './themeColors';
import MaterialIcon from "react-native-vector-icons/MaterialCommunityIcons";
import EntypoIcon from "react-native-vector-icons/Entypo";


function ImageHeader(props) {
  return (
    <View style={imageHeaderStyles.container}>
      <ImageBackground
        source={require("../assets/infinity_pool2.jpg")}
        resizeMode="cover"
        style={{ flex: 1 }}
      >
        <View style={imageHeaderStyles.row}>
          <TouchableOpacity onPress={() => props.navigation.goBack()}>
            <EntypoIcon name="chevron-left" style={imageHeaderStyles.icon}></EntypoIcon>
          </TouchableOpacity>
          <Text style={imageHeaderStyles.text}>{props.text}</Text>
        </View>
      </ImageBackground>
    </View >
  )
}

const imageHeaderStyles = StyleSheet.create({
  container: {
    flex: 1,
    minHeight: 175,
    maxHeight: 175,
    height: 175,
    width: "100%",
  },
  row: {
    paddingTop: 30,
    flexDirection: "row",
  },
  icon: {
    color: "white",
    fontSize: 40,
    paddingRight: 10,
    paddingLeft: 10,
  },
  text: {
    color: "white",
    fontSize: 30,
  },
});

// ---------------------------------------------------------------------------------------------

function SettingsTextInput(props) {
  return (
    <React.Fragment>
      <Text style={settingsGroupStyles.label}>{props.label}</Text>
      <TextInput
        style={settingsGroupStyles.textInput}
        placeholder={props.placeholder}
        placeholderTextColor="rgba(167,167,167,1)"
        selectionColor='rgb(120,120,120)'
      ></TextInput>
    </React.Fragment>
  );
}

function SettingsSwitch(props) {
  const [isEnabled, setIsEnabled] = useState(false);
  const toggleSwitch = () => setIsEnabled(previousState => !previousState);

  return (
    <React.Fragment>
      <Text style={settingsGroupStyles.label}>{props.label}</Text>
      <Switch
        value={isEnabled}
        //thumbColor={themeColors["WET ASPHALT"]}
        onValueChange={toggleSwitch}
        trackColor={{ false: "#767577", true: themeColors["NEPHRITIS"] }} 
        //thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
        ios_backgroundColor="grey"
        style={settingsGroupStyles.switch}
      />
    </React.Fragment>
  )
}

function SettingsSlider(props) {
  return (
    <React.Fragment>
      <Text style={settingsGroupStyles.label}>{props.label}</Text>
      <Slider
        value={props.value}
        disabled={props.disabled}
        thumbTintColor={themeColors["WET ASPHALT"]}
        minimumTrackTintColor={themeColors["CLOUDS"]}
        maximumTrackTintColor={themeColors["CLOUDS"]}
        style={settingsGroupStyles.slider}
      />
    </React.Fragment>
  )
}

function SettingsCombo(props) {

}


function SettingsGroup(props) {

  return (
    <View style={settingsGroupStyles.container}>
      <Text style={settingsGroupStyles.title}>{props.title}</Text>
      <View style={settingsGroupStyles.subsettings}>
        {React.Children.map(props.children, (child, idx) =>
          <View style={idx == 0 ? [settingsGroupStyles.row, settingsGroupStyles.firstRow] : settingsGroupStyles.row}>
            {child}
          </View>
        )}
      </View>
    </View>
  );
};

const settingsGroupStyles = StyleSheet.create({
  container: {
    padding: 20,
    paddingRight: 30,
  },
  title: {
    color: "white",
    fontSize: 20,
    fontWeight: "600",
  },
  subsettings: {
    padding: 10,
    paddingLeft: 30,
  },
  row: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    borderTopColor: "rgba(255, 255,255, 0.6)",
    paddingTop: 5,
    paddingBottom: 5,
    borderTopWidth: 0.5,
    minHeight: 40,
  },
  firstRow: {
    paddingTop: 0,
    borderTopWidth: 0,
  },
  label: {
    color: "white",
    fontSize: 17,
  },
  textInput: {
    color: "rgba(255,255,255,1)",
    marginTop: 8,
  },
  slider: {
    minWidth: 100,
    width: 150,
    //minHeight: 50,
  },
  switch: {
    //minHeight: 50,
    //minWidth: 80,
  }
});

// ---------------------------------------------------------------------------------------------


function SettingsView(props) {
  return (
    <View style={{ flex: 1 }}>
      <StatusBar hidden={true} />
      <View style={{ flex: 1 }}>
        <ImageHeader text="EINSTELLUNGEN" navigation={props.navigation} />
        <View style={{ flex: 1, backgroundColor: themeColors["BELIZE HOLE"] }}>
          <SettingsGroup title="swimtracker Device">
            <SettingsTextInput
              label="URL/IP"
              placeholder="192.168.178.??"
            />
            <SettingsSwitch
              label="SomeSwitch"
            />
          </SettingsGroup>
        </View>
      </View>
    </View>
  )
}

export default SettingsView;