Merge pull request #303 from openmultiplayer/appearance_uses_radiobutton

The appearances tab in settings now has a radiobutton

Author: AmyrAhmady

src/components/RadioButton.tsx

@@ -0,0 +1,47 @@
+import { ColorValue, Pressable, View, ViewProps } from "react-native";
+import { useTheme } from "../states/theme";
+
+interface IProps extends ViewProps {
+  color?: ColorValue;
+  onChange?: (value: boolean) => void;
+  value?: boolean;
+}
+
+const RadioButton = (props: IProps) => {
+  const { theme } = useTheme();
+  const Wrapper = props.onChange ? Pressable : View;
+
+  return (
+    <Wrapper
+      style={[
+        {
+          height: 17,
+          width: 17,
+          borderRadius: 17 / 2,
+          borderWidth: 2,
+          padding: 2,
+        },
+        props.style,
+        { borderColor: props.color ? props.color : theme.primary },
+      ]}
+      onPress={() => {
+        if (props.onChange) {
+          props.onChange(!props.value);
+        }
+      }}
+    >
+      {props.value && (
+        <View
+          style={{
+            height: "100%",
+            width: "100%",
+            borderRadius: 17 / 2,
+            backgroundColor: props.color ? props.color : theme.primary,
+          }}
+        />
+      )}
+    </Wrapper>
+  );
+};
+
+export default RadioButton;

src/containers/Settings/Tab/Languages.tsx

@@ -1,11 +1,11 @@
 import { Pressable, ScrollView, StyleSheet, View } from "react-native";
-import CheckBox from "../../../components/CheckBox";
 import Text from "../../../components/Text";
 import { getLanguages } from "../../../locales";
 import { useGenericPersistentState } from "../../../states/genericStates";
 import { useSettingsModal } from "../../../states/settingsModal";
 import { useTheme } from "../../../states/theme";
 import { sc } from "../../../utils/sizeScaler";
+import RadioButton from "../../../components/RadioButton";
 
 const Appearance = () => {
   const { language, setLanguage } = useGenericPersistentState();
@@ -49,7 +49,7 @@ const Appearance = () => {
                   hideSettings();
                 }}
               >
-                <CheckBox
+                <RadioButton
                   value={language === lang.type}
                   style={{ marginRight: sc(10) }}
                 />