@rn-components-dropdown/dropdown 1.0.0

package/dist/components/dropdown/Dropdown.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DropdownProps } from './interface/DropdownInterface';
+declare const DropdownComponent: <T, Mode extends "single" | "multi">(props: DropdownProps<T, Mode>) => React.JSX.Element;
+export default DropdownComponent;

package/dist/components/dropdown/Dropdown.js

@@ -0,0 +1,313 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable react-hooks/exhaustive-deps */
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const lodash_1 = __importDefault(require("lodash"));
+const AppText_1 = __importDefault(require("../text/AppText"));
+const Chip_1 = __importDefault(require("./components/chip/Chip"));
+const useDropdown_1 = __importDefault(require("./hooks/useDropdown"));
+const SvgButton_1 = __importDefault(require("../svgButton/SvgButton"));
+const DropdownStyle_1 = require("./DropdownStyle");
+const TextInput_1 = __importDefault(require("./components/input/TextInput"));
+const DropdownComponent = (props) => {
+    const { label, testID, iconStyle, renderItem, style = {}, subfixIcon, labelField, valueField, onChangeText, itemTextStyle, flatListProps, minHeight = 0, containerStyle, search = false, renderLeftIcon, multiSelectIcon, itemTestIDField, maxHeight = 300, inverted = true, renderRightIcon, backgroundColor, placeholderStyle, inputSearchStyle, searchPlaceholder, selectedTextStyle, renderInputSearch, iconColor = 'gray', accessibilityLabel, itemContainerStyle, labelContainer = {}, labelTextStyle = {}, selectedTextProps = {}, selectionType = 'single', activeColor = 'lightGray', keyboardAvoiding = true, dropdownPosition = 'auto', placeholder = 'Select item', itemAccessibilityLabelField, showsVerticalScrollIndicator = true, } = props;
+    const { styles, colors } = (0, DropdownStyle_1.useDropdownStyle)({});
+    const { ref, font, visible, refList, position, onSelect, listData, onSearch, onMeasure, searchText, showOrClose, scrollIndex, currentValue, onCheckPress, onClearPress, setSearchText, keyboardHeight, } = (0, useDropdown_1.default)({ ...props });
+    const renderRight = () => {
+        return renderRightIcon ? (renderRightIcon(visible)) : (<SvgButton_1.default icon={subfixIcon} onPress={showOrClose} style={react_native_1.StyleSheet.flatten([
+                iconStyle,
+                styles.icon,
+                { tintColor: iconColor },
+            ])}/>);
+    };
+    const _renderDropdown = () => {
+        const isSelected = currentValue && lodash_1.default.get(currentValue, valueField);
+        return (<react_native_1.TouchableWithoutFeedback testID={testID} accessible={!!accessibilityLabel} accessibilityLabel={accessibilityLabel} onPress={() => (selectionType === 'single' ? showOrClose() : null)}>
+        <react_native_1.View style={styles.dropdown}>
+          {renderLeftIcon?.(visible)}
+          {selectionType === 'single' ? (<AppText_1.default style={[
+                    styles.textItem,
+                    isSelected !== null ? selectedTextStyle : placeholderStyle,
+                    font(),
+                ]} {...selectedTextProps}>
+              {isSelected !== null
+                    ? lodash_1.default.get(currentValue, labelField)
+                    : placeholder}
+            </AppText_1.default>) : currentValue?.length === 0 ? (<AppText_1.default style={[styles.textItem, placeholderStyle, font()]} {...selectedTextProps}>
+              {placeholder}
+            </AppText_1.default>) : (<react_native_1.View style={styles.showMultiSelectContainer}>
+              <react_native_1.ScrollView showsVerticalScrollIndicator={false}>
+                <react_native_1.View style={styles.wraps}>
+                  {currentValue?.map?.((i) => (<Chip_1.default label={i.name} chipColor={'red'} textColor={'white'} key={i?.[valueField]} onClearPress={() => onClearPress(i)}/>))}
+                </react_native_1.View>
+              </react_native_1.ScrollView>
+            </react_native_1.View>)}
+          {renderRight()}
+        </react_native_1.View>
+      </react_native_1.TouchableWithoutFeedback>);
+    };
+    const renderRadio = (0, react_1.useCallback)((selected) => {
+        return (<react_native_1.View style={styles.itemIconContainer}>
+          {selected && <react_native_1.View style={styles.iconSubContainer}/>}
+        </react_native_1.View>);
+    }, [styles]);
+    const renderCheckItem = (0, react_1.useCallback)(({ item, index }) => {
+        const isSelected = lodash_1.default.some(currentValue, h => lodash_1.default.isEqual(lodash_1.default.get(h, valueField), lodash_1.default.get(item, valueField)));
+        return (<react_native_1.TouchableHighlight key={index.toString()} testID={lodash_1.default.get(item, itemTestIDField || labelField)} accessible={!!accessibilityLabel} accessibilityLabel={lodash_1.default.get(item, itemAccessibilityLabelField || labelField)} underlayColor={colors[activeColor]} onPress={() => onCheckPress(item)}>
+          <react_native_1.View style={react_native_1.StyleSheet.flatten([itemContainerStyle])}>
+            {renderItem ? (renderItem(item, isSelected)) : (<react_native_1.View style={styles.item}>
+                <SvgButton_1.default icon={multiSelectIcon} onPress={() => onCheckPress(item)} style={[
+                    styles.checkContainer,
+                    {
+                        backgroundColor: isSelected ? colors.gray : colors.white,
+                    },
+                ]}/>
+                <AppText_1.default style={react_native_1.StyleSheet.flatten([
+                    styles.textItem,
+                    itemTextStyle,
+                    font(),
+                ])}>
+                  {lodash_1.default.get(item, labelField)}
+                </AppText_1.default>
+              </react_native_1.View>)}
+          </react_native_1.View>
+        </react_native_1.TouchableHighlight>);
+    }, [
+        font,
+        colors,
+        styles,
+        labelField,
+        renderItem,
+        valueField,
+        activeColor,
+        currentValue,
+        itemTextStyle,
+        itemTestIDField,
+        accessibilityLabel,
+        itemContainerStyle,
+        itemAccessibilityLabelField,
+    ]);
+    const _renderItem = (0, react_1.useCallback)(({ item, index }) => {
+        const isSelected = currentValue && lodash_1.default.get(currentValue, valueField);
+        const selected = lodash_1.default.isEqual(lodash_1.default.get(item, valueField), isSelected);
+        lodash_1.default.assign(item, { _index: index });
+        return (<react_native_1.TouchableHighlight key={index.toString()} testID={lodash_1.default.get(item, itemTestIDField || labelField)} accessible={!!accessibilityLabel} accessibilityLabel={lodash_1.default.get(item, itemAccessibilityLabelField || labelField)} underlayColor={colors[activeColor]} onPress={() => onSelect(item)}>
+          <react_native_1.View style={react_native_1.StyleSheet.flatten([itemContainerStyle])}>
+            {renderItem ? (renderItem(item, selected)) : (<react_native_1.View style={styles.item}>
+                {renderRadio(selected)}
+                <AppText_1.default style={react_native_1.StyleSheet.flatten([
+                    styles.textItem,
+                    itemTextStyle,
+                    font(),
+                ])}>
+                  {lodash_1.default.get(item, labelField)}
+                </AppText_1.default>
+              </react_native_1.View>)}
+          </react_native_1.View>
+        </react_native_1.TouchableHighlight>);
+    }, [
+        font,
+        colors,
+        styles,
+        onSelect,
+        labelField,
+        renderItem,
+        valueField,
+        renderRadio,
+        activeColor,
+        currentValue,
+        itemTextStyle,
+        itemTestIDField,
+        accessibilityLabel,
+        itemContainerStyle,
+        itemAccessibilityLabelField,
+    ]);
+    const renderSearch = (0, react_1.useCallback)(() => {
+        if (search) {
+            if (renderInputSearch) {
+                return renderInputSearch(text => {
+                    if (onChangeText) {
+                        setSearchText(text);
+                        onChangeText(text);
+                    }
+                    onSearch(text);
+                });
+            }
+            else {
+                return (<TextInput_1.default value={searchText} autoCorrect={false} testID={testID + ' input'} placeholder={searchPlaceholder} placeholderTextColor={colors.black} style={[styles.input, inputSearchStyle]} accessibilityLabel={accessibilityLabel + ' input'} onChangeText={(e) => {
+                        if (onChangeText) {
+                            setSearchText(e);
+                            onChangeText(e);
+                        }
+                        onSearch(e);
+                    }}/>);
+            }
+        }
+        return null;
+    }, [
+        search,
+        testID,
+        colors,
+        styles,
+        onSearch,
+        searchText,
+        onChangeText,
+        inputSearchStyle,
+        renderInputSearch,
+        searchPlaceholder,
+        accessibilityLabel,
+    ]);
+    const _renderList = (0, react_1.useCallback)((isTopPosition) => {
+        const isInverted = !inverted ? false : isTopPosition;
+        const _renderListHelper = () => {
+            return (<react_native_1.FlatList ref={refList} data={listData} {...flatListProps} testID={testID + ' flatlist'} keyboardShouldPersistTaps="handled" onScrollToIndexFailed={scrollIndex} inverted={isTopPosition ? inverted : false} keyExtractor={(_item, index) => index.toString()} accessibilityLabel={accessibilityLabel + ' flatlist'} showsVerticalScrollIndicator={showsVerticalScrollIndicator} renderItem={selectionType === 'single' ? _renderItem : renderCheckItem}/>);
+        };
+        return (<react_native_1.TouchableWithoutFeedback>
+          <react_native_1.View style={styles.flexShrink}>
+            {isInverted && _renderListHelper()}
+            {renderSearch()}
+            {!isInverted && _renderListHelper()}
+          </react_native_1.View>
+        </react_native_1.TouchableWithoutFeedback>);
+    }, [
+        inverted,
+        styles,
+        testID,
+        listData,
+        scrollIndex,
+        renderSearch,
+        flatListProps,
+        renderCheckItem,
+        accessibilityLabel,
+        showsVerticalScrollIndicator,
+    ]);
+    const _renderModal = (0, react_1.useCallback)(() => {
+        if (visible && position) {
+            const { isFull, width, height, top, bottom, left } = position;
+            const onAutoPosition = () => {
+                if (keyboardHeight > 0) {
+                    return bottom < keyboardHeight + height;
+                }
+                return bottom < (search ? 150 : 100);
+            };
+            if (width && top && bottom) {
+                const styleVertical = {
+                    left: left,
+                    maxHeight: maxHeight,
+                    minHeight: minHeight,
+                };
+                const isTopPosition = dropdownPosition === 'auto'
+                    ? onAutoPosition()
+                    : dropdownPosition === 'top';
+                let keyboardStyle = {};
+                let extendHeight = !isTopPosition ? top : bottom;
+                if (keyboardAvoiding &&
+                    keyboardHeight > 0 &&
+                    isTopPosition &&
+                    dropdownPosition === 'auto') {
+                    extendHeight = keyboardHeight;
+                }
+                return (<react_native_1.Modal transparent visible={visible} statusBarTranslucent onRequestClose={showOrClose} supportedOrientations={['landscape', 'portrait']}>
+            <react_native_1.TouchableWithoutFeedback onPress={showOrClose}>
+              <react_native_1.View style={react_native_1.StyleSheet.flatten([
+                        styles.flex1,
+                        isFull && styles.styleContainerVertical,
+                        backgroundColor && { backgroundColor: backgroundColor },
+                        keyboardStyle,
+                    ])}>
+                <react_native_1.View style={react_native_1.StyleSheet.flatten([
+                        styles.flex1,
+                        !isTopPosition
+                            ? { paddingTop: extendHeight }
+                            : {
+                                justifyContent: 'flex-end',
+                                paddingBottom: extendHeight,
+                            },
+                        isFull && styles.fullScreen,
+                    ])}>
+                  <react_native_1.View style={react_native_1.StyleSheet.flatten([
+                        styles.container,
+                        isFull ? styles.styleHorizontal : styleVertical,
+                        {
+                            width,
+                        },
+                        containerStyle,
+                    ])}>
+                    {_renderList(isTopPosition)}
+                  </react_native_1.View>
+                </react_native_1.View>
+              </react_native_1.View>
+            </react_native_1.TouchableWithoutFeedback>
+          </react_native_1.Modal>);
+            }
+            return null;
+        }
+        return null;
+    }, [
+        search,
+        styles,
+        visible,
+        position,
+        maxHeight,
+        minHeight,
+        showOrClose,
+        _renderList,
+        keyboardHeight,
+        containerStyle,
+        backgroundColor,
+        dropdownPosition,
+        keyboardAvoiding,
+    ]);
+    const _renderLabel = (0, react_1.useCallback)(() => {
+        return label ? (<react_native_1.View style={[styles.labelContainer, labelContainer]}>
+        <AppText_1.default style={[styles.labelTextStyle, labelTextStyle]}>
+          {label}
+        </AppText_1.default>
+      </react_native_1.View>) : (<></>);
+    }, [label, labelContainer, labelTextStyle, styles]);
+    return (<react_native_1.View style={styles.mainContainer}>
+      {_renderLabel()}
+      <react_native_1.View ref={ref} onLayout={onMeasure} style={react_native_1.StyleSheet.flatten([styles.mainWrap, style])}>
+        {_renderDropdown()}
+        {_renderModal()}
+      </react_native_1.View>
+    </react_native_1.View>);
+};
+exports.default = DropdownComponent;

package/dist/components/dropdown/DropdownStyle.d.ts

@@ -0,0 +1,151 @@
+import { ThemeColors } from '../../interface/colors.interface';
+interface Props {
+    size?: number;
+    radioIconColor?: keyof ThemeColors;
+    checkIconColor?: keyof ThemeColors;
+}
+export declare const useDropdownStyle: (props: Props) => {
+    styles: {
+        mainContainer: {
+            width: "100%";
+        };
+        mainWrap: {
+            borderWidth: number;
+            borderRadius: number;
+            paddingHorizontal: number;
+            justifyContent: "center";
+            borderColor: string;
+        };
+        container: {
+            flexShrink: number;
+            borderWidth: number;
+            borderColor: string;
+            shadowColor: string;
+            backgroundColor: string;
+            shadowOffset: {
+                width: number;
+                height: number;
+            };
+            elevation: number;
+            shadowOpacity: number;
+            shadowRadius: number;
+        };
+        flex1: {
+            flex: number;
+        };
+        flexShrink: {
+            flexShrink: number;
+        };
+        wrapTop: {
+            justifyContent: "flex-end";
+        };
+        dropdown: {
+            minHeight: number;
+            maxHeight: number;
+            alignItems: "center";
+            justifyContent: "space-between";
+            flexDirection: "row" | "row-reverse";
+        };
+        title: {
+            fontSize: number;
+            marginVertical: number;
+            writingDirection: "ltr" | "rtl";
+        };
+        item: {
+            padding: number;
+            alignItems: "center";
+            borderBottomWidth: number;
+            borderColor: string;
+            justifyContent: "space-between";
+            flexDirection: "row" | "row-reverse";
+        };
+        textItem: {
+            flex: number;
+            fontSize: number;
+            writingDirection: "ltr" | "rtl";
+        };
+        icon: {
+            width: number;
+            height: number;
+        };
+        input: {
+            margin: number;
+            height: number;
+            borderWidth: number;
+            borderColor: string;
+            marginBottom: number;
+            paddingHorizontal: number;
+        };
+        fullScreen: {
+            alignItems: "center";
+            justifyContent: "center";
+        };
+        labelContainer: {
+            marginBottom: number;
+            paddingVertical: number;
+        };
+        labelTextStyle: {
+            color: string;
+        };
+        itemIconContainer: {
+            borderWidth: number;
+            marginRight: number;
+            borderRadius: number;
+            width: number;
+            height: number;
+            alignItems: "center";
+            justifyContent: "center";
+            padding: number;
+            borderColor: string;
+        };
+        iconSubContainer: {
+            width: "100%";
+            height: "100%";
+            borderRadius: number;
+            backgroundColor: string;
+        };
+        styleHorizontal: {
+            width: number | "100%";
+            alignSelf: "center";
+        };
+        styleContainerVertical: {
+            alignItems: "center";
+            backgroundColor: string;
+        };
+        checkContainer: {
+            borderWidth: number;
+            borderRadius: number;
+            marginRight: number;
+            width: number;
+            height: number;
+            alignItems: "center";
+            justifyContent: "center";
+            borderColor: string;
+        };
+        showMultiSelectContainer: {
+            width: "90%";
+            height: "auto";
+            maxHeight: number;
+        };
+        wraps: {
+            flexWrap: "wrap";
+            paddingVertical: number;
+            flexDirection: "row";
+            paddingHorizontal: number;
+        };
+    };
+    colors: {
+        blue: string;
+        gray: string;
+        error: string;
+        green: string;
+        white: string;
+        black: string;
+        primary: string;
+        lightGray: string;
+        grayishBlue: string;
+        red: string;
+        border: string;
+    };
+};
+export {};

package/dist/components/dropdown/DropdownStyle.js

@@ -0,0 +1,148 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDropdownStyle = void 0;
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const useOrientation_1 = require("./hooks/useOrientation");
+const style_1 = require("../../style");
+const useDropdownStyle = (props) => {
+    const orientation = (0, useOrientation_1.useDeviceOrientation)();
+    const { ...colors } = style_1.LIGHT_COLORS;
+    const { size = 16, radioIconColor, checkIconColor } = props;
+    const styles = (0, react_1.useMemo)(() => {
+        return react_native_1.StyleSheet.create({
+            mainContainer: {
+                width: '100%',
+            },
+            mainWrap: {
+                borderWidth: 1,
+                borderRadius: 6,
+                paddingHorizontal: 6,
+                justifyContent: 'center',
+                borderColor: colors.lightGray,
+            },
+            container: {
+                flexShrink: 1,
+                borderWidth: 0.5,
+                borderColor: '#EEEEEE',
+                shadowColor: colors.black,
+                backgroundColor: colors.white,
+                shadowOffset: {
+                    width: 0,
+                    height: 1,
+                },
+                elevation: 2,
+                shadowOpacity: 0.2,
+                shadowRadius: 1.41,
+            },
+            flex1: {
+                flex: 1,
+            },
+            flexShrink: {
+                flexShrink: 1,
+            },
+            wrapTop: {
+                justifyContent: 'flex-end',
+            },
+            dropdown: {
+                minHeight: 48,
+                maxHeight: 170,
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                flexDirection: react_native_1.I18nManager.isRTL ? 'row-reverse' : 'row',
+            },
+            title: {
+                fontSize: 16,
+                marginVertical: style_1.SPACING.s6,
+                writingDirection: react_native_1.I18nManager.isRTL ? 'rtl' : 'ltr',
+            },
+            item: {
+                padding: 17,
+                alignItems: 'center',
+                borderBottomWidth: 0.5,
+                borderColor: colors.lightGray,
+                justifyContent: 'space-between',
+                flexDirection: react_native_1.I18nManager.isRTL ? 'row-reverse' : 'row',
+            },
+            textItem: {
+                flex: 1,
+                fontSize: 16,
+                writingDirection: react_native_1.I18nManager.isRTL ? 'rtl' : 'ltr',
+            },
+            icon: {
+                width: 20,
+                height: 20,
+            },
+            input: {
+                margin: 6,
+                height: 45,
+                borderWidth: 0.5,
+                borderColor: '#DDDDDD',
+                marginBottom: style_1.SPACING.s8,
+                paddingHorizontal: style_1.SPACING.s8,
+            },
+            fullScreen: {
+                alignItems: 'center',
+                justifyContent: 'center',
+            },
+            labelContainer: {
+                marginBottom: style_1.SPACING.s6,
+                paddingVertical: style_1.SPACING.s6,
+            },
+            labelTextStyle: {
+                color: colors.black,
+            },
+            itemIconContainer: {
+                borderWidth: 2,
+                marginRight: 10,
+                borderRadius: 100,
+                width: size || 24,
+                height: size || 24,
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: (size || 24) / 8,
+                borderColor: radioIconColor || colors.gray,
+            },
+            iconSubContainer: {
+                width: '100%',
+                height: '100%',
+                borderRadius: 100,
+                backgroundColor: radioIconColor || colors.gray,
+            },
+            styleHorizontal: {
+                width: orientation === 'LANDSCAPE' ? style_1.SCREEN_WIDTH / 2 : '100%',
+                alignSelf: 'center',
+            },
+            styleContainerVertical: {
+                alignItems: 'center',
+                backgroundColor: style_1.DEFAULT_COLORS.blackOpacity,
+            },
+            checkContainer: {
+                borderWidth: 2,
+                borderRadius: 2,
+                marginRight: 10,
+                width: size || 16,
+                height: size || 16,
+                alignItems: 'center',
+                justifyContent: 'center',
+                borderColor: checkIconColor ? checkIconColor : colors.gray,
+            },
+            showMultiSelectContainer: {
+                width: '90%',
+                height: 'auto',
+                maxHeight: 200,
+            },
+            wraps: {
+                flexWrap: 'wrap',
+                paddingVertical: 6,
+                flexDirection: 'row',
+                paddingHorizontal: 10,
+            },
+        });
+    }, [size, colors, orientation, radioIconColor, checkIconColor]);
+    return {
+        styles,
+        colors,
+    };
+};
+exports.useDropdownStyle = useDropdownStyle;

package/dist/components/dropdown/components/chip/Chip.d.ts

@@ -0,0 +1,3 @@
+import { ChipInterface } from '../../interface/ChipInterface';
+declare const Chip: (props: ChipInterface) => import("react").JSX.Element;
+export default Chip;

package/dist/components/dropdown/components/chip/Chip.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_native_1 = require("react-native");
+const ChipStyle_1 = __importDefault(require("./ChipStyle"));
+const AppText_1 = __importDefault(require("../../../text/AppText"));
+const SvgButton_1 = __importDefault(require("../../../svgButton/SvgButton"));
+const Chip = (props) => {
+    const { styles } = (0, ChipStyle_1.default)({ ...props });
+    const { label, onClearPress, textColor, clearIcon } = props;
+    return (<react_native_1.View style={styles.box}>
+      <AppText_1.default size={12} fontFamily={'semiBold'} style={styles.chipText} color={textColor ? textColor : 'gray'}>
+        {label}
+      </AppText_1.default>
+      <react_native_1.View style={styles.clearContainer}>
+        <SvgButton_1.default icon={clearIcon} onPress={onClearPress} style={styles.clearIcon}/>
+      </react_native_1.View>
+    </react_native_1.View>);
+};
+exports.default = Chip;