Fixing checkbox problem

src/app/components/CustomCheckBox.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Pressable, StyleSheet, View, } from 'react-native';
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import colors from "../config/colors";
+
+export default function CustomCheckBox({value, onValueChange, ...otherProps}) {
+  const onCheckmarkPress = () => {
+    onValueChange(!value);
+  }
+
+  return (
+    <View style={otherProps.style}>
+    <Pressable
+      style={[styles.checkboxBase, value && styles.checkboxChecked]}
+      onPress={onCheckmarkPress}>
+      {value && <MaterialCommunityIcons name="check" size={15} color="white" />}
+    </Pressable>
+    </View>
+  );
+}
+
+
+const styles = StyleSheet.create({
+  checkboxBase: {
+    width: 20,
+    height: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 4,
+    borderWidth: 2,
+    borderColor: colors.primary,
+    backgroundColor: 'transparent',
+  },
+  checkboxChecked: {
+    backgroundColor: colors.primary,
+  },
+
+
+});

src/app/components/forms/CheckBox.js

@@ -1,12 +1,13 @@
 import React, { useEffect, useState } from "react";
-import { CheckBox, View, Text } from "react-native";
+import { View, Text } from "react-native";
 import { useFormikContext } from "formik";
 import colors from "../../config/colors";
 import { TouchableOpacity } from "react-native-gesture-handler";
 import ErrorMessage from "./ErrorMessage";
 import { dimensions } from "../../config/dimensions";
+import CustomCheckBox from "../CustomCheckBox";
 
-const Checkbox = ({ name, children, navigate, ...props }) => {
+export default function CheckBox({ name, children, navigate, ...props }) {
   const { setFieldValue, errors, touched } = useFormikContext();
   const [toggleCheckBox, setToggleCheckBox] = useState(false);
 
@@ -22,16 +23,11 @@ const Checkbox = ({ name, children, navigate, ...props }) => {
           alignItems: "center",
         }}
       >
-        <View width={35}>
-        <CheckBox
+        <CustomCheckBox
           value={toggleCheckBox}
           onValueChange={(newValue) => setToggleCheckBox(newValue)}
-          type={"checkbox"}
-          tintColors={{ true: colors.primary }}
-          onCheckColor={colors.primary}
-          {...props}
+          style={{marginRight: 12}}
         />
-          </View>
 
         <TouchableOpacity
           onPress={() => {
@@ -50,6 +46,7 @@ const Checkbox = ({ name, children, navigate, ...props }) => {
       <TouchableOpacity onPress={() => navigate()}>
         <Text
           style={{
+            marginTop: 12,
             marginLeft: 35,
             color: colors.lightBlue,
             fontSize: dimensions.text.default,
@@ -60,5 +57,3 @@ const Checkbox = ({ name, children, navigate, ...props }) => {
     </View>
   );
 };
-
-export default Checkbox;

src/app/screens/RegisterScreen.js

@@ -37,6 +37,7 @@ import authStorage from "../auth/storage";
 import ConfirmationModal from "../components/ConfirmationModal";
 import PasswordFormField from "../components/forms/PasswordFormField";
 import constants from "../config/constants";
+import CheckBox from "../components/forms/CheckBox";
 
 const phoneRegex = RegExp(
   /^\(?[\(]?([0-9]{2,3})?\)?[)\b]?([0-9]{4,5})[-. ]?([0-9]{4})$/
@@ -539,23 +540,28 @@ export default function RegisterScreen(props) {
                 paddingLeft={2}
               />
             </View>
-            {/*<Text style={styles.labelStyle}>Termos de uso*</Text>
+
+
+            <Text style={styles.labelStyle}>Termos de uso*</Text>
             <View
-              flexDirection="column"
+              flexDirection={"column"}
               alignItems={"flex-start"}
               marginBottom={24}
               marginTop={12}
             >
-             <Checkbox
+              <CheckBox
                 name={"consent"}
                 navigate={() => props.navigation.navigate("UserAgreement")}
               />
-            </View>*/}
+            </View>
+            
             <SubmitButton
               flex={1}
               title="cadastrar"
               backgroundColor={colors.primary}
             />
+
+
             <TouchableNativeFeedback
               onPress={() => {
                 props.navigation.goBack();