Merge branch 'master' into feat/change-tab-controller-center-selected-logic

* master:
  Add missing functionality for Incubator.TextField (#1121)
  Update all app icons sizes for iOS project
  Adding 'defaultSource' for image source in case of an error (#1116)
  DateTimePicker - adding 'headerStyle' prop to adjust iOS dialog header style (#1117)
  add prepush script
  Infra/use did update (#1119)
  SettingsScreen - rename to UNSAFE (#1118)
  Create a middleware TextField migrator to migrate people to the new TextField implementation (#1113)
  Fix issue with missing selected indicator in Picker items (#1065)
  Fix issue for Android on rn63 - when passing null as tintColor to an image, the image is not displayed (#1055)
  Fix issue #1052 - PickerItem ignore renderItem prop (#1054)
  Dialog - RN63 broke Modal's onDismiss method, this fixes our API (#1026)
  pass containerStyle to checkbox when there's no label
  render checkbox container only if there's label (#1039)

Author: M-i-k-e-l

demo/src/screens/SettingsScreen.js

@@ -30,14 +30,14 @@ class SettingsScreen extends Component {
     };
   }
 
-  async componentWillMount() {
+  async UNSAFE_componentWillMount() {
     const {screens} = this.state;
     const defaultScreenId = await AsyncStorage.getItem('uilib.defaultScreen');
     const defaultScreen = _.find(screens, {value: defaultScreenId});
-    
+
     const isRTLString = await AsyncStorage.getItem('uilib.isRTL');
     const isRTL = isRTLString === 'true';
-    
+
     this.setState({defaultScreen, isRTL});
   }
 
@@ -63,7 +63,7 @@ class SettingsScreen extends Component {
     const {defaultScreen, showRefreshMessage, isRTL, screens} = this.state;
     const {extraSettingsUI} = this.props;
     const filteredScreens = _.filter(screens, screen => !_.isUndefined(screen.value));
-  
+
     return (
       <View flex padding-25 bg-grey80>
         <View flex>
@@ -82,7 +82,7 @@ class SettingsScreen extends Component {
               <Picker.Item key={screen.value} value={screen}/>
             ))}
           </Picker>
-            
+
           <View style={{borderWidth: 1, borderColor: Colors.dark70, marginTop: 40}}>
             <View style={[{padding: 5, borderBottomWidth: 1}, styles.block]}>
               <Text text80 dark20>Current layout direction</Text>

demo/src/screens/componentScreens/IncubatorTextFieldScreen.tsx

@@ -146,6 +146,7 @@ export default class TextFieldScreen extends Component {
             validationMessagePosition={errorPosition}
             validate={['required', 'email']}
             validateOnChange
+            onChangeValidity={(isValid: boolean) => console.warn('validity changed:', isValid, Date.now())}
             // validateOnStart
             // validateOnBlur
             fieldStyle={styles.withUnderline}

generatedTypes/components/chip/index.d.ts

@@ -313,7 +313,7 @@ declare const _default: React.ComponentClass<ViewProps & Pick<import("react-nati
     /**
      * Additional icon props
      */
-    iconProps?: Pick<ImageProps, "margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV" | "style" | "testID" | "onLayout" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "width" | "height" | "borderRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "aspectRatio" | "onError" | "onLoad" | "onLoadEnd" | "onLoadStart" | "progressiveRenderingEnabled" | "resizeMode" | "resizeMethod" | "loadingIndicatorSource" | "defaultSource" | "blurRadius" | "capInsets" | "onProgress" | "onPartialLoad" | "fadeDuration" | "cover" | "sourceTransformer" | "assetName" | "assetGroup" | "tintColor" | "supportRTL" | "overlayType" | "overlayColor" | "customOverlayContent"> | undefined;
+    iconProps?: Pick<ImageProps, "margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV" | "style" | "testID" | "onLayout" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityComponentType" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityTraits" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "width" | "height" | "borderRadius" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderTopLeftRadius" | "borderTopRightRadius" | "aspectRatio" | "onError" | "onLoad" | "onLoadEnd" | "onLoadStart" | "progressiveRenderingEnabled" | "resizeMode" | "resizeMethod" | "loadingIndicatorSource" | "defaultSource" | "blurRadius" | "capInsets" | "onProgress" | "onPartialLoad" | "fadeDuration" | "cover" | "sourceTransformer" | "assetName" | "assetGroup" | "tintColor" | "supportRTL" | "overlayType" | "overlayColor" | "customOverlayContent" | "errorSource"> | undefined;
     /**
      * Icon style
      */

generatedTypes/components/image/index.d.ts

@@ -1,5 +1,5 @@
 import React, { PureComponent } from 'react';
-import { ImageProps as RNImageProps, ImageSourcePropType } from 'react-native';
+import { ImageProps as RNImageProps, ImageSourcePropType, NativeSyntheticEvent, ImageErrorEventData } from 'react-native';
 import { ForwardRefInjectedProps, BaseComponentInjectedProps, MarginModifiers } from '../../commons/new';
 import { OverlayTypeType } from '../overlay';
 export declare type ImageProps = RNImageProps & MarginModifiers & {
@@ -44,14 +44,22 @@ export declare type ImageProps = RNImageProps & MarginModifiers & {
      * Render an overlay with custom content
      */
     customOverlayContent?: JSX.Element;
+    /**
+     * Default image source in case of an error
+     */
+    errorSource?: ImageSourcePropType;
 };
 declare type Props = ImageProps & ForwardRefInjectedProps & BaseComponentInjectedProps;
+declare type State = {
+    error: boolean;
+    prevSource: ImageSourcePropType;
+};
 /**
  * @description: Image wrapper with extra functionality like source transform and assets support
  * @extends: Image
  * @extendslink: https://facebook.github.io/react-native/docs/image.html
  */
-declare class Image extends PureComponent<Props> {
+declare class Image extends PureComponent<Props, State> {
     static displayName: string;
     static defaultProps: {
         assetGroup: string;
@@ -64,9 +72,14 @@ declare class Image extends PureComponent<Props> {
     };
     sourceTransformer?: (props: any) => ImageSourcePropType;
     constructor(props: Props);
+    static getDerivedStateFromProps(nextProps: Partial<Props>, prevState: State): {
+        error: boolean;
+    } | null;
     isGif(): boolean | undefined;
     shouldUseImageBackground(): boolean;
+    getVerifiedSource(source?: ImageSourcePropType): any;
     getImageSource(): any;
+    onError: (event: NativeSyntheticEvent<ImageErrorEventData>) => void;
     render(): JSX.Element;
 }
 export { Image };
@@ -112,6 +125,10 @@ declare const _default: React.ComponentClass<RNImageProps & Partial<Record<"marg
      * Render an overlay with custom content
      */
     customOverlayContent?: JSX.Element | undefined;
+    /**
+     * Default image source in case of an error
+     */
+    errorSource?: number | import("react-native").ImageURISource | import("react-native").ImageURISource[] | undefined;
 } & {
     useCustomTheme?: boolean | undefined;
 }, any>;

generatedTypes/components/textField/TextFieldMigrator.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>;
+export default _default;

generatedTypes/incubator/TextField/index.d.ts

@@ -47,6 +47,10 @@ export declare type TextFieldProps = MarginModifiers & PaddingModifiers & Typogr
      * Should validate when losing focus of TextField
      */
     validateOnBlur?: boolean;
+    /**
+     * Callback for when field validity has changed
+     */
+    onChangeValidity?: (isValid: boolean) => void;
     /**
      * The position of the validation message (top/bottom)
      */
@@ -101,6 +105,10 @@ declare const _default: React.ComponentClass<(Partial<Record<"margin" | "marginL
      * Should validate when losing focus of TextField
      */
     validateOnBlur?: boolean | undefined;
+    /**
+     * Callback for when field validity has changed
+     */
+    onChangeValidity?: ((isValid: boolean) => void) | undefined;
     /**
      * The position of the validation message (top/bottom)
      */
@@ -152,6 +160,10 @@ declare const _default: React.ComponentClass<(Partial<Record<"margin" | "marginL
      * Should validate when losing focus of TextField
      */
     validateOnBlur?: boolean | undefined;
+    /**
+     * Callback for when field validity has changed
+     */
+    onChangeValidity?: ((isValid: boolean) => void) | undefined;
     /**
      * The position of the validation message (top/bottom)
      */
@@ -203,6 +215,10 @@ declare const _default: React.ComponentClass<(Partial<Record<"margin" | "marginL
      * Should validate when losing focus of TextField
      */
     validateOnBlur?: boolean | undefined;
+    /**
+     * Callback for when field validity has changed
+     */
+    onChangeValidity?: ((isValid: boolean) => void) | undefined;
     /**
      * The position of the validation message (top/bottom)
      */
@@ -254,6 +270,10 @@ declare const _default: React.ComponentClass<(Partial<Record<"margin" | "marginL
      * Should validate when losing focus of TextField
      */
     validateOnBlur?: boolean | undefined;
+    /**
+     * Callback for when field validity has changed
+     */
+    onChangeValidity?: ((isValid: boolean) => void) | undefined;
     /**
      * The position of the validation message (top/bottom)
      */

generatedTypes/incubator/TextField/useFieldState.d.ts

@@ -8,8 +8,12 @@ export interface FieldStateProps extends TextInputProps {
      * A single or multiple validator. Can be a string (required, email) or custom function.
      */
     validate?: Validator | Validator[];
+    /**
+     * Callback for when field validity has changed
+     */
+    onChangeValidity?: (isValid: boolean) => void;
 }
-export default function useFieldState({ validate, validateOnBlur, validateOnChange, validateOnStart, ...props }: FieldStateProps): {
+export default function useFieldState({ validate, validateOnBlur, validateOnChange, validateOnStart, onChangeValidity, ...props }: FieldStateProps): {
     onFocus: (...args: any) => void;
     onBlur: (...args: any) => void;
     onChangeText: (text: any) => void;

generatedTypes/incubator/TextField/usePreset.d.ts

@@ -204,6 +204,7 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     validateOnStart?: boolean | undefined;
     validateOnChange?: boolean | undefined;
     validateOnBlur?: boolean | undefined;
+    onChangeValidity?: ((isValid: boolean) => void) | undefined;
     fieldStyle?: import("react-native").ViewStyle | undefined;
     containerStyle?: import("react-native").ViewStyle | undefined;
     modifiers: import("../../commons/modifiers").ExtractedStyle;
@@ -581,6 +582,7 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     validateOnStart?: boolean | undefined;
     validateOnChange?: boolean | undefined;
     validateOnBlur?: boolean | undefined;
+    onChangeValidity?: ((isValid: boolean) => void) | undefined;
     fieldStyle?: import("react-native").ViewStyle | undefined;
     containerStyle?: import("react-native").ViewStyle | undefined;
     modifiers: import("../../commons/modifiers").ExtractedStyle;
@@ -1078,6 +1080,7 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     validateOnStart?: boolean | undefined;
     validateOnChange?: boolean | undefined;
     validateOnBlur: boolean;
+    onChangeValidity?: ((isValid: boolean) => void) | undefined;
     fieldStyle: import("react-native").ViewStyle | {
         borderBottomWidth: number;
         borderBottomColor: string;

ios/rnuilib/Images.xcassets/AppIcon.appiconset/1024.png

@@ -1,103 +1,116 @@
 {
   "images" : [
     {
+      "filename" : "40.png",
       "idiom" : "iphone",
-      "size" : "20x20",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "20x20"
     },
     {
+      "filename" : "60.png",
       "idiom" : "iphone",
-      "size" : "20x20",
-      "scale" : "3x"
+      "scale" : "3x",
+      "size" : "20x20"
     },
     {
+      "filename" : "58.png",
       "idiom" : "iphone",
-      "size" : "29x29",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "29x29"
     },
     {
+      "filename" : "87.png",
       "idiom" : "iphone",
-      "size" : "29x29",
-      "scale" : "3x"
+      "scale" : "3x",
+      "size" : "29x29"
     },
     {
+      "filename" : "80.png",
       "idiom" : "iphone",
-      "size" : "40x40",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "40x40"
     },
     {
+      "filename" : "120-1.png",
       "idiom" : "iphone",
-      "size" : "40x40",
-      "scale" : "3x"
+      "scale" : "3x",
+      "size" : "40x40"
     },
     {
-      "size" : "60x60",
-      "idiom" : "iphone",
       "filename" : "120.png",
-      "scale" : "2x"
+      "idiom" : "iphone",
+      "scale" : "2x",
+      "size" : "60x60"
     },
     {
-      "size" : "60x60",
-      "idiom" : "iphone",
       "filename" : "180.png",
-      "scale" : "3x"
+      "idiom" : "iphone",
+      "scale" : "3x",
+      "size" : "60x60"
     },
     {
+      "filename" : "20.png",
       "idiom" : "ipad",
-      "size" : "20x20",
-      "scale" : "1x"
+      "scale" : "1x",
+      "size" : "20x20"
     },
     {
+      "filename" : "40-1.png",
       "idiom" : "ipad",
-      "size" : "20x20",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "20x20"
     },
     {
+      "filename" : "29.png",
       "idiom" : "ipad",
-      "size" : "29x29",
-      "scale" : "1x"
+      "scale" : "1x",
+      "size" : "29x29"
     },
     {
+      "filename" : "58-1.png",
       "idiom" : "ipad",
-      "size" : "29x29",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "29x29"
     },
     {
+      "filename" : "40-2.png",
       "idiom" : "ipad",
-      "size" : "40x40",
-      "scale" : "1x"
+      "scale" : "1x",
+      "size" : "40x40"
     },
     {
+      "filename" : "80-1.png",
       "idiom" : "ipad",
-      "size" : "40x40",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "40x40"
     },
     {
-      "size" : "76x76",
-      "idiom" : "ipad",
       "filename" : "76.png",
-      "scale" : "1x"
+      "idiom" : "ipad",
+      "scale" : "1x",
+      "size" : "76x76"
     },
     {
-      "size" : "76x76",
-      "idiom" : "ipad",
       "filename" : "152.png",
-      "scale" : "2x"
+      "idiom" : "ipad",
+      "scale" : "2x",
+      "size" : "76x76"
     },
     {
-      "size" : "83.5x83.5",
-      "idiom" : "ipad",
       "filename" : "167.png",
-      "scale" : "2x"
+      "idiom" : "ipad",
+      "scale" : "2x",
+      "size" : "83.5x83.5"
     },
     {
+      "filename" : "1024.png",
       "idiom" : "ios-marketing",
-      "size" : "1024x1024",
-      "scale" : "1x"
+      "scale" : "1x",
+      "size" : "1024x1024"
     }
   ],
   "info" : {
-    "version" : 1,
-    "author" : "xcode"
+    "author" : "xcode",
+    "version" : 1
   }
-}
+}

ios/rnuilib/Images.xcassets/AppIcon.appiconset/120-1.png

@@ -30,6 +30,7 @@
     "build:exports": "./node_modules/.bin/babel src --out-dir src --config-file ./src/.babelrc.json --extensions '.ts,.tsx' --ignore 'src/index.ts'",
     "build:packages": "node scripts/buildPackages.js",
     "build": "tsc --p tsconfig.build.json && npm run build:exports && npm run build:packages",
+    "prepush": "npm run build:dev && npm run test",
     "log": "react-native log-ios | grep 'ethan -'",
     "docs:install": "(cd ./uilib-docs && rm -rf node_modules && rm -rf package-lock.json && npm install)",
     "docs:deploy": "(cd ./uilib-docs && gatsby build --prefix-paths && gh-pages -d public --branch gh-pages)",