@draftbit/core 44.2.0 → 44.2.1-fb9884.1

package/lib/module/utilities.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utilities.ts"],"names":["StyleSheet","isString","isNumber","extractStyles","style","color","fontFamily","fontWeight","fontSize","lineHeight","letterSpacing","textTransform","textAlign","textDecorationLine","textDecorationColor","textDecorationStyle","viewStyles","flatten","textStyles","applyStyles","baseStyles","stylesToApply","flattenedStyles","key","value","Object","entries","getValueForRadioButton","String","Error"],"mappings":"AAAA,SAASA,UAAT,QAAiD,cAAjD;AACA,SAASC,QAAT,EAAmBC,QAAnB,QAAmC,QAAnC;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,MAaFhB,UAAU,CAACiB,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,GAAGtB,UAAU,CAACiB,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,sBAAT,CAAgCH,KAAhC,EAAwD;AAC7D,MAAIvB,QAAQ,CAACuB,KAAD,CAAZ,EAAqB;AACnB,WAAOA,KAAP;AACD,GAFD,MAEO,IAAItB,QAAQ,CAACsB,KAAD,CAAZ,EAAqB;AAC1B,WAAOI,MAAM,CAACJ,KAAD,CAAb;AACD,GAFM,MAEA;AACL,UAAM,IAAIK,KAAJ,CAAW,kBAAiBL,KAAM,EAAlC,CAAN;AACD;AACF","sourcesContent":["import { StyleSheet, StyleProp, TextStyle } from \"react-native\";\nimport { isString, isNumber } from \"lodash\";\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 getValueForRadioButton(value: string | number) {\n  if (isString(value)) {\n    return value;\n  } else if (isNumber(value)) {\n    return String(value);\n  } else {\n    throw new Error(`Invalid value: ${value}`);\n  }\n}\n"]}
+{"version":3,"sources":["utilities.ts"],"names":["StyleSheet","isString","isNumber","pick","pickBy","identity","extractStyles","style","color","fontFamily","fontWeight","fontSize","lineHeight","letterSpacing","textTransform","textAlign","textDecorationLine","textDecorationColor","textDecorationStyle","viewStyles","flatten","textStyles","borderStyleNames","marginStyleNames","extractBorderAndMarginStyles","additionalBorderStyles","additionalMarginStyles","flatStyle","borderStyles","marginStyles","applyStyles","baseStyles","stylesToApply","flattenedStyles","key","value","Object","entries","getValueForRadioButton","String","Error"],"mappings":"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","sourcesContent":["import { StyleSheet, StyleProp, TextStyle } from \"react-native\";\nimport { isString, isNumber, pick, pickBy, identity } from \"lodash\";\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\nexport const borderStyleNames = [\n  \"borderRadius\",\n  \"borderBottomColor\",\n  \"borderBottomEndRadius\",\n  \"borderBottomLeftRadius\",\n  \"borderBottomRightRadius\",\n  \"borderBottomStartRadius\",\n  \"borderBottomWidth\",\n  \"borderColor\",\n  \"borderEndColor\",\n  \"borderLeftColor\",\n  \"borderLeftWidth\",\n  \"borderRadius\",\n  \"borderRightColor\",\n  \"borderRightWidth\",\n  \"borderStartColor\",\n  \"borderStyle\",\n  \"borderTopColor\",\n  \"borderTopEndRadius\",\n  \"borderTopLeftRadius\",\n  \"borderTopRightRadius\",\n  \"borderTopStartRadius\",\n  \"borderTopWidth\",\n  \"borderWidth\",\n];\n\nexport const marginStyleNames = [\n  \"margin\",\n  \"marginBottom\",\n  \"marginEnd\",\n  \"marginHorizontal\",\n  \"marginLeft\",\n  \"marginRight\",\n  \"marginStart\",\n  \"marginTop\",\n  \"marginVertical\",\n];\n\nexport function extractBorderAndMarginStyles(\n  style: StyleProp<any>,\n  additionalBorderStyles?: string[],\n  additionalMarginStyles?: string[]\n) {\n  const flatStyle = StyleSheet.flatten(style || {});\n\n  const borderStyles = pickBy(\n    pick(flatStyle, [\n      ...borderStyleNames,\n      ...(additionalBorderStyles ? additionalBorderStyles : []),\n    ]),\n    identity\n  );\n\n  const marginStyles = pickBy(\n    pick(flatStyle, [\n      ...marginStyleNames,\n      ...(additionalMarginStyles ? additionalMarginStyles : []),\n    ]),\n    identity\n  );\n\n  return { borderStyles, marginStyles };\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 getValueForRadioButton(value: string | number) {\n  if (isString(value)) {\n    return value;\n  } else if (isNumber(value)) {\n    return String(value);\n  } else {\n    throw new Error(`Invalid value: ${value}`);\n  }\n}\n"]}

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

@@ -1,11 +1,35 @@
 import * as React from "react";
-import { PickerComponentProps, PickerOption } from "./PickerTypes";
-declare type Props = PickerComponentProps & {
+import { ViewStyle, StyleProp } from "react-native";
+import type { Theme } from "../../styles/DefaultTheme";
+import type { IconSlot } from "../../interfaces/Icon";
+export interface PickerOption {
+    value: string;
+    label: string;
+}
+export declare type PickerProps = {
+    error?: any;
     placeholder?: string;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle> & {
+        height?: number;
+    };
     value?: string;
     options: PickerOption[] | string[];
+    onValueChange: (value: string, index: number) => void;
+    defaultValue?: string;
+    assistiveText?: string;
+    label?: string;
+    iconColor?: string;
+    iconSize?: number;
+    leftIconMode?: "inset" | "outset";
+    leftIconName?: string;
+    placeholderTextColor?: string;
+    rightIconName?: string;
+    type?: "solid" | "underline";
+    theme: Theme;
+    Icon: IconSlot["Icon"];
 };
-declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<Props, "theme"> & {
+declare const _default: React.ComponentType<import("@draftbit/react-theme-provider").$Without<PickerProps, "theme"> & {
     theme?: import("@draftbit/react-theme-provider").$DeepPartial<any> | undefined;
-}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<Props> & React.FC<Props>, {}>;
+}> & import("@draftbit/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<PickerProps> & React.FC<PickerProps>, {}>;
 export default _default;

package/lib/typescript/src/mappings/Picker.d.ts

@@ -18,6 +18,27 @@ export declare const SEED_DATA: {
             required: boolean;
             group: string;
         };
+        iconSize: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            formType: string;
+            propType: string;
+            defaultValue: number;
+            options: number[];
+        };
+        iconColor: {
+            group: string;
+            label: string;
+            description: string;
+            editable: boolean;
+            required: boolean;
+            defaultValue: null;
+            formType: string;
+            propType: string;
+        };
         label: {
             group: string;
             label: string;

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

@@ -1,8 +1,15 @@
+/// <reference types="lodash" />
 import { StyleProp, TextStyle } from "react-native";
 export declare function extractStyles(style: StyleProp<any>): {
     viewStyles: any;
     textStyles: TextStyle;
 };
+export declare const borderStyleNames: string[];
+export declare const marginStyleNames: string[];
+export declare function extractBorderAndMarginStyles(style: StyleProp<any>, additionalBorderStyles?: string[], additionalMarginStyles?: string[]): {
+    borderStyles: import("lodash").Dictionary<any>;
+    marginStyles: import("lodash").Dictionary<any>;
+};
 /**
  * Merges a style object on top of another style object. In React Native,
  * keys with undefined values in a style object will still override styles

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbit/core",
-  "version": "44.2.0",
+  "version": "44.2.1-fb9884.1+fb9884b5",
   "description": "Core (non-native) Components",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
@@ -44,8 +44,8 @@
     "@draftbit/types": "^44.1.12",
     "@material-ui/core": "^4.11.0",
     "@material-ui/pickers": "^3.2.10",
-    "@react-native-community/slider": "4.1.7",
-    "@react-native-picker/picker": "^2.1.0",
+    "@react-native-community/slider": "4.1.12",
+    "@react-native-picker/picker": "2.2.1",
     "color": "^3.1.2",
     "date-fns": "^2.16.1",
     "dateformat": "^3.0.3",
@@ -54,10 +54,9 @@
     "lodash.tonumber": "^4.0.3",
     "react-native-modal-datetime-picker": "^13.0.0",
     "react-native-typography": "^1.4.1",
-    "react-native-web-swiper": "^2.2.1"
+    "react-native-web-swiper": "^2.2.3"
   },
   "devDependencies": {
-    "@react-native-picker/picker": "^2.1.0",
     "@types/color": "^3.0.1",
     "@types/dateformat": "^3.0.1",
     "@types/lodash.isnumber": "^3.0.6",
@@ -79,5 +78,5 @@
       ]
     ]
   },
-  "gitHead": "9af2da0c63f291d4707dcd340e2ca03f7cf8e0b1"
+  "gitHead": "fb9884b5b85705433b90996212756f37c2d70f19"
 }

package/src/components/Picker/Picker.js

@@ -1,29 +1,47 @@
 import * as React from "react";
+import { View, StyleSheet, Text, Platform, Dimensions, } from "react-native";
+import { omit, pickBy, identity, isObject } from "lodash";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { Picker as NativePicker } from "@react-native-picker/picker";
 import { withTheme } from "../../theming";
-//@ts-ignore
-import PickerComponent from "./PickerComponent"; //unable to find file due to using .android/.web/.ios
+import Portal from "../Portal/Portal";
+import Button from "../DeprecatedButton";
+import Touchable from "../Touchable";
+import { extractStyles, extractBorderAndMarginStyles, borderStyleNames, marginStyleNames, } from "../../utilities";
 function normalizeOptions(options) {
     if (options.length === 0) {
         return [];
     }
-    if (typeof options[0] === "string") {
+    if (typeof options[0] === ("string" || "number")) {
         return options.map((option) => ({
-            label: option,
+            label: String(option),
             value: String(option),
         }));
     }
-    if (options[0].label && options[0].value) {
+    if (isObject(options[0]) &&
+        options[0].value !== null &&
+        options[0].label !== null) {
         return options.map((option) => {
             return {
-                label: option.label,
+                label: String(option.label),
                 value: String(option.value),
             };
         });
     }
     throw new Error('Picker options must be either an array of strings or array of { "label": string; "value": string; } objects.');
 }
-const Picker = ({ options = [], placeholder, onValueChange: onValueChangeOverride, value, defaultValue, ...props }) => {
+const { width: deviceWidth, height: deviceHeight } = Dimensions.get("screen");
+const isIos = Platform.OS === "ios";
+const unstyledColor = "rgba(165, 173, 183, 1)";
+const disabledColor = "rgb(240, 240, 240)";
+const errorColor = "rgba(255, 69, 100, 1)";
+const Picker = ({ error, options = [], onValueChange, defaultValue, Icon, style, placeholder, value, disabled = false, theme, assistiveText, label, iconColor = unstyledColor, iconSize = 24, leftIconMode = "inset", leftIconName, placeholderTextColor = unstyledColor, rightIconName, type = "solid", }) => {
+    const androidPickerRef = React.useRef(undefined);
     const [internalValue, setInternalValue] = React.useState(value || defaultValue);
+    const [pickerVisible, setPickerVisible] = React.useState(false);
+    const togglePickerVisible = () => {
+        setPickerVisible(!pickerVisible);
+    };
     React.useEffect(() => {
         if (value != null) {
             setInternalValue(value);
@@ -34,23 +52,215 @@ const Picker = ({ options = [], placeholder, onValueChange: onValueChangeOverrid
             setInternalValue(defaultValue);
         }
     }, [defaultValue]);
-    const onValueChange = React.useCallback((itemValue, itemIndex) => {
-        if (placeholder && itemIndex === 0) {
-            return;
+    React.useEffect(() => {
+        if (pickerVisible && androidPickerRef.current) {
+            androidPickerRef?.current?.focus();
         }
-        onValueChangeOverride &&
-            onValueChangeOverride(String(itemValue), itemIndex);
-    }, [placeholder, onValueChangeOverride]);
+    }, [pickerVisible, androidPickerRef]);
     const normalizedOptions = normalizeOptions(options);
     const pickerOptions = placeholder
         ? [{ value: placeholder, label: placeholder }, ...normalizedOptions]
         : normalizedOptions;
+    const { colors } = theme;
+    const { viewStyles, textStyles } = extractStyles(style);
+    const additionalBorderStyles = ["backgroundColor"];
+    const additionalMarginStyles = [
+        "bottom",
+        "height",
+        "left",
+        "maxHeight",
+        "maxWidth",
+        "minHeight",
+        "minWidth",
+        "overflow",
+        "position",
+        "right",
+        "top",
+        "width",
+        "zIndex",
+    ];
+    const { borderStyles: extractedBorderStyles, marginStyles: extractedMarginStyles, } = extractBorderAndMarginStyles(viewStyles, additionalBorderStyles, additionalMarginStyles);
+    const borderStyles = {
+        ...{
+            ...(type === "solid"
+                ? {
+                    borderTopLeftRadius: 5,
+                    borderTopRightRadius: 5,
+                    borderBottomRightRadius: 5,
+                    borderBottomLeftRadius: 5,
+                    borderTopWidth: 1,
+                    borderRightWidth: 1,
+                    borderLeftWidth: 1,
+                }
+                : {}),
+            borderBottomWidth: 1,
+            borderColor: unstyledColor,
+            borderStyle: "solid",
+        },
+        ...extractedBorderStyles,
+        ...(error ? { borderColor: errorColor } : {}),
+        ...(disabled
+            ? { borderColor: "transparent", backgroundColor: disabledColor }
+            : {}),
+    };
+    const marginStyles = {
+        height: 60,
+        ...extractedMarginStyles,
+    };
+    const stylesWithoutBordersAndMargins = omit(viewStyles, [
+        ...borderStyleNames,
+        ...marginStyleNames,
+        ...additionalBorderStyles,
+        ...additionalMarginStyles,
+    ]);
+    const selectedLabel = internalValue &&
+        (pickerOptions.find((option) => option.value === internalValue)?.label ??
+            internalValue);
+    const labelText = label ? (React.createElement(Text, { style: {
+            textAlign: textStyles.textAlign,
+            color: unstyledColor,
+            fontSize: 12,
+            paddingBottom: 4,
+        } }, label)) : null;
+    const leftIconOutset = leftIconMode === "outset";
+    const leftIcon = leftIconName ? (React.createElement(Icon, { name: leftIconName, color: disabled ? unstyledColor : iconColor, size: iconSize, style: {
+            marginRight: 4,
+            marginLeft: 4,
+        } })) : null;
+    const rightIcon = rightIconName ? (React.createElement(Icon, { name: rightIconName, color: disabled ? unstyledColor : iconColor, size: iconSize, style: {
+            marginRight: -10,
+            marginLeft: 8,
+        } })) : null;
+    const textAlign = textStyles?.textAlign;
+    const calculateLeftPadding = () => {
+        if (leftIconOutset) {
+            if (textAlign === "center") {
+                return iconSize - Math.abs(8 - iconSize);
+            }
+            return iconSize + 8;
+        }
+        return 0;
+    };
+    const assistiveTextLabel = assistiveText ? (React.createElement(Text, { style: {
+            textAlign,
+            width: "100%",
+            paddingLeft: calculateLeftPadding(),
+            color: unstyledColor,
+            fontSize: 12,
+            paddingTop: 4,
+        } }, assistiveText)) : null;
+    const primaryTextStyle = {
+        color: unstyledColor,
+        fontSize: 14,
+        ...pickBy(textStyles, identity),
+        ...(placeholder === internalValue ? { color: placeholderTextColor } : {}),
+        ...(disabled ? { color: unstyledColor } : {}),
+    };
     const handleValueChange = (newValue, itemIndex) => {
-        setInternalValue(newValue);
-        if (onValueChange) {
-            onValueChange(newValue, itemIndex);
+        if (!placeholder || itemIndex > 0) {
+            onValueChange?.(newValue, itemIndex);
         }
+        setInternalValue(newValue);
     };
-    return (React.createElement(PickerComponent, { ...props, selectedValue: String(internalValue), placeholder: placeholder, options: pickerOptions, onValueChange: handleValueChange }));
+    return (
+    /* marginsContainer */
+    React.createElement(View, { style: [styles.marginsContainer, marginStyles] },
+        React.createElement(Touchable, { disabled: disabled, onPress: togglePickerVisible, style: styles.touchableContainer },
+            React.createElement(View, { pointerEvents: "none", style: [
+                    styles.outsetContainer,
+                    stylesWithoutBordersAndMargins,
+                    !leftIconOutset ? borderStyles : {},
+                ] },
+                leftIcon,
+                React.createElement(View, { style: [
+                        styles.insetContainer,
+                        leftIconOutset ? borderStyles : {},
+                    ] },
+                    React.createElement(View, { style: styles.primaryTextContainer },
+                        labelText,
+                        React.createElement(Text, { style: primaryTextStyle }, String(selectedLabel ?? placeholder))),
+                    rightIcon)),
+            assistiveTextLabel),
+        isIos && pickerVisible ? (React.createElement(Portal, null,
+            React.createElement(View, { style: [
+                    styles.iosPicker,
+                    {
+                        backgroundColor: colors.divider,
+                    },
+                ] },
+                React.createElement(SafeAreaView, { style: styles.iosSafeArea },
+                    React.createElement(Button, { Icon: Icon, type: "text", onPress: togglePickerVisible, style: styles.iosButton }, "Close"),
+                    React.createElement(NativePicker, { style: styles.iosNativePicker, selectedValue: internalValue, onValueChange: handleValueChange }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value })))))))) : null,
+        !isIos && pickerVisible ? (React.createElement(NativePicker, { enabled: pickerVisible, selectedValue: internalValue, onValueChange: handleValueChange, style: styles.nonIosPicker, ref: androidPickerRef, onBlur: () => setPickerVisible(false) }, pickerOptions.map((option) => (React.createElement(NativePicker.Item, { label: option.label, value: option.value, key: option.value }))))) : null));
 };
 export default withTheme(Picker);
+const styles = StyleSheet.create({
+    marginsContainer: {
+        alignSelf: "stretch",
+        alignItems: "center",
+        width: "100%",
+        maxWidth: deviceWidth,
+    },
+    touchableContainer: {
+        flex: 1,
+        height: "100%",
+        width: "100%",
+        alignSelf: "stretch",
+        alignItems: "center",
+    },
+    outsetContainer: {
+        flex: 1,
+        height: "100%",
+        width: "100%",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+    },
+    insetContainer: {
+        flex: 1,
+        height: "100%",
+        width: "100%",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingLeft: 12,
+        paddingRight: 12,
+    },
+    primaryTextContainer: {
+        flex: 1,
+    },
+    iosPicker: {
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        flexDirection: "row",
+        justifyContent: "center",
+        width: "100%",
+        maxWidth: deviceWidth,
+        maxHeight: deviceHeight,
+    },
+    iosSafeArea: {
+        backgroundColor: "white",
+        flexDirection: "column",
+        width: "100%",
+        maxWidth: deviceWidth,
+    },
+    iosButton: {
+        alignSelf: "flex-end",
+    },
+    iosNativePicker: {
+        backgroundColor: "white",
+    },
+    nonIosPicker: {
+        opacity: 0,
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        width: "100%",
+        maxWidth: deviceWidth,
+        maxHeight: deviceHeight,
+    },
+});