@hoddy-ui/core 1.0.59 → 1.0.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hoddy-ui/core",
-  "version": "1.0.59",
+  "version": "1.0.62",
   "description": "Core rich react native components written in typescript",
   "main": "index.ts",
   "repository": {
@@ -16,7 +16,7 @@
     "@react-navigation/native": ">=6.1.7",
     "@types/react": "^18.2.6",
     "@types/react-native": "^0.72.0",
-    "expo-haptics": "^12.6.0",
+    "expo-haptics": ">=12.4.0",
     "expo-location": ">=15.1.1",
     "expo-navigation-bar": ">=2.1.1",
     "expo-system-ui": ">=2.2.1",

package/src/Components/Grid.tsx

@@ -27,7 +27,7 @@ export const Grid: React.FC<GridProps> = ({
   const styles = ScaledSheet.create({
     grid: {
       flexWrap: "wrap",
-      marginHorizontal: -spacing * 10 + "@ms",
+      margin: -spacing * 10 + "@ms",
       flexDirection: "row",
     },
   });

package/src/Components/TextField.tsx

@@ -283,7 +283,7 @@ export const TextField2: React.FC<TextFieldProps> = ({
 }) => {
   const colors = useColors();
   const [focused, _setFocused] = useState(false);
-
+  const [showPassword, setShowPassword] = useState(false);
   const labelAnim = useRef(new Animated.Value(0)).current;
 
   const height = moderateScale(
@@ -394,7 +394,7 @@ export const TextField2: React.FC<TextFieldProps> = ({
         }
       : type === "password"
       ? {
-          secureTextEntry: true,
+          secureTextEntry: !showPassword,
           autoCompleteType: "password",
           autoCapitalize: "none",
           textContentType: "password",
@@ -444,6 +444,7 @@ export const TextField2: React.FC<TextFieldProps> = ({
               }}
               value={value}
               onChangeText={onChangeText}
+              key={showPassword ? "show" : "hide"}
               keyboardType={keyboardType}
               placeholderTextColor={colors.textSecondary.main}
               editable={!disabled}
@@ -456,7 +457,22 @@ export const TextField2: React.FC<TextFieldProps> = ({
             />
           )}
 
-          {end && <View style={{ marginRight: 20 }}>{end}</View>}
+          {end ? (
+            <View style={{ marginRight: 20 }}>{end}</View>
+          ) : (
+            type === "password" && (
+              <TouchableOpacity
+                style={{ marginRight: 20 }}
+                onPress={() => setShowPassword(!showPassword)}
+              >
+                <Ionicons
+                  name={showPassword ? "eye-outline" : "eye-off-outline"}
+                  size={24}
+                  color={colors.textSecondary.main}
+                />
+              </TouchableOpacity>
+            )
+          )}
         </TouchableOpacity>
         {helperText && (
           <Typography