@janiscommerce/ui-native 1.0.4 → 1.1.0

package/dist/components/Icon/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+interface Props {
+    name: string;
+    color?: string;
+    size?: number;
+}
+declare const Icon: FC<Props>;
+export default Icon;

package/dist/components/Icon/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
+import icoMoonConfig from './assets/fonts/selection.json';
+import { primary } from '../../theme/palette';
+const IconComponent = createIconSetFromIcoMoon(icoMoonConfig, 'janis-font-icon', 'janis-font-icon.ttf');
+const Icon = ({ name, color = primary.main, size = 16, ...props }) => {
+    if (!name) {
+        return null;
+    }
+    return <IconComponent name={name} color={color} size={size} {...props}/>;
+};
+export default Icon;

package/dist/components/Select/Components/Dropdown/index.d.ts

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { CustomOptionComponent, Option } from '../..';
+interface DropdownProps {
+    isShowedDropdown: boolean;
+    filteredOptions: Option[];
+    selectedOptions: Option[];
+    noOptionsMessage: string;
+    optionStyles?: {};
+    callbackOption: (option: Option) => void;
+    customOptionComponent?: CustomOptionComponent | null;
+}
+declare const Dropdown: FC<DropdownProps>;
+export default Dropdown;

package/dist/components/Select/Components/Dropdown/index.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity, ScrollView, Text } from 'react-native';
+import { base, black, grey, primary, white } from '../../../../theme/palette';
+const Dropdown = (props) => {
+    const { isShowedDropdown, filteredOptions, callbackOption, selectedOptions, noOptionsMessage, optionStyles, customOptionComponent = null, } = props;
+    if (!isShowedDropdown) {
+        return null;
+    }
+    const handleSelectedOption = (option) => callbackOption(option);
+    const styles = StyleSheet.create({
+        container: {
+            width: '100%',
+            padding: 8,
+        },
+        optionWrapper: {
+            position: 'absolute',
+            maxHeight: 168,
+            borderColor: grey[200],
+            backgroundColor: base.white,
+            width: '100%',
+            top: 60,
+            marginBottom: 20,
+            elevation: 5,
+            zIndex: 10,
+            flex: 1,
+        },
+        option: {
+            width: '100%',
+            height: 42,
+            justifyContent: 'center',
+            alignItems: 'stretch',
+            paddingLeft: 8,
+        },
+        optionText: {
+            color: black.main,
+            fontWeight: '400',
+        },
+        noOptionText: {
+            color: grey[500],
+            fontWeight: '400',
+            paddingLeft: 8,
+            paddingVertical: 10,
+        },
+    });
+    const renderOptions = filteredOptions?.length &&
+        filteredOptions.map((option) => {
+            const isSelectedOption = selectedOptions.some((selected) => selected.label === option.label);
+            const styleText = { ...styles.optionText, ...(isSelectedOption && { color: primary.main }) };
+            const styleOption = {
+                ...styles.option,
+                ...(isSelectedOption && { backgroundColor: white.light }),
+            };
+            const customProps = {
+                renderedOption: option,
+                filteredOptions,
+                selectedOptions,
+                callbackOptionSelected: callbackOption,
+            };
+            if (customOptionComponent) {
+                return customOptionComponent(customProps);
+            }
+            return (<TouchableOpacity style={{ ...styleOption, ...optionStyles }} key={option.label} onPress={() => handleSelectedOption(option)}>
+					<Text style={styleText}> {option.label}</Text>
+				</TouchableOpacity>);
+        });
+    const noRenderOptions = (<View aria-disabled>
+			<Text style={styles.noOptionText}> {noOptionsMessage}</Text>
+		</View>);
+    return (<ScrollView style={styles.optionWrapper} contentContainerStyle={styles.container}>
+			{filteredOptions?.length ? renderOptions : noRenderOptions}
+		</ScrollView>);
+};
+export default Dropdown;

package/dist/components/Select/Components/Icons/Chevron/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+interface IconProps {
+    color?: string;
+    size?: number;
+    iconStyles?: {};
+    style?: ViewStyle;
+    onPress?: () => void;
+}
+declare const Chevron: {
+    ({ style, color, size, onPress, ...props }: IconProps): React.JSX.Element;
+    defaultProps: {
+        color: string;
+        size: number;
+        onPress: () => void;
+    };
+};
+export default Chevron;

package/dist/components/Select/Components/Icons/Chevron/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+import { primary } from '../../../../../theme/palette';
+import Svg, { Path } from 'react-native-svg';
+const Chevron = ({ style, color, size, onPress, ...props }) => {
+    return (<Pressable onPress={onPress} style={style} {...props}>
+			<View>
+				<Svg width={size} height={size} viewBox="0 0 16 16">
+					<Path d="M8.17432 11.1055L3 6.49316L4.33106 5L8.17627 8.42773L12.0132 5.01904L13.3413 6.51416L8.17432 11.1055Z" fill={color}/>
+				</Svg>
+			</View>
+		</Pressable>);
+};
+Chevron.defaultProps = {
+    color: primary.main,
+    size: 21,
+    onPress: () => { },
+};
+export default Chevron;

package/dist/components/Select/Components/Icons/Delete/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+interface IconProps {
+    color?: string;
+    size?: number;
+    iconStyles?: {};
+    style?: ViewStyle;
+    onPress?: () => void;
+}
+declare const Delete: {
+    ({ style, color, size, onPress, ...props }: IconProps): React.JSX.Element;
+    defaultProps: {
+        color: string;
+        size: number;
+        onPress: () => void;
+    };
+};
+export default Delete;

package/dist/components/Select/Components/Icons/Delete/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+import { black } from '../../../../../theme/palette';
+import Svg, { Path } from 'react-native-svg';
+const Delete = ({ style, color, size, onPress, ...props }) => {
+    return (<Pressable onPress={onPress} style={style} {...props}>
+			<View>
+				<Svg width={size} height={size} viewBox="0 0 16 16">
+					<Path fill-rule="evenodd" clip-rule="evenodd" d="M1 8C1 4.13403 4.13397 1 8 1C11.866 1 15 4.13403 15 8C15 11.866 11.866 15 8 15C4.13397 15 1 11.866 1 8ZM10.03 11.4441L11.4441 10.03L9.41406 8L11.4441 5.96997L10.03 4.55591L8 6.58594L5.96997 4.55591L4.55591 5.96997L6.58594 8L4.55591 10.03L5.96997 11.4441L8 9.41406L10.03 11.4441Z" fill={color}/>
+				</Svg>
+			</View>
+		</Pressable>);
+};
+Delete.defaultProps = {
+    color: black.main,
+    size: 21,
+    onPress: () => { },
+};
+export default Delete;

package/dist/components/Select/index.d.ts

@@ -0,0 +1,41 @@
+import React, { FC } from 'react';
+import { TextInput } from 'react-native';
+declare enum KeyboardTypes {
+    Default = "default",
+    NumberPad = "number-pad",
+    DecimalPad = "decimal-pad",
+    Numeric = "numeric",
+    EmailAddress = "email-address",
+    PhonePad = "phone-pad",
+    URL = "url"
+}
+export interface Option {
+    label: string;
+    value: string | number;
+}
+interface CustomOptionComponentProps {
+    renderedOption: Option;
+    filteredOptions: Option[];
+    selectedOptions: Option[];
+    callbackOptionSelected: (option: Option) => void;
+}
+export type CustomOptionComponent = (props: CustomOptionComponentProps) => React.Component;
+interface SelectProps {
+    options: Option[];
+    label: string;
+    value?: string;
+    optionStyles?: {};
+    placeholder?: string;
+    inputProps?: TextInput;
+    isSearchable?: boolean;
+    isMulti?: boolean;
+    isDisabled?: boolean;
+    noOptionsMessage?: string;
+    multiOptionsText?: string;
+    keyboardType?: KeyboardTypes;
+    onFocus?: () => void;
+    onSelectOption?: (selectedOptions: Option[]) => void;
+    customOptionComponent?: CustomOptionComponent | null;
+}
+declare const Select: FC<SelectProps>;
+export default Select;

package/dist/components/Select/index.js

@@ -0,0 +1,149 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { Keyboard, StyleSheet, Text, TextInput, View } from 'react-native';
+import { black, grey, primary } from '../../theme/palette';
+import { formatPlaceholderMulti } from './utils';
+import ChevronIcon from './Components/Icons/Chevron';
+import DeleteIcon from './Components/Icons/Delete';
+import Dropdown from './Components/Dropdown';
+// eslint-disable-next-line no-shadow
+var KeyboardTypes;
+(function (KeyboardTypes) {
+    KeyboardTypes["Default"] = "default";
+    KeyboardTypes["NumberPad"] = "number-pad";
+    KeyboardTypes["DecimalPad"] = "decimal-pad";
+    KeyboardTypes["Numeric"] = "numeric";
+    KeyboardTypes["EmailAddress"] = "email-address";
+    KeyboardTypes["PhonePad"] = "phone-pad";
+    KeyboardTypes["URL"] = "url";
+})(KeyboardTypes || (KeyboardTypes = {}));
+const Select = ({ options, label, value = null, placeholder = '', optionStyles = {}, inputProps = {}, isSearchable = false, isMulti = false, isDisabled = false, noOptionsMessage = 'no options', multiOptionsText = '', keyboardType = KeyboardTypes.Default, onFocus = () => { }, onSelectOption = () => { }, customOptionComponent = null, ...props }) => {
+    const [inputValue, setInputValue] = useState('');
+    const [selectedOptions, setSelectedOptions] = useState([]);
+    const [filteredOptions, setFilteredOptions] = useState(options);
+    const [isShowedDropdown, setIsShowedDropdown] = useState(false);
+    const inputRef = useRef(null);
+    const hasDefaultValue = value && options?.find((option) => option.label === value);
+    const isMoveLabel = isShowedDropdown || inputValue;
+    const showDeleteIcon = isDisabled ? false : !!inputValue && !!selectedOptions?.length;
+    const isArrowRotated = isShowedDropdown ? '180deg' : '0deg';
+    const filterOptions = (textValue) => {
+        if (typeof textValue !== 'string' || !textValue.length) {
+            return setFilteredOptions(options);
+        }
+        const filtered = options?.filter((option) => option.label.toLowerCase().includes(textValue.toLowerCase()));
+        return setFilteredOptions(filtered);
+    };
+    const handleChange = (textValue) => {
+        setInputValue(textValue);
+        filterOptions(textValue);
+    };
+    const handleOnFocus = () => {
+        if (!isSearchable || isMulti) {
+            Keyboard.dismiss();
+        }
+        onFocus();
+        setIsShowedDropdown(true);
+    };
+    const setSingleOption = (option) => {
+        setIsShowedDropdown(false);
+        setSelectedOptions([option]);
+        setInputValue(option.label);
+    };
+    const setMultiOptions = (option) => {
+        const optionMatcher = selectedOptions.some((previewOption) => previewOption === option);
+        const updateOption = optionMatcher
+            ? selectedOptions.filter((previewOption) => previewOption !== option)
+            : [...selectedOptions, option];
+        setSelectedOptions(updateOption);
+        setInputValue(formatPlaceholderMulti(updateOption, multiOptionsText));
+    };
+    const handleSelectedOption = (option) => isMulti ? setMultiOptions(option) : setSingleOption(option);
+    const handleCloseDropdown = () => {
+        if (isDisabled) {
+            return null;
+        }
+        setIsShowedDropdown(!isShowedDropdown);
+        inputRef.current?.blur();
+    };
+    const handleResetOptions = () => {
+        setIsShowedDropdown(false);
+        setInputValue('');
+        setSelectedOptions([]);
+    };
+    const memoizedSelectedOptions = useCallback(() => {
+        if (!!selectedOptions?.length && !!inputValue) {
+            onSelectOption(selectedOptions);
+        }
+    }, [inputValue, onSelectOption, selectedOptions]);
+    useEffect(() => {
+        memoizedSelectedOptions();
+    }, [selectedOptions, inputValue, memoizedSelectedOptions]);
+    useEffect(() => {
+        if (hasDefaultValue) {
+            setSelectedOptions([hasDefaultValue]);
+            setInputValue(value);
+        }
+    }, [hasDefaultValue, value]);
+    const styles = StyleSheet.create({
+        wrapper: {
+            width: '100%',
+            marginBottom: 10,
+            position: 'relative',
+            zIndex: isShowedDropdown ? 10 : 0,
+        },
+        wrapperInput: {
+            position: 'relative',
+            width: '100%',
+            marginBottom: 0,
+            marginTop: 18,
+        },
+        label: {
+            position: 'absolute',
+            color: isMoveLabel && !isDisabled ? primary.main : black.main,
+            fontSize: 16,
+            lineHeight: 19,
+            letterSpacing: 0,
+            left: 0,
+            fontWeight: isMoveLabel ? '600' : '400',
+            bottom: isMoveLabel ? 38 : 10,
+        },
+        input: {
+            width: '100%',
+            height: 38,
+            padding: 0,
+            fontSize: 16,
+            lineHeight: 19,
+            letterSpacing: 0,
+            borderBottomWidth: 1,
+            color: black.main,
+            borderBottomColor: isShowedDropdown ? primary.main : grey[200],
+        },
+        arrowIcon: {
+            position: 'absolute',
+            padding: 8,
+            right: 0,
+            bottom: 0,
+            zIndex: 1,
+            transform: [{ rotate: isArrowRotated }],
+        },
+        deleteIcon: {
+            position: 'absolute',
+            padding: 8,
+            right: 30,
+            bottom: 0,
+            zIndex: 1,
+        },
+    });
+    return (<View style={styles.wrapper}>
+			<View style={styles.wrapperInput} {...props}>
+				{showDeleteIcon && <DeleteIcon style={styles.deleteIcon} onPress={handleResetOptions}/>}
+				<ChevronIcon style={styles.arrowIcon} color={isDisabled ? black.main : primary.main} onPress={handleCloseDropdown}/>
+
+				<Text style={styles.label}>{label}</Text>
+				<TextInput ref={inputRef} style={styles.input} value={inputValue} placeholder={isMoveLabel && placeholder} showSoftInputOnFocus={!isMulti && isSearchable} caretHidden={!isSearchable} keyboardType={keyboardType} editable={!isDisabled} onFocus={handleOnFocus} onChangeText={handleChange} {...inputProps}/>
+			</View>
+
+			<Dropdown isShowedDropdown={isShowedDropdown} filteredOptions={filteredOptions} selectedOptions={selectedOptions} noOptionsMessage={noOptionsMessage} optionStyles={optionStyles} callbackOption={handleSelectedOption} customOptionComponent={customOptionComponent}/>
+		</View>);
+};
+export default Select;

package/dist/components/Select/utils/index.d.ts

@@ -0,0 +1,2 @@
+import { Option } from '..';
+export declare const formatPlaceholderMulti: (options: Option[], optionsText: string) => string;

package/dist/components/Select/utils/index.js

@@ -0,0 +1,8 @@
+export const formatPlaceholderMulti = (options, optionsText) => {
+    if (!options.length) {
+        return '';
+    }
+    return options.length > 1
+        ? `${options[0].label}  (+${options.length - 1} ${optionsText})`
+        : options[0].label;
+};

package/dist/components/SwipeUp/childComponents/index.d.ts

@@ -0,0 +1,11 @@
+import React, { EffectCallback, DependencyList, JSX } from 'react';
+import { BottomSheetFlatListMethods, BottomSheetScrollViewMethods, BottomSheetScrollableProps } from '@gorhom/bottom-sheet';
+import { FlatListProps, ScrollViewProps, ViewProps } from 'react-native';
+interface BottomSheetFocusProps {
+    focusHook?: (effect: EffectCallback, deps?: DependencyList) => void;
+}
+type SwipeUpViewProps = ViewProps & BottomSheetFocusProps;
+export declare const SwipeUpFlatList: React.ForwardRefExoticComponent<FlatListProps<unknown> & BottomSheetScrollableProps & React.RefAttributes<BottomSheetFlatListMethods>>;
+export declare const SwipeUpScrollView: React.ForwardRefExoticComponent<ScrollViewProps & BottomSheetScrollableProps & React.RefAttributes<BottomSheetScrollViewMethods>>;
+export declare const SwipeUpView: ({ children, ...props }: SwipeUpViewProps) => JSX.Element | null;
+export {};

package/dist/components/SwipeUp/childComponents/index.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { BottomSheetFlatList, BottomSheetScrollView, BottomSheetView, } from '@gorhom/bottom-sheet';
+export const SwipeUpFlatList = React.forwardRef(({ data, renderItem, ...props }, ref) => {
+    if (!data || !data.length || !renderItem) {
+        return null;
+    }
+    return <BottomSheetFlatList ref={ref} data={data} renderItem={renderItem} {...props}/>;
+});
+export const SwipeUpScrollView = React.forwardRef(({ children, ...props }, ref) => {
+    if (!children) {
+        return null;
+    }
+    return (<BottomSheetScrollView ref={ref} {...props}>
+				{children}
+			</BottomSheetScrollView>);
+});
+export const SwipeUpView = ({ children, ...props }) => {
+    if (!children) {
+        return null;
+    }
+    return <BottomSheetView {...props}>{children}</BottomSheetView>;
+};

package/dist/components/SwipeUp/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { BottomSheetProps } from '@gorhom/bottom-sheet';
+import { ViewStyle } from 'react-native';
+export interface SwipeUpProps extends BottomSheetProps {
+    onChangeSnap?: () => void;
+    swipeWrapperStyle?: ViewStyle;
+    snapPosition?: number;
+}
+declare const SwipeUp: React.ForwardRefExoticComponent<SwipeUpProps & React.RefAttributes<import("@gorhom/bottom-sheet/lib/typescript/types").BottomSheetMethods>>;
+export default SwipeUp;

package/dist/components/SwipeUp/index.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import BottomSheet from '@gorhom/bottom-sheet';
+const SwipeUp = React.forwardRef(({ children, snapPoints = ['100%'], snapPosition = 0, style, onChangeSnap, backgroundStyle, swipeWrapperStyle, ...props }, ref) => {
+    if (!children) {
+        return null;
+    }
+    return (<BottomSheet ref={ref} snapPoints={snapPoints} index={snapPosition} onChange={onChangeSnap} style={style} containerStyle={backgroundStyle} backgroundStyle={swipeWrapperStyle} {...props}>
+				{children}
+			</BottomSheet>);
+});
+export default SwipeUp;

package/dist/index.d.ts

@@ -7,6 +7,11 @@ import Loading from './components/Loading';
 import StatusChip from './components/StatusChip';
 import Input from './components/Input';
 import LoadingFullScreen from './components/LoadingFullScreen';
+import Icon from './components/Icon';
+import Select from './components/Select';
 import { palette } from './theme/palette';
 import RadioButton from './components/RadioButton';
-export { Text, Avatar, CheckBox, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, };
+import SwipeUp from './components/SwipeUp';
+import { SwipeUpFlatList, SwipeUpScrollView, SwipeUpView } from './components/SwipeUp/childComponents';
+import Carousel from './components/Carousel';
+export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, };

package/dist/index.js

@@ -7,6 +7,11 @@ import Loading from './components/Loading';
 import StatusChip from './components/StatusChip';
 import Input from './components/Input';
 import LoadingFullScreen from './components/LoadingFullScreen';
+import Icon from './components/Icon';
+import Select from './components/Select';
 import { palette } from './theme/palette';
 import RadioButton from './components/RadioButton';
-export { Text, Avatar, CheckBox, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, };
+import SwipeUp from './components/SwipeUp';
+import { SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, } from './components/SwipeUp/childComponents';
+import Carousel from './components/Carousel';
+export { Text, Avatar, CheckBox, Icon, Image, Loading, Svg, StatusChip, Input, palette, LoadingFullScreen, RadioButton, Select, SwipeUp, SwipeUpFlatList, SwipeUpScrollView, SwipeUpView, Carousel, };

package/dist/ios/MyApp/AppDelegate.h

@@ -0,0 +1,8 @@
+#import <React/RCTBridgeDelegate.h>
+#import <UIKit/UIKit.h>
+
+@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate>
+
+@property (nonatomic, strong) UIWindow *window;
+
+@end

package/dist/ios/MyApp/AppDelegate.m

@@ -0,0 +1,58 @@
+#import "AppDelegate.h"
+
+#import <React/RCTBridge.h>
+#import <React/RCTBundleURLProvider.h>
+#import <React/RCTRootView.h>
+
+#ifdef FB_SONARKIT_ENABLED
+#import <FlipperKit/FlipperClient.h>
+#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
+#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
+#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
+#import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
+#import <FlipperKitReactPlugin/FlipperKitReactPlugin.h>
+
+static void InitializeFlipper(UIApplication *application) {
+  FlipperClient *client = [FlipperClient sharedClient];
+  SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
+  [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]];
+  [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]];
+  [client addPlugin:[FlipperKitReactPlugin new]];
+  [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
+  [client start];
+}
+#endif
+
+@implementation AppDelegate
+
+- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
+{
+#ifdef FB_SONARKIT_ENABLED
+  InitializeFlipper(application);
+#endif
+
+  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
+  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
+                                                   moduleName:@"ui-native"
+                                            initialProperties:nil];
+
+  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
+
+  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
+  UIViewController *rootViewController = [UIViewController new];
+  rootViewController.view = rootView;
+  self.window.rootViewController = rootViewController;
+  [self.window makeKeyAndVisible];
+  return YES;
+}
+
+- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
+{
+#if DEBUG
+  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
+#else
+  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+#endif
+}
+
+@end

package/dist/ios/MyApp/Images.xcassets/AppIcon.appiconset/Contents.json

@@ -0,0 +1,38 @@
+{
+  "images" : [
+    {
+      "idiom" : "iphone",
+      "size" : "29x29",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "29x29",
+      "scale" : "3x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "40x40",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "40x40",
+      "scale" : "3x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "60x60",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "60x60",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

package/dist/ios/MyApp/Images.xcassets/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

package/dist/ios/MyApp/Info.plist

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>en</string>
+	<key>CFBundleDisplayName</key>
+	<string>ui-native</string>
+	<key>CFBundleExecutable</key>
+	<string>$(EXECUTABLE_NAME)</string>
+	<key>CFBundleIdentifier</key>
+	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>$(PRODUCT_NAME)</string>
+	<key>CFBundlePackageType</key>
+	<string>APPL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>1.0</string>
+	<key>CFBundleSignature</key>
+	<string>????</string>
+	<key>CFBundleVersion</key>
+	<string>1</string>
+	<key>LSRequiresIPhoneOS</key>
+	<true/>
+	<key>NSAppTransportSecurity</key>
+	<dict>
+		<key>NSExceptionDomains</key>
+		<dict>
+			<key>localhost</key>
+			<dict>
+				<key>NSExceptionAllowsInsecureHTTPLoads</key>
+				<true/>
+			</dict>
+		</dict>
+	</dict>
+	<key>NSLocationWhenInUseUsageDescription</key>
+	<string></string>
+	<key>UILaunchStoryboardName</key>
+	<string>LaunchScreen</string>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>armv7</string>
+	</array>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>UIViewControllerBasedStatusBarAppearance</key>
+	<false/>
+</dict>
+</plist>