cally/components/pages/settings/UserSettings.tsx

import { View, Text, TouchableOpacity } from "react-native-ui-lib";
import React, { useState } from "react";
import { Ionicons } from "@expo/vector-icons";
import {
  KeyboardAvoidingView,
  Platform,
  ScrollView,
  StyleSheet,
} from "react-native";
import MyProfile from "./user_settings_views/MyProfile";
import MyGroup from "./user_settings_views/MyGroup";
import { useAuthContext } from "@/contexts/AuthContext";

const UserSettings = (props: { setSelectedPage: (page: number) => void }) => {
  const [selectedView, setSelectedView] = useState<boolean>(true);
  return (
      <ScrollView
        contentContainerStyle={{ flexGrow: 1 }}
      >
        <View style={{ flex: 1 }}>
          <TouchableOpacity onPress={() => props.setSelectedPage(0)}>
            <View row marginT-20 marginL-20 marginB-35 centerV>
              <Ionicons name="chevron-back" size={22} color="#979797" />
              <Text text70 color="#979797">
                Return to main settings
              </Text>
            </View>
          </TouchableOpacity>
          <View marginH-20>
            <Text text60R marginB-25>
              User Management
            </Text>
            <View style={styles.buttonSwitch} spread row>
              <TouchableOpacity
                onPress={() => setSelectedView(true)}
                centerV
                centerH
                style={
                  selectedView == true ? styles.btnSelected : styles.btnNot
                }
              >
                <View>
                  <Text text70 color={selectedView ? "white" : "black"}>
                    My Profile
                  </Text>
                </View>
              </TouchableOpacity>
              <TouchableOpacity
                onPress={() => setSelectedView(false)}
                centerV
                centerH
                style={
                  selectedView == false ? styles.btnSelected : styles.btnNot
                }
              >
                <View>
                  <Text text70 color={!selectedView ? "white" : "black"}>
                    My Group
                  </Text>
                </View>
              </TouchableOpacity>
            </View>
            {selectedView && <MyProfile />}
            {!selectedView && <MyGroup />}
          </View>
        </View>
      </ScrollView>
  );
};

const styles = StyleSheet.create({
  buttonSwitch: {
    borderRadius: 50,
    width: "100%",
    backgroundColor: "#ebebeb",
    height: 45,
  },
  btnSelected: {
    backgroundColor: "#05a8b6",
    height: "100%",
    width: "50%",
    borderRadius: 50,
  },
  btnNot: {
    height: "100%",
    width: "50%",
    borderRadius: 50,
  },
});

export default UserSettings;