@mgcrea/react-native-tailwind 0.11.1 → 0.12.0

package/src/babel/plugin.ts

@@ -276,6 +276,10 @@ export default function reactNativeTailwindBabelPlugin(
           state.twImportNames = new Set();
           state.hasTwImport = false;
           state.functionComponentsNeedingColorScheme = new Set();
+          state.hasColorSchemeImport = false;
+          state.colorSchemeLocalIdentifier = undefined;
+          state.needsPlatformImport = false;
+          state.hasPlatformImport = false;
 
           // Load custom theme from tailwind.config.*
           state.customTheme = extractCustomTheme(state.file.opts.filename ?? "");
@@ -367,7 +371,8 @@ export default function reactNativeTailwindBabelPlugin(
 
         // Track color scheme hook import from the configured source
         // (default: react-native, but can be custom like @/hooks/useColorScheme)
-        if (node.source.value === state.colorSchemeImportSource) {
+        // Only track value imports (not type-only imports which get erased)
+        if (node.source.value === state.colorSchemeImportSource && node.importKind !== "type") {
           const specifiers = node.specifiers;
 
           for (const spec of specifiers) {
@@ -444,7 +449,16 @@ export default function reactNativeTailwindBabelPlugin(
         state.hasClassNames = true;
 
         // Process the className with modifiers
-        processTwCall(className, path, state, parseClassName, generateStyleKey, splitModifierClasses, t);
+        processTwCall(
+          className,
+          path,
+          state,
+          parseClassName,
+          generateStyleKey,
+          splitModifierClasses,
+          findComponentScope,
+          t,
+        );
       },
 
       // Handle twStyle('...') call expressions
@@ -494,7 +508,16 @@ export default function reactNativeTailwindBabelPlugin(
         state.hasClassNames = true;
 
         // Process the className with modifiers
-        processTwCall(className, path, state, parseClassName, generateStyleKey, splitModifierClasses, t);
+        processTwCall(
+          className,
+          path,
+          state,
+          parseClassName,
+          generateStyleKey,
+          splitModifierClasses,
+          findComponentScope,
+          t,
+        );
       },
 
       JSXAttribute(path, state) {
@@ -517,20 +540,22 @@ export default function reactNativeTailwindBabelPlugin(
         // Determine target style prop based on attribute name
         const targetStyleProp = getTargetStyleProp(attributeName);
 
-        // Handle static string literals
-        if (t.isStringLiteral(value)) {
-          const className = value.value.trim();
+        /**
+         * Process static className string (handles both direct StringLiteral and StringLiteral in JSXExpressionContainer)
+         */
+        const processStaticClassName = (className: string): boolean => {
+          const trimmedClassName = className.trim();
 
           // Skip empty classNames
-          if (!className) {
+          if (!trimmedClassName) {
             path.remove();
-            return;
+            return true;
           }
 
           state.hasClassNames = true;
 
           // Check if className contains modifiers (active:, hover:, focus:, placeholder:, ios:, android:, web:, dark:, light:, scheme:)
-          const { baseClasses, modifierClasses: rawModifierClasses } = splitModifierClasses(className);
+          const { baseClasses, modifierClasses: rawModifierClasses } = splitModifierClasses(trimmedClassName);
 
           // Expand scheme: modifiers into dark: and light: modifiers
           const modifierClasses: ParsedModifier[] = [];
@@ -697,7 +722,7 @@ export default function reactNativeTailwindBabelPlugin(
               } else {
                 replaceWithStyleFunctionAttribute(path, styleFunctionExpression, targetStyleProp, t);
               }
-              return;
+              return true;
             } else {
               // Component doesn't support state modifiers, but we can still use platform modifiers
               // Fall through to platform-only handling
@@ -771,7 +796,7 @@ export default function reactNativeTailwindBabelPlugin(
               path.node.name = t.jsxIdentifier(targetStyleProp);
               path.node.value = t.jsxExpressionContainer(styleExpression);
             }
-            return;
+            return true;
           }
 
           // If there are state modifiers (and no platform modifiers), check if this component supports them
@@ -829,12 +854,12 @@ export default function reactNativeTailwindBabelPlugin(
                   } else {
                     replaceWithStyleFunctionAttribute(path, styleFunctionExpression, targetStyleProp, t);
                   }
-                  return;
+                  return true;
                 }
               } else {
                 // All modifiers are supported - process normally
                 const styleExpression = processStaticClassNameWithModifiers(
-                  className,
+                  trimmedClassName,
                   state,
                   parseClassName,
                   generateStyleKey,
@@ -851,7 +876,7 @@ export default function reactNativeTailwindBabelPlugin(
                 } else {
                   replaceWithStyleFunctionAttribute(path, styleFunctionExpression, targetStyleProp, t);
                 }
-                return;
+                return true;
               }
             } else {
               // Component doesn't support any modifiers
@@ -871,7 +896,7 @@ export default function reactNativeTailwindBabelPlugin(
           if (!classNameForStyle) {
             // No base classes, only had placeholder modifiers - just remove className
             path.remove();
-            return;
+            return true;
           }
 
           const styleObject = parseClassName(classNameForStyle, state.customTheme);
@@ -888,7 +913,14 @@ export default function reactNativeTailwindBabelPlugin(
             // Replace className with style prop
             replaceWithStyleAttribute(path, styleKey, targetStyleProp, state.stylesIdentifier, t);
           }
-          return;
+          return true;
+        };
+
+        // Handle static string literals
+        if (t.isStringLiteral(value)) {
+          if (processStaticClassName(value.value)) {
+            return;
+          }
         }
 
         // Handle dynamic expressions (JSXExpressionContainer)
@@ -900,6 +932,13 @@ export default function reactNativeTailwindBabelPlugin(
             return;
           }
 
+          // Fast path: Support string literals wrapped in JSXExpressionContainer: className={"flex-row"}
+          if (t.isStringLiteral(expression)) {
+            if (processStaticClassName(expression.value)) {
+              return;
+            }
+          }
+
           try {
             // Find component scope for color scheme modifiers
             const componentScope = findComponentScope(path, t);

package/src/babel/utils/twProcessing.ts

@@ -5,9 +5,16 @@
 import type { NodePath } from "@babel/core";
 import type * as BabelTypes from "@babel/types";
 import type { CustomTheme, ModifierType, ParsedModifier } from "../../parser/index.js";
-import { expandSchemeModifier, isSchemeModifier } from "../../parser/index.js";
+import {
+  expandSchemeModifier,
+  isColorSchemeModifier,
+  isPlatformModifier,
+  isSchemeModifier,
+} from "../../parser/index.js";
 import type { SchemeModifierConfig } from "../../types/config.js";
 import type { StyleObject } from "../../types/core.js";
+import { processColorSchemeModifiers } from "./colorSchemeModifierProcessing.js";
+import { processPlatformModifiers } from "./platformModifierProcessing.js";
 
 /**
  * Plugin state interface (subset needed for tw processing)
@@ -18,11 +25,20 @@ export interface TwProcessingState {
   customTheme: CustomTheme;
   schemeModifierConfig: SchemeModifierConfig;
   stylesIdentifier: string;
+  // Color scheme support (for dark:/light: modifiers)
+  needsColorSchemeImport: boolean;
+  colorSchemeVariableName: string;
+  functionComponentsNeedingColorScheme: Set<NodePath<BabelTypes.Function>>;
+  colorSchemeLocalIdentifier?: string;
+  // Platform support (for ios:/android:/web: modifiers)
+  needsPlatformImport: boolean;
 }
 
 /**
  * Process tw`...` or twStyle('...') call and replace with TwStyle object
  * Generates: { style: styles._base, activeStyle: styles._active, ... }
+ * When color-scheme modifiers are present, generates: { style: [base, _twColorScheme === 'dark' && dark, ...] }
+ * When platform modifiers are present, generates: { style: [base, Platform.select({ ios: ..., android: ... })] }
  */
 export function processTwCall(
   className: string,
@@ -31,6 +47,7 @@ export function processTwCall(
   parseClassName: (className: string, customTheme?: CustomTheme) => StyleObject,
   generateStyleKey: (className: string) => string,
   splitModifierClasses: (className: string) => { baseClasses: string[]; modifierClasses: ParsedModifier[] },
+  findComponentScope: (path: NodePath, t: typeof BabelTypes) => NodePath<BabelTypes.Function> | null,
   t: typeof BabelTypes,
 ): void {
   const { baseClasses, modifierClasses: rawModifierClasses } = splitModifierClasses(className);
@@ -74,9 +91,200 @@ export function processTwCall(
     objectProperties.push(t.objectProperty(t.identifier("style"), t.objectExpression([])));
   }
 
-  // Group modifiers by type
+  // Separate color-scheme and platform modifiers from other modifiers
+  const colorSchemeModifiers = modifierClasses.filter((m) => isColorSchemeModifier(m.modifier));
+  const platformModifiers = modifierClasses.filter((m) => isPlatformModifier(m.modifier));
+  const otherModifiers = modifierClasses.filter(
+    (m) => !isColorSchemeModifier(m.modifier) && !isPlatformModifier(m.modifier),
+  );
+
+  // Check if we need color scheme support
+  const hasColorSchemeModifiers = colorSchemeModifiers.length > 0;
+  let componentScope: NodePath<BabelTypes.Function> | null = null;
+
+  if (hasColorSchemeModifiers) {
+    // Find component scope for hook injection
+    componentScope = findComponentScope(path, t);
+
+    if (!componentScope) {
+      // Warning: color scheme modifiers used outside component scope
+      if (process.env.NODE_ENV !== "production") {
+        console.warn(
+          `[react-native-tailwind] Color scheme modifiers (dark:, light:) in tw/twStyle calls ` +
+            `must be used inside a React component. Modifiers will be ignored.`,
+        );
+      }
+    } else {
+      // Track this component as needing the color scheme hook
+      state.functionComponentsNeedingColorScheme.add(componentScope);
+    }
+  }
+
+  // Process color scheme modifiers if we have a valid component scope
+  if (hasColorSchemeModifiers && componentScope) {
+    // Generate conditional expressions for color scheme
+    const colorSchemeConditionals = processColorSchemeModifiers(
+      colorSchemeModifiers,
+      state,
+      parseClassName,
+      generateStyleKey,
+      t,
+    );
+
+    // Build style array: [baseStyle, _twColorScheme === 'dark' && darkStyle, ...]
+    const styleArrayElements: BabelTypes.Expression[] = [];
+
+    // Add base style if present
+    if (baseClasses.length > 0) {
+      const baseClassName = baseClasses.join(" ");
+      const baseStyleObject = parseClassName(baseClassName, state.customTheme);
+      const baseStyleKey = generateStyleKey(baseClassName);
+      state.styleRegistry.set(baseStyleKey, baseStyleObject);
+      styleArrayElements.push(
+        t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey)),
+      );
+    }
+
+    // Add color scheme conditionals
+    styleArrayElements.push(...colorSchemeConditionals);
+
+    // Replace style property with array
+    objectProperties[0] = t.objectProperty(t.identifier("style"), t.arrayExpression(styleArrayElements));
+
+    // Also add darkStyle/lightStyle properties for manual processing
+    // (e.g., extracting raw hex values for Reanimated animations)
+    const darkModifiers = colorSchemeModifiers.filter((m) => m.modifier === "dark");
+    const lightModifiers = colorSchemeModifiers.filter((m) => m.modifier === "light");
+
+    if (darkModifiers.length > 0) {
+      const darkClassNames = darkModifiers.map((m) => m.baseClass).join(" ");
+      const darkStyleObject = parseClassName(darkClassNames, state.customTheme);
+      const darkStyleKey = generateStyleKey(`dark_${darkClassNames}`);
+      state.styleRegistry.set(darkStyleKey, darkStyleObject);
+
+      objectProperties.push(
+        t.objectProperty(
+          t.identifier("darkStyle"),
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(darkStyleKey)),
+        ),
+      );
+    }
+
+    if (lightModifiers.length > 0) {
+      const lightClassNames = lightModifiers.map((m) => m.baseClass).join(" ");
+      const lightStyleObject = parseClassName(lightClassNames, state.customTheme);
+      const lightStyleKey = generateStyleKey(`light_${lightClassNames}`);
+      state.styleRegistry.set(lightStyleKey, lightStyleObject);
+
+      objectProperties.push(
+        t.objectProperty(
+          t.identifier("lightStyle"),
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(lightStyleKey)),
+        ),
+      );
+    }
+  }
+
+  // Process platform modifiers if present
+  const hasPlatformModifiers = platformModifiers.length > 0;
+
+  if (hasPlatformModifiers) {
+    // Mark that we need Platform import
+    state.needsPlatformImport = true;
+
+    // Generate Platform.select() expression
+    const platformSelectExpression = processPlatformModifiers(
+      platformModifiers,
+      state,
+      parseClassName,
+      generateStyleKey,
+      t,
+    );
+
+    // If we already have a style array (from color scheme modifiers), add to it
+    // Otherwise, convert style property to an array
+    if (hasColorSchemeModifiers && componentScope) {
+      // Already have style array from color scheme processing
+      // Get the current array expression and add Platform.select to it
+      const styleProperty = objectProperties.find(
+        (prop) => t.isIdentifier(prop.key) && prop.key.name === "style",
+      );
+      if (styleProperty && t.isArrayExpression(styleProperty.value)) {
+        styleProperty.value.elements.push(platformSelectExpression);
+      }
+    } else {
+      // No color scheme modifiers, create style array with base + Platform.select
+      const styleArrayElements: BabelTypes.Expression[] = [];
+
+      // Add base style if present
+      if (baseClasses.length > 0) {
+        const baseClassName = baseClasses.join(" ");
+        const baseStyleObject = parseClassName(baseClassName, state.customTheme);
+        const baseStyleKey = generateStyleKey(baseClassName);
+        state.styleRegistry.set(baseStyleKey, baseStyleObject);
+        styleArrayElements.push(
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(baseStyleKey)),
+        );
+      }
+
+      // Add Platform.select() expression
+      styleArrayElements.push(platformSelectExpression);
+
+      // Replace style property with array
+      objectProperties[0] = t.objectProperty(t.identifier("style"), t.arrayExpression(styleArrayElements));
+    }
+
+    // Also add iosStyle/androidStyle/webStyle properties for manual processing
+    const iosModifiers = platformModifiers.filter((m) => m.modifier === "ios");
+    const androidModifiers = platformModifiers.filter((m) => m.modifier === "android");
+    const webModifiers = platformModifiers.filter((m) => m.modifier === "web");
+
+    if (iosModifiers.length > 0) {
+      const iosClassNames = iosModifiers.map((m) => m.baseClass).join(" ");
+      const iosStyleObject = parseClassName(iosClassNames, state.customTheme);
+      const iosStyleKey = generateStyleKey(`ios_${iosClassNames}`);
+      state.styleRegistry.set(iosStyleKey, iosStyleObject);
+
+      objectProperties.push(
+        t.objectProperty(
+          t.identifier("iosStyle"),
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(iosStyleKey)),
+        ),
+      );
+    }
+
+    if (androidModifiers.length > 0) {
+      const androidClassNames = androidModifiers.map((m) => m.baseClass).join(" ");
+      const androidStyleObject = parseClassName(androidClassNames, state.customTheme);
+      const androidStyleKey = generateStyleKey(`android_${androidClassNames}`);
+      state.styleRegistry.set(androidStyleKey, androidStyleObject);
+
+      objectProperties.push(
+        t.objectProperty(
+          t.identifier("androidStyle"),
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(androidStyleKey)),
+        ),
+      );
+    }
+
+    if (webModifiers.length > 0) {
+      const webClassNames = webModifiers.map((m) => m.baseClass).join(" ");
+      const webStyleObject = parseClassName(webClassNames, state.customTheme);
+      const webStyleKey = generateStyleKey(`web_${webClassNames}`);
+      state.styleRegistry.set(webStyleKey, webStyleObject);
+
+      objectProperties.push(
+        t.objectProperty(
+          t.identifier("webStyle"),
+          t.memberExpression(t.identifier(state.stylesIdentifier), t.identifier(webStyleKey)),
+        ),
+      );
+    }
+  }
+
+  // Group other modifiers by type (non-color-scheme and non-platform modifiers)
   const modifiersByType = new Map<ModifierType, ParsedModifier[]>();
-  for (const mod of modifierClasses) {
+  for (const mod of otherModifiers) {
     if (!modifiersByType.has(mod.modifier)) {
       modifiersByType.set(mod.modifier, []);
     }
@@ -86,7 +294,7 @@ export function processTwCall(
     }
   }
 
-  // Add modifier styles
+  // Add modifier styles (activeStyle, focusStyle, etc.) for non-color-scheme modifiers
   for (const [modifierType, modifiers] of modifiersByType) {
     const modifierClassNames = modifiers.map((m) => m.baseClass).join(" ");
     const modifierStyleObject = parseClassName(modifierClassNames, state.customTheme);

package/src/parser/spacing.test.ts

@@ -238,6 +238,68 @@ describe("parseSpacing - edge cases", () => {
   });
 });
 
+describe("parseSpacing - decimal arbitrary values", () => {
+  it("should parse margin with decimal arbitrary values", () => {
+    expect(parseSpacing("m-[4.5px]")).toEqual({ margin: 4.5 });
+    expect(parseSpacing("m-[4.5]")).toEqual({ margin: 4.5 });
+    expect(parseSpacing("m-[16.75px]")).toEqual({ margin: 16.75 });
+    expect(parseSpacing("m-[16.75]")).toEqual({ margin: 16.75 });
+    expect(parseSpacing("m-[100.25px]")).toEqual({ margin: 100.25 });
+    expect(parseSpacing("m-[0.5]")).toEqual({ margin: 0.5 });
+  });
+
+  it("should parse padding with decimal arbitrary values", () => {
+    expect(parseSpacing("p-[4.5px]")).toEqual({ padding: 4.5 });
+    expect(parseSpacing("p-[4.5]")).toEqual({ padding: 4.5 });
+    expect(parseSpacing("pl-[4.5px]")).toEqual({ paddingLeft: 4.5 });
+    expect(parseSpacing("pl-[4.5]")).toEqual({ paddingLeft: 4.5 });
+    expect(parseSpacing("pr-[16.75px]")).toEqual({ paddingRight: 16.75 });
+    expect(parseSpacing("pt-[10.5]")).toEqual({ paddingTop: 10.5 });
+    expect(parseSpacing("pb-[20.25px]")).toEqual({ paddingBottom: 20.25 });
+  });
+
+  it("should parse padding horizontal/vertical with decimal arbitrary values", () => {
+    expect(parseSpacing("px-[4.5px]")).toEqual({ paddingHorizontal: 4.5 });
+    expect(parseSpacing("py-[10.75]")).toEqual({ paddingVertical: 10.75 });
+  });
+
+  it("should parse gap with decimal arbitrary values", () => {
+    expect(parseSpacing("gap-[4.5px]")).toEqual({ gap: 4.5 });
+    expect(parseSpacing("gap-[4.5]")).toEqual({ gap: 4.5 });
+    expect(parseSpacing("gap-[16.75px]")).toEqual({ gap: 16.75 });
+    expect(parseSpacing("gap-[0.5]")).toEqual({ gap: 0.5 });
+  });
+
+  it("should parse negative margin with decimal arbitrary values", () => {
+    expect(parseSpacing("-m-[4.5px]")).toEqual({ margin: -4.5 });
+    expect(parseSpacing("-m-[4.5]")).toEqual({ margin: -4.5 });
+    expect(parseSpacing("-m-[10.5px]")).toEqual({ margin: -10.5 });
+    expect(parseSpacing("-mt-[16.75px]")).toEqual({ marginTop: -16.75 });
+    expect(parseSpacing("-ml-[8.25]")).toEqual({ marginLeft: -8.25 });
+    expect(parseSpacing("-mx-[12.5px]")).toEqual({ marginHorizontal: -12.5 });
+    expect(parseSpacing("-my-[20.75]")).toEqual({ marginVertical: -20.75 });
+  });
+
+  it("should parse margin directional with decimal arbitrary values", () => {
+    expect(parseSpacing("mt-[4.5px]")).toEqual({ marginTop: 4.5 });
+    expect(parseSpacing("mr-[8.25]")).toEqual({ marginRight: 8.25 });
+    expect(parseSpacing("mb-[16.75px]")).toEqual({ marginBottom: 16.75 });
+    expect(parseSpacing("ml-[12.5]")).toEqual({ marginLeft: 12.5 });
+  });
+
+  it("should parse margin horizontal/vertical with decimal arbitrary values", () => {
+    expect(parseSpacing("mx-[4.5px]")).toEqual({ marginHorizontal: 4.5 });
+    expect(parseSpacing("my-[10.75]")).toEqual({ marginVertical: 10.75 });
+  });
+
+  it("should handle edge case decimal values", () => {
+    expect(parseSpacing("m-[0.1px]")).toEqual({ margin: 0.1 });
+    expect(parseSpacing("p-[0.001]")).toEqual({ padding: 0.001 });
+    expect(parseSpacing("gap-[999.999px]")).toEqual({ gap: 999.999 });
+    expect(parseSpacing("-m-[0.5]")).toEqual({ margin: -0.5 });
+  });
+});
+
 describe("parseSpacing - comprehensive coverage", () => {
   it("should parse all margin directions with same value", () => {
     const value = 16;

package/src/parser/spacing.ts

@@ -43,14 +43,14 @@ export const SPACING_SCALE: Record<string, number> = {
 };
 
 /**
- * Parse arbitrary spacing value: [16px], [20]
- * Returns number for px values, null for unsupported formats
+ * Parse arbitrary spacing value: [16px], [20], [4.5px], [16.75]
+ * Returns number for px values (including decimals), null for unsupported formats
  */
 function parseArbitrarySpacing(value: string): number | null {
-  // Match: [16px] or [16] (pixels only)
-  const pxMatch = value.match(/^\[(\d+)(?:px)?\]$/);
+  // Match: [16px], [16], [4.5px], [4.5] (pixels, including decimals)
+  const pxMatch = value.match(/^\[(-?\d+(?:\.\d+)?)(?:px)?\]$/);
   if (pxMatch) {
-    return parseInt(pxMatch[1], 10);
+    return parseFloat(pxMatch[1]);
   }
 
   // Warn about unsupported formats
@@ -58,7 +58,7 @@ function parseArbitrarySpacing(value: string): number | null {
     /* v8 ignore next 5 */
     if (process.env.NODE_ENV !== "production") {
       console.warn(
-        `[react-native-tailwind] Unsupported arbitrary spacing value: ${value}. Only px values are supported (e.g., [16px] or [16]).`,
+        `[react-native-tailwind] Unsupported arbitrary spacing value: ${value}. Only px values are supported (e.g., [16px], [16], [4.5px], [4.5]).`,
       );
     }
     return null;
@@ -69,7 +69,7 @@ function parseArbitrarySpacing(value: string): number | null {
 
 /**
  * Parse spacing classes (margin, padding, gap)
- * Examples: m-4, mx-2, mt-8, p-4, px-2, pt-8, gap-4, m-[16px], -m-4, -mt-[10px]
+ * Examples: m-4, mx-2, mt-8, p-4, px-2, pt-8, gap-4, m-[16px], pl-[4.5px], -m-4, -mt-[10px]
  */
 export function parseSpacing(cls: string): StyleObject | null {
   // Margin: m-4, mx-2, mt-8, m-[16px], -m-4, -mt-2, etc.

package/src/runtime.test.ts

@@ -317,7 +317,10 @@ describe("runtime", () => {
     it("should provide raw hex values for animations", () => {
       const result = tw`bg-blue-500 active:bg-blue-700`;
       // Access raw backgroundColor value for use with reanimated
-      expect(result?.style.backgroundColor).toBe("#2b7fff");
+      const style = Array.isArray(result?.style) ? result.style.find((s) => s !== false) : result?.style;
+      expect(
+        style && typeof style === "object" && "backgroundColor" in style ? style.backgroundColor : undefined,
+      ).toBe("#2b7fff");
       expect(result?.activeStyle?.backgroundColor).toBe("#1447e6");
     });
 

package/src/types/runtime.ts

@@ -7,11 +7,18 @@ export type NativeStyle = ViewStyle | TextStyle | ImageStyle;
 
 /**
  * Return type for tw/twStyle functions with separate style properties for modifiers
+ * When color-scheme modifiers (dark:, light:) are present, style becomes an array with runtime conditionals
+ * When platform modifiers (ios:, android:, web:) are present, style becomes an array with Platform.select()
  */
 export type TwStyle<T extends NativeStyle = NativeStyle> = {
-  style: T;
+  style: T | Array<T | false>;
   activeStyle?: T;
   focusStyle?: T;
   disabledStyle?: T;
   placeholderStyle?: TextStyle;
+  lightStyle?: T;
+  darkStyle?: T;
+  iosStyle?: T;
+  androidStyle?: T;
+  webStyle?: T;
 };