styled-components 5.3.6 → 5.3.10

package/native/dist/types.d.ts

@@ -2,47 +2,59 @@ import React from 'react';
 import ComponentStyle from './models/ComponentStyle';
 import { DefaultTheme } from './models/ThemeProvider';
 import createWarnTooManyClasses from './utils/createWarnTooManyClasses';
-interface ExoticComponentWithDisplayName<P = unknown> extends React.ExoticComponent<P> {
+interface ExoticComponentWithDisplayName<P = any> extends React.ExoticComponent<P> {
     defaultProps?: Partial<P>;
     displayName?: string;
 }
-export declare type OmitNever<T> = {
+export type OmitNever<T> = {
     [K in keyof T as T[K] extends never ? never : K]: T[K];
 };
-export declare type Runtime = 'web' | 'native';
+export type Runtime = 'web' | 'native';
 export { DefaultTheme };
-export declare type AnyComponent<P = any> = ExoticComponentWithDisplayName<P> | React.ComponentType<P>;
-export interface StyledOptions<R extends Runtime, Props> {
+export type AnyComponent<P = any> = ExoticComponentWithDisplayName<P> | React.ComponentType<P>;
+export type KnownTarget = keyof JSX.IntrinsicElements | AnyComponent;
+export type WebTarget = string | KnownTarget;
+export type NativeTarget = AnyComponent;
+export type StyledTarget<R extends Runtime> = R extends 'web' ? WebTarget : NativeTarget;
+export interface StyledOptions<R extends Runtime, Props extends object> {
     attrs?: Attrs<Props>[];
     componentId?: R extends 'web' ? string : never;
     displayName?: string;
     parentComponentId?: R extends 'web' ? string : never;
     shouldForwardProp?: ShouldForwardProp<R>;
 }
-export declare type KnownTarget = keyof JSX.IntrinsicElements | AnyComponent;
-export declare type WebTarget = string | KnownTarget;
-export declare type NativeTarget = AnyComponent;
-export interface BaseExtensibleObject {
-    [key: string]: any;
-}
-export interface ExtensibleObject extends BaseExtensibleObject {
-    $as?: KnownTarget;
-    $forwardedAs?: KnownTarget;
+export type Dict<T> = {
+    [key: string]: T;
+};
+export interface ExecutionProps {
+    /**
+     * Dynamically adjust the rendered component or HTML tag, e.g.
+     * ```
+     * const StyledButton = styled.button``
+     *
+     * <StyledButton as="a" href="/foo">
+     *   I'm an anchor now
+     * </StyledButton>
+     * ```
+     */
     as?: KnownTarget;
     forwardedAs?: KnownTarget;
     theme?: DefaultTheme;
 }
-export interface ExecutionContext extends ExtensibleObject {
+/**
+ * ExecutionProps but with `theme` required.
+ */
+export interface ExecutionContext extends ExecutionProps {
     theme: DefaultTheme;
 }
-export interface StyleFunction<Props = BaseExtensibleObject> {
-    (executionContext: ExecutionContext & Props): Interpolation<Props>;
+export interface StyleFunction<Props extends object> {
+    (executionContext: ExecutionContext & Omit<Props, keyof ExecutionContext>): Interpolation<Props>;
 }
-export declare type Interpolation<Props> = StyleFunction<Props> | StyledObject<Props> | TemplateStringsArray | string | number | false | undefined | null | Keyframes | IStyledComponent<'web', any, any> | Interpolation<Props>[];
-export declare type Attrs<Props> = (ExtensibleObject & Props) | ((props: ExecutionContext & Props) => Partial<Props>);
-export declare type RuleSet<Props> = Interpolation<Props>[];
-export declare type Styles<Props> = TemplateStringsArray | StyledObject<Props> | StyleFunction<Props>;
-export declare type NameGenerator = (hash: number) => string;
+export type Interpolation<Props extends object> = StyleFunction<Props> | StyledObject<Props> | TemplateStringsArray | string | number | false | undefined | null | Keyframes | IStyledComponent<'web', any, any> | Interpolation<Props>[];
+export type Attrs<Props extends object = object> = (ExecutionProps & Props) | ((props: ExecutionContext & Props) => Partial<Props>);
+export type RuleSet<Props extends object> = Interpolation<Props>[];
+export type Styles<Props extends object> = TemplateStringsArray | StyledObject<Props> | StyleFunction<Props>;
+export type NameGenerator = (hash: number) => string;
 export interface StyleSheet {
     create: Function;
 }
@@ -51,80 +63,84 @@ export interface Keyframes {
     name: string;
     rules: string;
 }
-export interface Flattener<Props> {
+export interface Flattener<Props extends object> {
     (chunks: Interpolation<Props>[], executionContext: Object | null | undefined, styleSheet: Object | null | undefined): Interpolation<Props>[];
 }
-export declare type FlattenerResult<Props> = RuleSet<Props> | number | string | string[] | IStyledComponent<any, any, any> | Keyframes;
+export type FlattenerResult<Props extends object> = RuleSet<Props> | number | string | string[] | IStyledComponent<'web', any, any> | Keyframes;
 export interface Stringifier {
     (css: string, selector?: string, prefix?: string, componentId?: string): string[];
     hash: string;
 }
 export interface ShouldForwardProp<R extends Runtime> {
-    (prop: string, elementToBeCreated?: StyledTarget<R>): boolean;
+    (prop: string, elementToBeCreated: StyledTarget<R>): boolean;
 }
-export interface CommonStatics<R extends Runtime, Props> {
+export interface CommonStatics<R extends Runtime, Props extends object> {
     attrs: Attrs<Props>[];
     target: StyledTarget<R>;
     shouldForwardProp?: ShouldForwardProp<R>;
-    withComponent: any;
 }
-export interface IStyledStatics<R extends Runtime, OuterProps extends {}> extends CommonStatics<R, OuterProps> {
+export interface IStyledStatics<R extends Runtime, OuterProps extends object> extends CommonStatics<R, OuterProps> {
     componentStyle: R extends 'web' ? ComponentStyle : never;
-    foldedComponentIds: R extends 'web' ? Array<string> : never;
+    foldedComponentIds: R extends 'web' ? string : never;
     inlineStyle: R extends 'native' ? InstanceType<IInlineStyleConstructor<OuterProps>> : never;
     target: StyledTarget<R>;
     styledComponentId: R extends 'web' ? string : never;
     warnTooManyClasses?: R extends 'web' ? ReturnType<typeof createWarnTooManyClasses> : never;
-    withComponent: <Target extends StyledTarget<R>, Props = unknown>(tag: Target) => IStyledComponent<R, Target, OuterProps & Props>;
-}
-declare type PolymorphicComponentProps<R extends Runtime, ActualComponent extends StyledTarget<R>, PropsToBeInjectedIntoActualComponent extends {}, ActualComponentProps = ActualComponent extends KnownTarget ? React.ComponentPropsWithRef<ActualComponent> : {}> = React.HTMLAttributes<ActualComponent> & Omit<PropsToBeInjectedIntoActualComponent, keyof ActualComponentProps | 'as' | '$as'> & ActualComponentProps & ({
-    $as: ActualComponent;
-    as?: never;
-} | {
-    $as?: never;
-    as?: ActualComponent;
-});
-interface PolymorphicComponent<R extends Runtime, FallbackComponent extends StyledTarget<R>, ExpectedProps extends {}, PropsToBeInjectedIntoActualComponent extends {}> extends React.ForwardRefExoticComponent<ExpectedProps> {
-    <ActualComponent extends StyledTarget<R> = FallbackComponent>(props: PolymorphicComponentProps<R, ActualComponent, ExpectedProps & PropsToBeInjectedIntoActualComponent>): React.ReactElement<PolymorphicComponentProps<R, ActualComponent, ExecutionContext & ExpectedProps & PropsToBeInjectedIntoActualComponent>, ActualComponent>;
-}
-export interface IStyledComponent<R extends Runtime, Target extends StyledTarget<R>, Props extends {}> extends PolymorphicComponent<R, Target, Props, ExecutionContext>, IStyledStatics<R, Props> {
-    defaultProps?: Partial<ExtensibleObject & (Target extends KnownTarget ? React.ComponentProps<Target> : {}) & Props>;
+}
+/**
+ * Used by PolymorphicComponent to define prop override cascading order.
+ */
+export type PolymorphicComponentProps<R extends Runtime, E extends StyledTarget<R>, P extends object> = Omit<E extends KnownTarget ? P & Omit<React.ComponentPropsWithRef<E>, keyof P> : P, 'as' | 'theme'> & {
+    as?: P extends {
+        as?: string | AnyComponent;
+    } ? P['as'] : E;
+    theme?: DefaultTheme;
+};
+/**
+ * This type forms the signature for a forwardRef-enabled component that accepts
+ * the "as" prop to dynamically change the underlying rendered JSX. The interface will
+ * automatically attempt to extract props from the given rendering target to
+ * get proper typing for any specialized props in the target component.
+ */
+export interface PolymorphicComponent<R extends Runtime, P extends object, FallbackComponent extends StyledTarget<R>> extends React.ForwardRefExoticComponent<P> {
+    <E extends StyledTarget<R> = FallbackComponent>(props: PolymorphicComponentProps<R, E, P>): React.ReactElement | null;
+}
+export interface IStyledComponent<R extends Runtime, Target extends StyledTarget<R>, Props extends object> extends PolymorphicComponent<R, Props, Target>, IStyledStatics<R, Props> {
+    defaultProps?: Partial<(Target extends KnownTarget ? ExecutionProps & Omit<React.ComponentProps<Target>, keyof ExecutionProps> : ExecutionProps) & Props>;
     toString: () => string;
 }
-export interface IStyledComponentFactory<R extends Runtime, Target extends StyledTarget<R>, Props extends {}, Statics = unknown> {
-    (target: Target, options: StyledOptions<R, Props>, rules: RuleSet<Props>): IStyledComponent<R, Target, Props> & Statics;
+export interface IStyledComponentFactory<R extends Runtime, Target extends StyledTarget<R>, OuterProps extends object, OuterStatics extends object = object> {
+    <Props extends object = object, Statics extends object = object>(target: Target, options: StyledOptions<R, OuterProps & Props>, rules: RuleSet<OuterProps & Props>): IStyledComponent<R, Target, OuterProps & Props> & OuterStatics & Statics;
 }
-export interface IInlineStyleConstructor<Props = unknown> {
+export interface IInlineStyleConstructor<Props extends object> {
     new (rules: RuleSet<Props>): IInlineStyle<Props>;
 }
-export interface IInlineStyle<Props = unknown> {
+export interface IInlineStyle<Props extends object> {
     rules: RuleSet<Props>;
     generateStyleObject(executionContext: Object): Object;
 }
-export declare type StyledTarget<R extends Runtime> = R extends 'web' ? WebTarget : NativeTarget;
-export interface StyledObject<Props = ExecutionContext> {
-    [key: string]: BaseExtensibleObject | string | number | StyleFunction<Props>;
+export interface StyledObject<Props extends object> {
+    [key: string]: Dict<any> | string | number | StyleFunction<Props> | StyledObject<Props>;
 }
 /**
- * Override DefaultTheme to get accurate typings for your project.
+ * The `css` prop is not declared by default in the types as it would cause `css` to be present
+ * on the types of anything that uses styled-components indirectly, even if they do not use the
+ * babel plugin.
  *
- * ```
- * // create styled-components.d.ts in your project source
- * // if it isn't being picked up, check tsconfig compilerOptions.types
- * import type { CSSProp } from "styled-components";
- * import Theme from './theme';
+ * To enable support for the `css` prop in TypeScript, create a `styled-components.d.ts` file in
+ * your project source with the following contents:
  *
- * type ThemeType = typeof Theme;
- *
- * declare module "styled-components" {
- *  export interface DefaultTheme extends ThemeType {}
- * }
+ * ```ts
+ * import type { CSSProp } from "styled-components";
  *
  * declare module "react" {
- *  interface DOMAttributes<T> {
+ *  interface Attributes {
  *    css?: CSSProp;
  *  }
  * }
  * ```
+ *
+ * In order to get accurate typings for `props.theme` in `css` interpolations, see
+ * {@link DefaultTheme}.
  */
-export declare type CSSProp = string | StyledObject | StyleFunction;
+export type CSSProp = RuleSet<any>;

package/native/dist/utils/determineTheme.d.ts

@@ -1,2 +1,4 @@
-import { ExtensibleObject } from '../types';
-export default function determineTheme(props: ExtensibleObject, providedTheme: any, defaultProps?: any): any;
+import { DefaultTheme, ExecutionProps } from '../types';
+export default function determineTheme(props: ExecutionProps, providedTheme?: DefaultTheme, defaultProps?: {
+    theme?: DefaultTheme;
+}): DefaultTheme | undefined;

package/native/dist/utils/domElements.d.ts

@@ -1,2 +1,2 @@
-declare const _default: readonly ["a", "abbr", "address", "area", "article", "aside", "audio", "b", "base", "bdi", "bdo", "big", "blockquote", "body", "br", "button", "canvas", "caption", "cite", "code", "col", "colgroup", "data", "datalist", "dd", "del", "details", "dfn", "dialog", "div", "dl", "dt", "em", "embed", "fieldset", "figcaption", "figure", "footer", "form", "h1", "h2", "h3", "h4", "h5", "h6", "head", "header", "hgroup", "hr", "html", "i", "iframe", "img", "input", "ins", "kbd", "keygen", "label", "legend", "li", "link", "main", "map", "mark", "menu", "menuitem", "meta", "meter", "nav", "noscript", "object", "ol", "optgroup", "option", "output", "p", "param", "picture", "pre", "progress", "q", "rp", "rt", "ruby", "s", "samp", "script", "section", "select", "small", "source", "span", "strong", "style", "sub", "summary", "sup", "table", "tbody", "td", "textarea", "tfoot", "th", "thead", "time", "title", "tr", "track", "u", "ul", "var", "video", "wbr", "circle", "clipPath", "defs", "ellipse", "foreignObject", "g", "image", "line", "linearGradient", "marker", "mask", "path", "pattern", "polygon", "polyline", "radialGradient", "rect", "stop", "svg", "text", "tspan"];
+declare const _default: Set<"object" | "g" | "big" | "link" | "small" | "sub" | "sup" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "source" | "span" | "strong" | "style" | "summary" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "svg" | "circle" | "clipPath" | "defs" | "ellipse" | "foreignObject" | "image" | "line" | "linearGradient" | "marker" | "mask" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "text" | "tspan" | "use">;
 export default _default;

package/native/dist/utils/empties.d.ts

@@ -1,3 +1,3 @@
-import { ExtensibleObject } from '../types';
+import { Dict } from '../types';
 export declare const EMPTY_ARRAY: readonly any[];
-export declare const EMPTY_OBJECT: Readonly<ExtensibleObject>;
+export declare const EMPTY_OBJECT: Readonly<Dict<any>>;

package/native/dist/utils/flatten.d.ts

@@ -1,4 +1,4 @@
 import StyleSheet from '../sheet';
-import { ExecutionContext, ExtensibleObject, Interpolation, Stringifier } from '../types';
-export declare const objToCssArray: (obj: ExtensibleObject, prevKey?: string) => string[];
-export default function flatten<Props = unknown>(chunk: Interpolation<Props>, executionContext?: ExecutionContext & Props, styleSheet?: StyleSheet, stylisInstance?: Stringifier): Interpolation<Props>;
+import { Dict, ExecutionContext, Interpolation, RuleSet, Stringifier } from '../types';
+export declare const objToCssArray: (obj: Dict<any>) => string[];
+export default function flatten<Props extends object>(chunk: Interpolation<Props>, executionContext?: ExecutionContext & Props, styleSheet?: StyleSheet, stylisInstance?: Stringifier): RuleSet<Props>;

package/native/dist/utils/hoist.d.ts

@@ -40,11 +40,11 @@ declare const MEMO_STATICS: {
     propTypes: boolean;
     type: boolean;
 };
-declare type OmniComponent = AnyComponent;
-declare type ExcludeList = {
+type OmniComponent = AnyComponent;
+type ExcludeList = {
     [key: string]: true;
 };
-declare type NonReactStatics<S extends OmniComponent, C extends ExcludeList = {}> = {
+type NonReactStatics<S extends OmniComponent, C extends ExcludeList = {}> = {
     [key in Exclude<keyof S, S extends React.MemoExoticComponent<any> ? keyof typeof MEMO_STATICS | keyof C : S extends React.ForwardRefExoticComponent<any> ? keyof typeof FORWARD_REF_STATICS | keyof C : keyof typeof REACT_STATICS | keyof typeof KNOWN_STATICS | keyof C>]: S[key];
 };
 export default function hoistNonReactStatics<T extends OmniComponent, S extends OmniComponent, C extends ExcludeList = {}>(targetComponent: T, sourceComponent: S, excludelist?: C): T & NonReactStatics<S, C>;

package/native/dist/utils/interleave.d.ts

@@ -1,2 +1,2 @@
 import { Interpolation } from '../types';
-export default function interleave<Props = unknown>(strings: TemplateStringsArray, interpolations: Interpolation<Props>[]): Interpolation<Props>[];
+export default function interleave<Props extends object>(strings: readonly string[], interpolations: Interpolation<Props>[]): Interpolation<Props>[];

package/native/dist/utils/isFunction.d.ts

@@ -1 +1 @@
-export default function isFunction(test: any): boolean;
+export default function isFunction(test: any): test is Function;

package/native/dist/utils/isPlainObject.d.ts

@@ -1 +1 @@
-export default function isPlainObject(x: any): boolean;
+export default function isPlainObject(x: any): x is Record<any, any>;

package/native/dist/utils/isStatelessFunction.d.ts

@@ -1 +1 @@
-export default function isStatelessFunction(test: any): boolean;
+export default function isStatelessFunction(test: any): test is Function;

package/native/dist/utils/isStaticRules.d.ts

@@ -1,2 +1,2 @@
 import { RuleSet } from '../types';
-export default function isStaticRules<Props = unknown>(rules: RuleSet<Props>): boolean;
+export default function isStaticRules<Props extends object>(rules: RuleSet<Props>): boolean;

package/native/dist/utils/joinStrings.d.ts

@@ -1,4 +1,5 @@
 /**
  * Convenience function for joining strings to form className chains
  */
-export default function joinStrings(a?: string, b?: string): string | undefined;
+export declare function joinStrings(a?: string, b?: string): string;
+export declare function joinStringArray(arr: string[], sep?: string): string;

package/native/dist/utils/mixinDeep.d.ts

@@ -1,7 +1,6 @@
-import { ExtensibleObject } from '../types';
 /**
  * Arrays & POJOs merged recursively, other objects and value types are overridden
  * If target is not a POJO or an Array, it will get source properties injected via shallow merge
  * Source objects applied left to right.  Mutates & returns target.  Similar to lodash merge.
  */
-export default function mixinDeep(target?: ExtensibleObject, ...sources: any[]): ExtensibleObject;
+export default function mixinDeep(target: any, ...sources: any[]): any;

package/native/dist/utils/stylis.d.ts

@@ -1,10 +1,10 @@
 import { Middleware } from 'stylis';
 import { Stringifier } from '../types';
-declare type StylisInstanceConstructorArgs = {
+export type ICreateStylisInstance = {
     options?: {
+        namespace?: string;
         prefix?: boolean;
     };
     plugins?: Middleware[];
 };
-export default function createStylisInstance({ options, plugins, }?: StylisInstanceConstructorArgs): Stringifier;
-export {};
+export default function createStylisInstance({ options, plugins, }?: ICreateStylisInstance): Stringifier;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styled-components",
-  "version": "5.3.6",
+  "version": "5.3.10",
   "description": "Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress",
   "main": "dist/styled-components.cjs.js",
   "jsnext:main": "dist/styled-components.esm.js",
@@ -30,7 +30,6 @@
     "lint": "eslint src",
     "lint:size": "bundlewatch",
     "prettier": "prettier */**/*.js --write",
-    "postinstall": "node ./postinstall.js",
     "prepublishOnly": "npm run build",
     "dev": "cross-env BABEL_ENV=cjs babel-node example/startServer.js"
   },
@@ -46,8 +45,7 @@
     "primitives",
     "scripts",
     "test-utils",
-    "macro",
-    "postinstall.js"
+    "macro"
   ],
   "keywords": [
     "react",

package/primitives/dist/styled-components-primitives.cjs.js

@@ -152,13 +152,13 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 }
 
 //      
-var SC_ATTR = typeof process !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || 'data-styled';
+var SC_ATTR = typeof process !== 'undefined' && typeof process.env !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR) || 'data-styled';
 var SC_ATTR_ACTIVE = 'active';
 var SC_ATTR_VERSION = 'data-styled-version';
-var SC_VERSION = "5.3.6";
+var SC_VERSION = "5.3.10";
 var SPLITTER = '/*!sc*/\n';
 var IS_BROWSER = typeof window !== 'undefined' && 'HTMLElement' in window;
-var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean' ? SC_DISABLE_SPEEDY : typeof process !== 'undefined' && typeof process.env.REACT_APP_SC_DISABLE_SPEEDY !== 'undefined' && process.env.REACT_APP_SC_DISABLE_SPEEDY !== '' ? process.env.REACT_APP_SC_DISABLE_SPEEDY === 'false' ? false : process.env.REACT_APP_SC_DISABLE_SPEEDY : typeof process !== 'undefined' && typeof process.env.SC_DISABLE_SPEEDY !== 'undefined' && process.env.SC_DISABLE_SPEEDY !== '' ? process.env.SC_DISABLE_SPEEDY === 'false' ? false : process.env.SC_DISABLE_SPEEDY : process.env.NODE_ENV !== 'production'); // Shared empty execution context when generating static styles
+var DISABLE_SPEEDY = Boolean(typeof SC_DISABLE_SPEEDY === 'boolean' ? SC_DISABLE_SPEEDY : typeof process !== 'undefined' && typeof process.env !== 'undefined' ? typeof process.env.REACT_APP_SC_DISABLE_SPEEDY !== 'undefined' && process.env.REACT_APP_SC_DISABLE_SPEEDY !== '' ? process.env.REACT_APP_SC_DISABLE_SPEEDY === 'false' ? false : process.env.REACT_APP_SC_DISABLE_SPEEDY : typeof process.env.SC_DISABLE_SPEEDY !== 'undefined' && process.env.SC_DISABLE_SPEEDY !== '' ? process.env.SC_DISABLE_SPEEDY === 'false' ? false : process.env.SC_DISABLE_SPEEDY : process.env.NODE_ENV !== 'production' : false); // Shared empty execution context when generating static styles
 
 //      
 var EMPTY_ARRAY = Object.freeze([]);
@@ -998,8 +998,8 @@ function addUnitIfNeeded(name, value) {
     return '';
   }
 
-  if (typeof value === 'number' && value !== 0 && !(name in unitless)) {
-    return value + "px"; // Presumes implicit 'px' suffix for unitless numbers
+  if (typeof value === 'number' && value !== 0 && !(name in unitless) && !name.startsWith('--')) {
+    return value + "px"; // Presumes implicit 'px' suffix for unitless numbers except for CSS variables
   }
 
   return String(value).trim();
@@ -5994,7 +5994,7 @@ var StyledNativeComponent = /*#__PURE__*/function (_Component) {
       propsForElement.style = typeof style === 'function' ? function (state) {
         return [generatedStyles].concat(style(state));
       } : [generatedStyles].concat(style);
-      propsForElement.testID = testID;
+      propsForElement.testID = testID || propsForElement.testID;
       if (forwardedRef) propsForElement.ref = forwardedRef;
       if (forwardedAs) propsForElement.as = forwardedAs;
       return React.createElement(elementToBeRendered, propsForElement);