cally/components/pages/settings/UserSettings.tsx

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

const UserSettings = (props: { setSelectedPage: (page: number) => void }) => {
  const [selectedView, setSelectedView] = useState<boolean>(true);
  return (
    <View flexG>
      <ScrollView style={{ paddingBottom: 20, minHeight: "100%" }}>
        <TouchableOpacity onPress={() => props.setSelectedPage(0)}>
        <View row marginT-20 marginB-35 centerV>
            <Ionicons name="chevron-back" size={14} color="#979797" style={{paddingBottom: 3}} />
            <Text
              style={{ fontFamily: "Poppins_400Regular", fontSize: 14.71 }}
              color="#979797"
            >
              Return to main settings
            </Text>
          </View>
        </TouchableOpacity>
        <View marginH-20 flexG style={{ minHeight: "90%" }}>
          <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
                  style={styles.btnTxt}
                  color={selectedView ? "white" : "black"}
                >
                  My Profile
                </Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => setSelectedView(false)}
              centerV
              centerH
              style={selectedView == false ? styles.btnSelected : styles.btnNot}
            >
              <View>
                <Text
                  style={styles.btnTxt}
                  color={!selectedView ? "white" : "black"}
                >
                  My Group
                </Text>
              </View>
            </TouchableOpacity>
          </View>
          {selectedView && <MyProfile />}
          {!selectedView && <MyGroup />}
        </View>
      </ScrollView>

      {!selectedView && (
        <View>
          <Text>selview</Text>
        </View>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  buttonSwitch: {
    borderRadius: 50,
    width: "100%",
    backgroundColor: "#ebebeb",
    height: 45,
  },
  btnSelected: {
    backgroundColor: "#05a8b6",
    height: "100%",
    width: "50%",
    borderRadius: 50,
  },
  btnTxt: {
    fontFamily: "Manrope_500Medium",
    fontSize: 15,
  },
  btnNot: {
    height: "100%",
    width: "50%",
    borderRadius: 50,
  },
  title: { fontFamily: "Manrope_600SemiBold", fontSize: 18 },
});

export default UserSettings;