@draftbit/core 43.4.4 → 43.4.5-ccf125.1

package/lib/module/mappings/KeyboardAvoidingView.js.map

@@ -1 +1 @@
-{"version":3,"sources":["KeyboardAvoidingView.ts"],"names":["COMPONENT_TYPES","FORM_TYPES","PROP_TYPES","GROUPS","SEED_DATA","name","tag","description","category","layout","props","enabled","label","editable","required","defaultValue","formType","boolean","propType","BOOLEAN","group","basic","behavior","options","flatArray","STRING","keyboardVerticalOffset","number","NUMBER"],"mappings":"AAAA,SACEA,eADF,EAEEC,UAFF,EAGEC,UAHF,EAIEC,MAJF,QAKO,iBALP;AAOA,OAAO,MAAMC,SAAS,GAAG;AACvBC,EAAAA,IAAI,EAAE,wBADiB;AAEvBC,EAAAA,GAAG,EAAE,sBAFkB;AAGvBC,EAAAA,WAAW,EAAE,0DAHU;AAIvBC,EAAAA,QAAQ,EAAER,eAAe,CAACS,MAJH;AAKvBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,OAAO,EAAE;AACPC,MAAAA,KAAK,EAAE,QADA;AAEPL,MAAAA,WAAW,EAAE,mCAFN;AAGPM,MAAAA,QAAQ,EAAE,IAHH;AAIPC,MAAAA,QAAQ,EAAE,IAJH;AAKPC,MAAAA,YAAY,EAAE,IALP;AAMPC,MAAAA,QAAQ,EAAEf,UAAU,CAACgB,OANd;AAOPC,MAAAA,QAAQ,EAAEhB,UAAU,CAACiB,OAPd;AAQPC,MAAAA,KAAK,EAAEjB,MAAM,CAACkB;AARP,KADJ;AAWLC,IAAAA,QAAQ,EAAE;AACRV,MAAAA,KAAK,EAAE,mBADC;AAERL,MAAAA,WAAW,EACT,uGAHM;AAIRM,MAAAA,QAAQ,EAAE,IAJF;AAKRC,MAAAA,QAAQ,EAAE,IALF;AAMRC,MAAAA,YAAY,EAAE,SANN;AAORQ,MAAAA,OAAO,EAAE,CAAC,SAAD,EAAY,UAAZ,EAAwB,QAAxB,CAPD;AAQRP,MAAAA,QAAQ,EAAEf,UAAU,CAACuB,SARb;AASRN,MAAAA,QAAQ,EAAEhB,UAAU,CAACuB,MATb;AAURL,MAAAA,KAAK,EAAEjB,MAAM,CAACkB;AAVN,KAXL;AAuBLK,IAAAA,sBAAsB,EAAE;AACtBd,MAAAA,KAAK,EAAE,0BADe;AAEtBL,MAAAA,WAAW,EACT,8DAHoB;AAItBM,MAAAA,QAAQ,EAAE,IAJY;AAKtBC,MAAAA,QAAQ,EAAE,KALY;AAMtBC,MAAAA,YAAY,EAAE,CANQ;AAOtBC,MAAAA,QAAQ,EAAEf,UAAU,CAAC0B,MAPC;AAQtBT,MAAAA,QAAQ,EAAEhB,UAAU,CAAC0B,MARC;AAStBR,MAAAA,KAAK,EAAEjB,MAAM,CAACkB;AATQ;AAvBnB;AALgB,CAAlB","sourcesContent":["import {\n  COMPONENT_TYPES,\n  FORM_TYPES,\n  PROP_TYPES,\n  GROUPS,\n} from \"@draftbit/types\";\n\nexport const SEED_DATA = {\n  name: \"Keyboard Avoiding View\",\n  tag: \"KeyboardAvoidingView\",\n  description: \"View that moves out of the way of the virtual keyboard. \",\n  category: COMPONENT_TYPES.layout,\n  props: {\n    enabled: {\n      label: \"Enable\",\n      description: \"Enable the keyboard avoiding view\",\n      editable: true,\n      required: true,\n      defaultValue: true,\n      formType: FORM_TYPES.boolean,\n      propType: PROP_TYPES.BOOLEAN,\n      group: GROUPS.basic,\n    },\n    behavior: {\n      label: \"Resizing Behavior\",\n      description:\n        \"The behavior for how the keyboard resizing interacts with the rest of the screen. (Default: padding).\",\n      editable: true,\n      required: true,\n      defaultValue: \"padding\",\n      options: [\"padding\", \"position\", \"height\"],\n      formType: FORM_TYPES.flatArray,\n      propType: PROP_TYPES.STRING,\n      group: GROUPS.basic,\n    },\n    keyboardVerticalOffset: {\n      label: \"Keyboard Vertical Offset\",\n      description:\n        \"The distance between the bottom of the view and the keyboard\",\n      editable: true,\n      required: false,\n      defaultValue: 0,\n      formType: FORM_TYPES.number,\n      propType: PROP_TYPES.NUMBER,\n      group: GROUPS.basic,\n    },\n  },\n};\n"]}
+{"version":3,"sources":["KeyboardAvoidingView.js"],"names":["COMPONENT_TYPES","FORM_TYPES","PROP_TYPES","GROUPS","SEED_DATA","name","tag","description","category","layout","props","enabled","label","editable","required","defaultValue","formType","boolean","propType","BOOLEAN","group","basic","behavior","options","flatArray","STRING","keyboardVerticalOffset","number","NUMBER"],"mappings":"AAAA,SAASA,eAAT,EAA0BC,UAA1B,EAAsCC,UAAtC,EAAkDC,MAAlD,QAAiE,iBAAjE;AACA,OAAO,MAAMC,SAAS,GAAG;AACrBC,EAAAA,IAAI,EAAE,wBADe;AAErBC,EAAAA,GAAG,EAAE,sBAFgB;AAGrBC,EAAAA,WAAW,EAAE,0DAHQ;AAIrBC,EAAAA,QAAQ,EAAER,eAAe,CAACS,MAJL;AAKrBC,EAAAA,KAAK,EAAE;AACHC,IAAAA,OAAO,EAAE;AACLC,MAAAA,KAAK,EAAE,QADF;AAELL,MAAAA,WAAW,EAAE,mCAFR;AAGLM,MAAAA,QAAQ,EAAE,IAHL;AAILC,MAAAA,QAAQ,EAAE,IAJL;AAKLC,MAAAA,YAAY,EAAE,IALT;AAMLC,MAAAA,QAAQ,EAAEf,UAAU,CAACgB,OANhB;AAOLC,MAAAA,QAAQ,EAAEhB,UAAU,CAACiB,OAPhB;AAQLC,MAAAA,KAAK,EAAEjB,MAAM,CAACkB;AART,KADN;AAWHC,IAAAA,QAAQ,EAAE;AACNV,MAAAA,KAAK,EAAE,mBADD;AAENL,MAAAA,WAAW,EAAE,uGAFP;AAGNM,MAAAA,QAAQ,EAAE,IAHJ;AAINC,MAAAA,QAAQ,EAAE,IAJJ;AAKNC,MAAAA,YAAY,EAAE,SALR;AAMNQ,MAAAA,OAAO,EAAE,CAAC,SAAD,EAAY,UAAZ,EAAwB,QAAxB,CANH;AAONP,MAAAA,QAAQ,EAAEf,UAAU,CAACuB,SAPf;AAQNN,MAAAA,QAAQ,EAAEhB,UAAU,CAACuB,MARf;AASNL,MAAAA,KAAK,EAAEjB,MAAM,CAACkB;AATR,KAXP;AAsBHK,IAAAA,sBAAsB,EAAE;AACpBd,MAAAA,KAAK,EAAE,0BADa;AAEpBL,MAAAA,WAAW,EAAE,8DAFO;AAGpBM,MAAAA,QAAQ,EAAE,IAHU;AAIpBC,MAAAA,QAAQ,EAAE,KAJU;AAKpBC,MAAAA,YAAY,EAAE,CALM;AAMpBC,MAAAA,QAAQ,EAAEf,UAAU,CAAC0B,MAND;AAOpBT,MAAAA,QAAQ,EAAEhB,UAAU,CAAC0B,MAPD;AAQpBR,MAAAA,KAAK,EAAEjB,MAAM,CAACkB;AARM;AAtBrB;AALc,CAAlB","sourcesContent":["import { COMPONENT_TYPES, FORM_TYPES, PROP_TYPES, GROUPS, } from \"@draftbit/types\";\nexport const SEED_DATA = {\n    name: \"Keyboard Avoiding View\",\n    tag: \"KeyboardAvoidingView\",\n    description: \"View that moves out of the way of the virtual keyboard. \",\n    category: COMPONENT_TYPES.layout,\n    props: {\n        enabled: {\n            label: \"Enable\",\n            description: \"Enable the keyboard avoiding view\",\n            editable: true,\n            required: true,\n            defaultValue: true,\n            formType: FORM_TYPES.boolean,\n            propType: PROP_TYPES.BOOLEAN,\n            group: GROUPS.basic,\n        },\n        behavior: {\n            label: \"Resizing Behavior\",\n            description: \"The behavior for how the keyboard resizing interacts with the rest of the screen. (Default: padding).\",\n            editable: true,\n            required: true,\n            defaultValue: \"padding\",\n            options: [\"padding\", \"position\", \"height\"],\n            formType: FORM_TYPES.flatArray,\n            propType: PROP_TYPES.STRING,\n            group: GROUPS.basic,\n        },\n        keyboardVerticalOffset: {\n            label: \"Keyboard Vertical Offset\",\n            description: \"The distance between the bottom of the view and the keyboard\",\n            editable: true,\n            required: false,\n            defaultValue: 0,\n            formType: FORM_TYPES.number,\n            propType: PROP_TYPES.NUMBER,\n            group: GROUPS.basic,\n        },\n    },\n};\n"]}

package/lib/module/utilities.js

@@ -60,4 +60,18 @@ export function applyStyles(baseStyles, stylesToApply) {
 
   return flattenedStyles;
 }
+export function getRealValue(value) {
+  // console.log("getRealValue typeof", typeof value);
+  // console.log("getRealValue value", value);
+  switch (typeof value) {
+    case "string":
+      return value;
+
+    case "number":
+      return String(value);
+
+    default:
+      return undefined;
+  }
+}
 //# sourceMappingURL=utilities.js.map

package/lib/module/utilities.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utilities.ts"],"names":["StyleSheet","extractStyles","style","color","fontFamily","fontWeight","fontSize","lineHeight","letterSpacing","textTransform","textAlign","textDecorationLine","textDecorationColor","textDecorationStyle","viewStyles","flatten","textStyles","applyStyles","baseStyles","stylesToApply","flattenedStyles","key","value","Object","entries"],"mappings":"AAAA,SAASA,UAAT,QAAiD,cAAjD;AAEA,OAAO,SAASC,aAAT,CAAuBC,KAAvB,EAA8C;AACnD,QAAM;AACJC,IAAAA,KADI;AAEJC,IAAAA,UAFI;AAGJC,IAAAA,UAHI;AAIJC,IAAAA,QAJI;AAKJC,IAAAA,UALI;AAMJC,IAAAA,aANI;AAOJC,IAAAA,aAPI;AAQJC,IAAAA,SARI;AASJC,IAAAA,kBATI;AAUJC,IAAAA,mBAVI;AAWJC,IAAAA,mBAXI;AAYJ,OAAGC;AAZC,MAaFd,UAAU,CAACe,OAAX,CAAmBb,KAAK,IAAI,EAA5B,CAbJ;AAeA,QAAMc,UAAqB,GAAG;AAC5Bb,IAAAA,KAD4B;AAE5BC,IAAAA,UAF4B;AAG5BC,IAAAA,UAH4B;AAI5BC,IAAAA,QAJ4B;AAK5BC,IAAAA,UAL4B;AAM5BC,IAAAA,aAN4B;AAO5BC,IAAAA,aAP4B;AAQ5BC,IAAAA,SAR4B;AAS5BC,IAAAA,kBAT4B;AAU5BC,IAAAA,mBAV4B;AAW5BC,IAAAA;AAX4B,GAA9B;AAcA,SAAO;AAAEC,IAAAA,UAAF;AAAcE,IAAAA;AAAd,GAAP;AACD;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,WAAT,CACLC,UADK,EAELC,aAFK,EAGL;AACA,MAAI,CAACA,aAAL,EAAoB;AAClB;AACD;;AAED,QAAMC,eAAe,GAAGpB,UAAU,CAACe,OAAX,CAAmBG,UAAnB,CAAxB;;AAEA,OAAK,MAAM,CAACG,GAAD,EAAMC,KAAN,CAAX,IAA2BC,MAAM,CAACC,OAAP,CAAeL,aAAf,CAA3B,EAA0D;AACxD,QAAIG,KAAK,IAAI,IAAb,EAAmB;AACjBF,MAAAA,eAAe,CAACC,GAAD,CAAf,GAAuBC,KAAvB;AACD;AACF;;AAED,SAAOF,eAAP;AACD","sourcesContent":["import { StyleSheet, StyleProp, TextStyle } from \"react-native\";\n\nexport function extractStyles(style: StyleProp<any>) {\n  const {\n    color,\n    fontFamily,\n    fontWeight,\n    fontSize,\n    lineHeight,\n    letterSpacing,\n    textTransform,\n    textAlign,\n    textDecorationLine,\n    textDecorationColor,\n    textDecorationStyle,\n    ...viewStyles\n  } = StyleSheet.flatten(style || {});\n\n  const textStyles: TextStyle = {\n    color,\n    fontFamily,\n    fontWeight,\n    fontSize,\n    lineHeight,\n    letterSpacing,\n    textTransform,\n    textAlign,\n    textDecorationLine,\n    textDecorationColor,\n    textDecorationStyle,\n  };\n\n  return { viewStyles, textStyles };\n}\n\n/**\n * Merges a style object on top of another style object. In React Native,\n * keys with undefined values in a style object will still override styles\n * that appear earlier in a sequence. This avoids that problem.\n *\n * This lets us avoid the `...(something ? { something } : {})` pattern.\n * There doesn't seem to be a better way to do this. These all seem to not\n * work (i.e. they all result in `{ color: undefined }`:\n * `const mergedStyles = [{ color: \"red\" }, { color: undefined }]`\n * `const mergedStyles = StyleSheet.compose({ color: \"red\" }, { color: undefined })`\n * `const mergedStyles = StyleSheet.flatten([{ color: \"red\" }, { color: undefined }])`\n */\nexport function applyStyles(\n  baseStyles: Array<StyleProp<any>>,\n  stylesToApply: StyleProp<any> | undefined\n) {\n  if (!stylesToApply) {\n    return;\n  }\n\n  const flattenedStyles = StyleSheet.flatten(baseStyles);\n\n  for (const [key, value] of Object.entries(stylesToApply)) {\n    if (value != null) {\n      flattenedStyles[key] = value;\n    }\n  }\n\n  return flattenedStyles;\n}\n"]}
+{"version":3,"sources":["utilities.ts"],"names":["StyleSheet","extractStyles","style","color","fontFamily","fontWeight","fontSize","lineHeight","letterSpacing","textTransform","textAlign","textDecorationLine","textDecorationColor","textDecorationStyle","viewStyles","flatten","textStyles","applyStyles","baseStyles","stylesToApply","flattenedStyles","key","value","Object","entries","getRealValue","String","undefined"],"mappings":"AAAA,SAASA,UAAT,QAAiD,cAAjD;AAEA,OAAO,SAASC,aAAT,CAAuBC,KAAvB,EAA8C;AACnD,QAAM;AACJC,IAAAA,KADI;AAEJC,IAAAA,UAFI;AAGJC,IAAAA,UAHI;AAIJC,IAAAA,QAJI;AAKJC,IAAAA,UALI;AAMJC,IAAAA,aANI;AAOJC,IAAAA,aAPI;AAQJC,IAAAA,SARI;AASJC,IAAAA,kBATI;AAUJC,IAAAA,mBAVI;AAWJC,IAAAA,mBAXI;AAYJ,OAAGC;AAZC,MAaFd,UAAU,CAACe,OAAX,CAAmBb,KAAK,IAAI,EAA5B,CAbJ;AAeA,QAAMc,UAAqB,GAAG;AAC5Bb,IAAAA,KAD4B;AAE5BC,IAAAA,UAF4B;AAG5BC,IAAAA,UAH4B;AAI5BC,IAAAA,QAJ4B;AAK5BC,IAAAA,UAL4B;AAM5BC,IAAAA,aAN4B;AAO5BC,IAAAA,aAP4B;AAQ5BC,IAAAA,SAR4B;AAS5BC,IAAAA,kBAT4B;AAU5BC,IAAAA,mBAV4B;AAW5BC,IAAAA;AAX4B,GAA9B;AAcA,SAAO;AAAEC,IAAAA,UAAF;AAAcE,IAAAA;AAAd,GAAP;AACD;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,WAAT,CACLC,UADK,EAELC,aAFK,EAGL;AACA,MAAI,CAACA,aAAL,EAAoB;AAClB;AACD;;AAED,QAAMC,eAAe,GAAGpB,UAAU,CAACe,OAAX,CAAmBG,UAAnB,CAAxB;;AAEA,OAAK,MAAM,CAACG,GAAD,EAAMC,KAAN,CAAX,IAA2BC,MAAM,CAACC,OAAP,CAAeL,aAAf,CAA3B,EAA0D;AACxD,QAAIG,KAAK,IAAI,IAAb,EAAmB;AACjBF,MAAAA,eAAe,CAACC,GAAD,CAAf,GAAuBC,KAAvB;AACD;AACF;;AAED,SAAOF,eAAP;AACD;AAED,OAAO,SAASK,YAAT,CAAsBH,KAAtB,EAAkC;AACvC;AACA;AACA,UAAQ,OAAOA,KAAf;AACE,SAAK,QAAL;AACE,aAAOA,KAAP;;AACF,SAAK,QAAL;AACE,aAAOI,MAAM,CAACJ,KAAD,CAAb;;AACF;AACE,aAAOK,SAAP;AANJ;AAQD","sourcesContent":["import { StyleSheet, StyleProp, TextStyle } from \"react-native\";\n\nexport function extractStyles(style: StyleProp<any>) {\n  const {\n    color,\n    fontFamily,\n    fontWeight,\n    fontSize,\n    lineHeight,\n    letterSpacing,\n    textTransform,\n    textAlign,\n    textDecorationLine,\n    textDecorationColor,\n    textDecorationStyle,\n    ...viewStyles\n  } = StyleSheet.flatten(style || {});\n\n  const textStyles: TextStyle = {\n    color,\n    fontFamily,\n    fontWeight,\n    fontSize,\n    lineHeight,\n    letterSpacing,\n    textTransform,\n    textAlign,\n    textDecorationLine,\n    textDecorationColor,\n    textDecorationStyle,\n  };\n\n  return { viewStyles, textStyles };\n}\n\n/**\n * Merges a style object on top of another style object. In React Native,\n * keys with undefined values in a style object will still override styles\n * that appear earlier in a sequence. This avoids that problem.\n *\n * This lets us avoid the `...(something ? { something } : {})` pattern.\n * There doesn't seem to be a better way to do this. These all seem to not\n * work (i.e. they all result in `{ color: undefined }`:\n * `const mergedStyles = [{ color: \"red\" }, { color: undefined }]`\n * `const mergedStyles = StyleSheet.compose({ color: \"red\" }, { color: undefined })`\n * `const mergedStyles = StyleSheet.flatten([{ color: \"red\" }, { color: undefined }])`\n */\nexport function applyStyles(\n  baseStyles: Array<StyleProp<any>>,\n  stylesToApply: StyleProp<any> | undefined\n) {\n  if (!stylesToApply) {\n    return;\n  }\n\n  const flattenedStyles = StyleSheet.flatten(baseStyles);\n\n  for (const [key, value] of Object.entries(stylesToApply)) {\n    if (value != null) {\n      flattenedStyles[key] = value;\n    }\n  }\n\n  return flattenedStyles;\n}\n\nexport function getRealValue(value: any) {\n  // console.log(\"getRealValue typeof\", typeof value);\n  // console.log(\"getRealValue value\", value);\n  switch (typeof value) {\n    case \"string\":\n      return value;\n    case \"number\":\n      return String(value);\n    default:\n      return undefined;\n  }\n}\n"]}

package/lib/typescript/src/components/RadioButton/RadioButton.d.ts

@@ -7,7 +7,7 @@ export declare type RadioButtonProps = {
     color?: string;
     value?: string;
     unselectedColor?: string;
-    onPress?: () => void;
+    onPress?: (value: string) => void;
     style?: StyleProp<ViewStyle>;
     size?: number;
     selectedIcon?: string;

package/lib/typescript/src/components/RadioButton/RadioButtonGroup.d.ts

@@ -7,7 +7,7 @@ export interface RadioButtonGroupProps {
     style?: StyleProp<ViewStyle>;
     value?: string;
     onValueChange?: (value: string) => void;
-    defaultValue?: string;
+    defaultValue?: string | number;
     theme: Theme;
     children: React.ReactNode;
 }

package/lib/typescript/src/utilities.d.ts

@@ -16,3 +16,4 @@ export declare function extractStyles(style: StyleProp<any>): {
  * `const mergedStyles = StyleSheet.flatten([{ color: "red" }, { color: undefined }])`
  */
 export declare function applyStyles(baseStyles: Array<StyleProp<any>>, stylesToApply: StyleProp<any> | undefined): any;
+export declare function getRealValue(value: any): string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "43.4.4",
+  "version": "43.4.5-ccf125.1+ccf12583",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -80,5 +80,5 @@
       ]
     ]
   },
-  "gitHead": "39c758981f54b268cc4c58202f077287c99a2e91"
+  "gitHead": "ccf12583c8865a81ca50d7e0cd9e2057560f089b"
 }

package/src/components/RadioButton/RadioButton.js

@@ -1,16 +1,20 @@
 import * as React from "react";
 import Config from "../Config";
 import IconButton from "../IconButton";
+import { getRealValue } from "../../utilities";
 import { useRadioButtonGroupContext } from "./context";
-const RadioButton = ({ Icon, disabled = false, color, value, selected, unselectedColor, onPress = () => { }, size = Config.radioButtonSize, selectedIcon = "MaterialIcons/radio-button-checked", unselectedIcon = "MaterialIcons/radio-button-unchecked", style, ...rest }) => {
+const RadioButton = ({ Icon, disabled = false, color, value, selected, unselectedColor, onPress, size = Config.radioButtonSize, selectedIcon = "MaterialIcons/radio-button-checked", unselectedIcon = "MaterialIcons/radio-button-unchecked", style, ...rest }) => {
     const { value: contextValue, onValueChange } = useRadioButtonGroupContext();
+    const realValue = getRealValue(value);
+    const realContextValue = getRealValue(contextValue);
+    const isSelected = selected ??
+        (realContextValue && realValue && realContextValue === realValue);
     const handlePress = () => {
-        onPress && onPress();
-        if (onValueChange && value) {
-            onValueChange(value);
+        if (realValue) {
+            onPress?.(realValue);
+            onValueChange?.(realValue);
         }
     };
-    const isSelected = selected || (contextValue != null && contextValue === value);
     return (React.createElement(IconButton, { Icon: Icon, icon: isSelected ? selectedIcon : unselectedIcon, color: isSelected ? color : unselectedColor, disabled: disabled, onPress: handlePress, size: size, style: style, ...rest }));
 };
 export default RadioButton;

package/src/components/RadioButton/RadioButton.tsx

@@ -3,6 +3,7 @@ import { StyleProp, ViewStyle } from "react-native";
 
 import Config from "../Config";
 import IconButton from "../IconButton";
+import { getRealValue } from "../../utilities";
 import { useRadioButtonGroupContext } from "./context";
 
 import type { IconSlot } from "../../interfaces/Icon";
@@ -13,7 +14,7 @@ export type RadioButtonProps = {
   color?: string;
   value?: string;
   unselectedColor?: string;
-  onPress?: () => void;
+  onPress?: (value: string) => void;
   style?: StyleProp<ViewStyle>;
   size?: number;
   selectedIcon?: string;
@@ -27,7 +28,7 @@ const RadioButton: React.FC<RadioButtonProps> = ({
   value,
   selected,
   unselectedColor,
-  onPress = () => {},
+  onPress,
   size = Config.radioButtonSize,
   selectedIcon = "MaterialIcons/radio-button-checked",
   unselectedIcon = "MaterialIcons/radio-button-unchecked",
@@ -36,17 +37,19 @@ const RadioButton: React.FC<RadioButtonProps> = ({
 }) => {
   const { value: contextValue, onValueChange } = useRadioButtonGroupContext();
 
-  const handlePress = () => {
-    onPress && onPress();
+  const realValue = getRealValue(value);
+  const realContextValue = getRealValue(contextValue);
+  const isSelected =
+    selected ??
+    (realContextValue && realValue && realContextValue === realValue);
 
-    if (onValueChange && value) {
-      onValueChange(value);
+  const handlePress = () => {
+    if (realValue) {
+      onPress?.(realValue);
+      onValueChange?.(realValue);
     }
   };
 
-  const isSelected =
-    selected || (contextValue != null && contextValue === value);
-
   return (
     <IconButton
       Icon={Icon}

package/src/components/RadioButton/RadioButtonGroup.js

@@ -1,22 +1,28 @@
 import * as React from "react";
 import { View } from "react-native";
+import { getRealValue } from "../../utilities";
 import { radioButtonGroupContext, Direction } from "./context";
 const { Provider } = radioButtonGroupContext;
-const RadioButtonGroup = ({ direction = Direction.Vertical, value, onValueChange = () => { }, defaultValue, style, children, ...rest }) => {
-    const [internalValue, setInternalValue] = React.useState(value || defaultValue);
+const RadioButtonGroup = ({ direction = Direction.Vertical, value, onValueChange, defaultValue, style, children, ...rest }) => {
+    const [internalValue, setInternalValue] = React.useState();
     React.useEffect(() => {
-        if (value != null) {
-            setInternalValue(value);
+        const realValue = getRealValue(value);
+        if (realValue) {
+            setInternalValue(realValue);
         }
     }, [value]);
     React.useEffect(() => {
-        if (defaultValue != null) {
-            setInternalValue(defaultValue);
+        const realDefaultValue = getRealValue(defaultValue);
+        if (realDefaultValue) {
+            setInternalValue(realDefaultValue);
         }
     }, [defaultValue]);
     const handleValueChange = (newValue) => {
-        setInternalValue(newValue);
-        onValueChange(newValue);
+        const realNewValue = getRealValue(newValue);
+        if (realNewValue) {
+            setInternalValue(newValue);
+            onValueChange?.(newValue);
+        }
     };
     const _containerStyle = [
         {

package/src/components/RadioButton/RadioButtonGroup.tsx

@@ -1,13 +1,14 @@
 import * as React from "react";
 import { View, StyleProp, ViewStyle } from "react-native";
 import type { Theme } from "../../styles/DefaultTheme";
+import { getRealValue } from "../../utilities";
 import { radioButtonGroupContext, Direction } from "./context";
 export interface RadioButtonGroupProps {
   direction?: Direction;
   style?: StyleProp<ViewStyle>;
   value?: string;
   onValueChange?: (value: string) => void;
-  defaultValue?: string;
+  defaultValue?: string | number;
   theme: Theme;
   children: React.ReactNode;
 }
@@ -17,31 +18,39 @@ const { Provider } = radioButtonGroupContext;
 const RadioButtonGroup: React.FC<RadioButtonGroupProps> = ({
   direction = Direction.Vertical,
   value,
-  onValueChange = () => {},
+  onValueChange,
   defaultValue,
   style,
   children,
   ...rest
 }) => {
-  const [internalValue, setInternalValue] = React.useState<string | undefined>(
-    value || defaultValue
-  );
+  const [internalValue, setInternalValue] = React.useState<
+    string | undefined
+  >();
 
   React.useEffect(() => {
-    if (value != null) {
-      setInternalValue(value);
+    const realValue = getRealValue(value);
+
+    if (realValue) {
+      setInternalValue(realValue);
     }
   }, [value]);
 
   React.useEffect(() => {
-    if (defaultValue != null) {
-      setInternalValue(defaultValue);
+    const realDefaultValue = getRealValue(defaultValue);
+
+    if (realDefaultValue) {
+      setInternalValue(realDefaultValue);
     }
   }, [defaultValue]);
 
-  const handleValueChange = (newValue: string) => {
-    setInternalValue(newValue);
-    onValueChange(newValue);
+  const handleValueChange = (newValue: any) => {
+    const realNewValue = getRealValue(newValue);
+
+    if (realNewValue) {
+      setInternalValue(newValue);
+      onValueChange?.(newValue);
+    }
   };
 
   const _containerStyle: StyleProp<ViewStyle> = [

package/src/components/RadioButton/RadioButtonRow.js

@@ -5,7 +5,7 @@ import Text from "../Text";
 import { useRadioButtonGroupContext } from "./context";
 import { Direction as GroupDirection } from "./context";
 import Touchable from "../Touchable";
-import { extractStyles } from "../../utilities";
+import { extractStyles, getRealValue } from "../../utilities";
 export var Direction;
 (function (Direction) {
     Direction["Row"] = "row";
@@ -22,19 +22,25 @@ const getRadioButtonAlignment = (parentDirection, direction) => {
         return "flex-end";
     }
 };
-const renderLabel = (value, labelStyle, textStyle) => {
-    if (typeof value === "string") {
-        return React.createElement(Text, { style: [labelStyle, textStyle] }, value);
+const renderLabel = (label, labelStyle, textStyle) => {
+    if (typeof label === "string") {
+        return React.createElement(Text, { style: [labelStyle, textStyle] }, label);
     }
     else {
-        return React.createElement(React.Fragment, null, value);
+        return React.createElement(React.Fragment, null, label);
     }
 };
-const RadioButtonRow = ({ Icon, label, value, color, unselectedColor, onPress = () => { }, labelContainerStyle, labelStyle, radioButtonStyle, direction = Direction.Row, selected, disabled, style, ...rest }) => {
+const RadioButtonRow = ({ Icon, label, value, color, unselectedColor, onPress, labelContainerStyle, labelStyle, radioButtonStyle, direction = Direction.Row, selected, disabled, style, ...rest }) => {
     const { value: contextValue, onValueChange, direction: parentDirection, } = useRadioButtonGroupContext();
+    const realValue = getRealValue(value);
+    const realContextValue = getRealValue(contextValue);
+    const isSelected = selected ??
+        (realContextValue && realValue && realContextValue === realValue);
     const handlePress = () => {
-        onPress(value);
-        onValueChange && onValueChange(value);
+        if (realValue) {
+            onPress?.(realValue);
+            onValueChange?.(realValue);
+        }
     };
     const { textStyles, viewStyles } = extractStyles(style);
     return (React.createElement(Touchable, { onPress: handlePress, style: [styles.mainParent, { flexDirection: direction }, viewStyles], disabled: disabled, ...rest },
@@ -49,7 +55,7 @@ const RadioButtonRow = ({ Icon, label, value, color, unselectedColor, onPress =
                 flex: 1,
                 alignItems: getRadioButtonAlignment(parentDirection, direction),
             } },
-            React.createElement(RadioButton, { Icon: Icon, selected: selected || (contextValue != null && contextValue === value), color: color, unselectedColor: unselectedColor, onPress: handlePress, style: radioButtonStyle }))));
+            React.createElement(RadioButton, { Icon: Icon, selected: isSelected ? true : false, value: realValue, color: color, unselectedColor: unselectedColor, style: radioButtonStyle }))));
 };
 const styles = StyleSheet.create({
     mainParent: {

package/src/components/RadioButton/RadioButtonRow.tsx

@@ -13,7 +13,7 @@ import { useRadioButtonGroupContext } from "./context";
 import type { IconSlot } from "../../interfaces/Icon";
 import { Direction as GroupDirection } from "./context";
 import Touchable from "../Touchable";
-import { extractStyles } from "../../utilities";
+import { extractStyles, getRealValue } from "../../utilities";
 
 export enum Direction {
   Row = "row",
@@ -22,7 +22,7 @@ export enum Direction {
 
 export interface RadioButtonRowProps extends Omit<RadioButtonProps, "onPress"> {
   label: string | React.ReactNode;
-  value: string; // A string that this radio button row represents when selected
+  value: string; // A string (or number that will be parsed String(number)) that this radio button row represents when selected
   color?: string;
   unselectedColor?: string;
   labelContainerStyle: StyleProp<ViewStyle>;
@@ -46,14 +46,14 @@ const getRadioButtonAlignment = (
 };
 
 const renderLabel = (
-  value: string | React.ReactNode,
+  label: string | React.ReactNode,
   labelStyle: StyleProp<TextStyle>,
   textStyle: StyleProp<TextStyle>
 ) => {
-  if (typeof value === "string") {
-    return <Text style={[labelStyle, textStyle]}>{value}</Text>;
+  if (typeof label === "string") {
+    return <Text style={[labelStyle, textStyle]}>{label}</Text>;
   } else {
-    return <>{value}</>;
+    return <>{label}</>;
   }
 };
 
@@ -63,7 +63,7 @@ const RadioButtonRow: React.FC<RadioButtonRowProps & IconSlot> = ({
   value,
   color,
   unselectedColor,
-  onPress = () => {},
+  onPress,
   labelContainerStyle,
   labelStyle,
   radioButtonStyle,
@@ -79,9 +79,17 @@ const RadioButtonRow: React.FC<RadioButtonRowProps & IconSlot> = ({
     direction: parentDirection,
   } = useRadioButtonGroupContext();
 
+  const realValue = getRealValue(value);
+  const realContextValue = getRealValue(contextValue);
+  const isSelected =
+    selected ??
+    (realContextValue && realValue && realContextValue === realValue);
+
   const handlePress = () => {
-    onPress(value);
-    onValueChange && onValueChange(value);
+    if (realValue) {
+      onPress?.(realValue);
+      onValueChange?.(realValue);
+    }
   };
 
   const { textStyles, viewStyles } = extractStyles(style);
@@ -112,12 +120,10 @@ const RadioButtonRow: React.FC<RadioButtonRowProps & IconSlot> = ({
       >
         <RadioButton
           Icon={Icon}
-          selected={
-            selected || (contextValue != null && contextValue === value)
-          }
+          selected={isSelected ? true : false}
+          value={realValue}
           color={color}
           unselectedColor={unselectedColor}
-          onPress={handlePress}
           style={radioButtonStyle}
         />
       </View>

package/src/utilities.js

@@ -40,3 +40,15 @@ export function applyStyles(baseStyles, stylesToApply) {
     }
     return flattenedStyles;
 }
+export function getRealValue(value) {
+    // console.log("getRealValue typeof", typeof value);
+    // console.log("getRealValue value", value);
+    switch (typeof value) {
+        case "string":
+            return value;
+        case "number":
+            return String(value);
+        default:
+            return undefined;
+    }
+}

package/src/utilities.ts

@@ -63,3 +63,16 @@ export function applyStyles(
 
   return flattenedStyles;
 }
+
+export function getRealValue(value: any) {
+  // console.log("getRealValue typeof", typeof value);
+  // console.log("getRealValue value", value);
+  switch (typeof value) {
+    case "string":
+      return value;
+    case "number":
+      return String(value);
+    default:
+      return undefined;
+  }
+}