react-native-css 0.0.0-nightly.03a4e35 → 0.0.0-nightly.04af4c6

package/dist/typescript/module/src/components/ScrollView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollView.d.ts","sourceRoot":"","sources":["../../../../../src/components/ScrollView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,YAAY,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAC;AAEhF,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,WAAW,EACjB,MAAM,YAAY,CAAC;AAEpB,QAAA,MAAM,OAAO,EAAE,mBAAmB,CAAC,OAAO,YAAY,CAGrD,CAAC;AAEF,wBAAgB,UAAU,CACxB,KAAK,EAAE,WAAW,CAAC,eAAe,EAAE,OAAO,OAAO,CAAC,0FAGpD;AAED,eAAe,UAAU,CAAC"}

package/dist/typescript/module/src/components/TextInput.d.ts

@@ -1,8 +1,6 @@
-import { type TextInputProps } from "react-native";
-import { type StyledProps } from "../runtime";
-declare const mapping: {
-    className: "style";
-};
+import { TextInput as RNTextInput, type TextInputProps } from "react-native";
+import { type StyledConfiguration, type StyledProps } from "../runtime";
+declare const mapping: StyledConfiguration<typeof RNTextInput>;
 export declare function TextInput(props: StyledProps<TextInputProps, typeof mapping>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export default TextInput;
 //# sourceMappingURL=TextInput.d.ts.map

package/dist/typescript/module/src/components/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA4B,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAE7E,OAAO,EAGL,KAAK,WAAW,EACjB,MAAM,YAAY,CAAC;AAEpB,QAAA,MAAM,OAAO;;CAEsC,CAAC;AAEpD,wBAAgB,SAAS,CAAC,KAAK,EAAE,WAAW,CAAC,cAAc,EAAE,OAAO,OAAO,CAAC,0FAE3E;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../../src/components/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,WAAW,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAE7E,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,WAAW,EACjB,MAAM,YAAY,CAAC;AAEpB,QAAA,MAAM,OAAO,EAAE,mBAAmB,CAAC,OAAO,WAAW,CAOpD,CAAC;AAEF,wBAAgB,SAAS,CAAC,KAAK,EAAE,WAAW,CAAC,cAAc,EAAE,OAAO,OAAO,CAAC,0FAE3E;AAED,eAAe,SAAS,CAAC"}

package/dist/typescript/module/src/components/TouchableHighlight.d.ts

@@ -0,0 +1,6 @@
+import { TouchableHighlight as RNTouchableHighlight, type TouchableHighlightProps } from "react-native";
+import { type StyledConfiguration, type StyledProps } from "../runtime";
+declare const mapping: StyledConfiguration<typeof RNTouchableHighlight>;
+export declare function TouchableHighlight(props: StyledProps<TouchableHighlightProps, typeof mapping>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export default TouchableHighlight;
+//# sourceMappingURL=TouchableHighlight.d.ts.map

package/dist/typescript/module/src/components/TouchableHighlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TouchableHighlight.d.ts","sourceRoot":"","sources":["../../../../../src/components/TouchableHighlight.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,IAAI,oBAAoB,EAC1C,KAAK,uBAAuB,EAC7B,MAAM,cAAc,CAAC;AAEtB,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,WAAW,EACjB,MAAM,YAAY,CAAC;AAEpB,QAAA,MAAM,OAAO,EAAE,mBAAmB,CAAC,OAAO,oBAAoB,CAE7D,CAAC;AAEF,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,WAAW,CAAC,uBAAuB,EAAE,OAAO,OAAO,CAAC,0FAG5D;AAED,eAAe,kBAAkB,CAAC"}

package/dist/typescript/module/src/components/TouchableOpacity.d.ts

@@ -0,0 +1,6 @@
+import { TouchableOpacity as RNTouchableOpacity, type TouchableOpacityProps } from "react-native";
+import { type StyledConfiguration, type StyledProps } from "../runtime";
+declare const mapping: StyledConfiguration<typeof RNTouchableOpacity>;
+export declare function TouchableOpacity(props: StyledProps<TouchableOpacityProps, typeof mapping>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export default TouchableOpacity;
+//# sourceMappingURL=TouchableOpacity.d.ts.map

package/dist/typescript/module/src/components/TouchableOpacity.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TouchableOpacity.d.ts","sourceRoot":"","sources":["../../../../../src/components/TouchableOpacity.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,IAAI,kBAAkB,EACtC,KAAK,qBAAqB,EAC3B,MAAM,cAAc,CAAC;AAEtB,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,WAAW,EACjB,MAAM,YAAY,CAAC;AAEpB,QAAA,MAAM,OAAO,EAAE,mBAAmB,CAAC,OAAO,kBAAkB,CAE3D,CAAC;AAEF,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,WAAW,CAAC,qBAAqB,EAAE,OAAO,OAAO,CAAC,0FAG1D;AAED,eAAe,gBAAgB,CAAC"}

package/dist/typescript/module/src/components/TouchableWithoutFeedback.d.ts

@@ -0,0 +1,6 @@
+import { TouchableWithoutFeedback as RNTouchableWithoutFeedback, type TouchableWithoutFeedbackProps } from "react-native";
+import { type StyledConfiguration, type StyledProps } from "../runtime";
+declare const mapping: StyledConfiguration<typeof RNTouchableWithoutFeedback>;
+export declare function TouchableWithoutFeedback(props: StyledProps<TouchableWithoutFeedbackProps, typeof mapping>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export default TouchableWithoutFeedback;
+//# sourceMappingURL=TouchableWithoutFeedback.d.ts.map

package/dist/typescript/module/src/components/TouchableWithoutFeedback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TouchableWithoutFeedback.d.ts","sourceRoot":"","sources":["../../../../../src/components/TouchableWithoutFeedback.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,wBAAwB,IAAI,0BAA0B,EACtD,KAAK,6BAA6B,EACnC,MAAM,cAAc,CAAC;AAEtB,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,WAAW,EACjB,MAAM,YAAY,CAAC;AAEpB,QAAA,MAAM,OAAO,EAAE,mBAAmB,CAAC,OAAO,0BAA0B,CAEnE,CAAC;AAEF,wBAAgB,wBAAwB,CACtC,KAAK,EAAE,WAAW,CAAC,6BAA6B,EAAE,OAAO,OAAO,CAAC,0FAGlE;AAED,eAAe,wBAAwB,CAAC"}

package/dist/typescript/module/src/components/VirtualizedList.d.ts

@@ -0,0 +1,6 @@
+import { VirtualizedList as RNVirtualizedList, type VirtualizedListProps } from "react-native";
+import { type StyledConfiguration, type StyledProps } from "../runtime";
+declare const mapping: StyledConfiguration<typeof RNVirtualizedList>;
+export declare function VirtualizedList<ItemT>(props: StyledProps<VirtualizedListProps<ItemT>, typeof mapping>): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export default VirtualizedList;
+//# sourceMappingURL=VirtualizedList.d.ts.map

package/dist/typescript/module/src/components/VirtualizedList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VirtualizedList.d.ts","sourceRoot":"","sources":["../../../../../src/components/VirtualizedList.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,IAAI,iBAAiB,EACpC,KAAK,oBAAoB,EAC1B,MAAM,cAAc,CAAC;AAEtB,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,WAAW,EACjB,MAAM,YAAY,CAAC;AAEpB,QAAA,MAAM,OAAO,EAAE,mBAAmB,CAAC,OAAO,iBAAiB,CAK1D,CAAC;AAEF,wBAAgB,eAAe,CAAC,KAAK,EACnC,KAAK,EAAE,WAAW,CAAC,oBAAoB,CAAC,KAAK,CAAC,EAAE,OAAO,OAAO,CAAC,0FAGhE;AAED,eAAe,eAAe,CAAC"}

package/dist/typescript/module/src/components/index.d.ts

@@ -3,8 +3,16 @@ export { ActivityIndicator } from "./ActivityIndicator";
 export { Button } from "./Button";
 export { FlatList } from "./FlatList";
 export { Image } from "./Image";
+export { ImageBackground } from "./ImageBackground";
+export { KeyboardAvoidingView } from "./KeyboardAvoidingView";
+export { Pressable } from "./Pressable";
+export { ScrollView } from "./ScrollView";
 export { Switch } from "./Switch";
 export { Text } from "./Text";
 export { TextInput } from "./TextInput";
+export { TouchableHighlight } from "./TouchableHighlight";
+export { TouchableOpacity } from "./TouchableOpacity";
+export { TouchableWithoutFeedback } from "./TouchableWithoutFeedback";
 export { View } from "./View";
+export { VirtualizedList } from "./VirtualizedList";
 //# sourceMappingURL=index.d.ts.map

package/dist/typescript/module/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAE7B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAE7B,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-css",
-  "version": "0.0.0-nightly.03a4e35",
+  "version": "0.0.0-nightly.04af4c6",
   "description": "A CSS polyfill for React Native",
   "exports": {
     ".": {
@@ -193,8 +193,8 @@
   },
   "peerDependencies": {
     "@expo/metro-config": ">=54",
-    "react": "19.1.0",
-    "react-native": "0.81.1"
+    "react": ">=19",
+    "react-native": ">=0.81"
   },
   "devDependencies": {
     "@babel/core": "^7.28.0",

package/src/compiler/atRules.ts

@@ -47,11 +47,11 @@ export function maybeMutateReactNativeOptions(
 }
 
 /***********************************************
- * @prop                                       *
+ * @nativeMapping                                       *
  ***********************************************/
 
-function isPropAtRule(rule: Rule | PropAtRule): rule is PropAtRule {
-  return rule.type === "unknown" && rule.value.name === "prop";
+function isNativeMappingAtRule(rule: Rule | PropAtRule): rule is PropAtRule {
+  return rule.type === "unknown" && rule.value.name === "nativeMapping";
 }
 
 export function parsePropAtRule(rules?: (Rule | PropAtRule)[]) {
@@ -71,14 +71,14 @@ export function parsePropAtRule(rules?: (Rule | PropAtRule)[]) {
   if (!rules) return mapping;
 
   for (const rule of rules) {
-    if (!isPropAtRule(rule)) continue;
+    if (!isNativeMappingAtRule(rule)) continue;
 
     if (rule.value.prelude.length > 0) {
       const prelude = rule.value.prelude.filter((item) => {
         return item.value.type !== "white-space";
       });
 
-      propAtRuleBlock(prelude, mapping);
+      nativeMappingAtRuleBlock(prelude, mapping);
     } else if (rule.value.block) {
       // Remove all whitespace tokens
       const blocks = rule.value.block.filter((item) => {
@@ -91,7 +91,7 @@ export function parsePropAtRule(rules?: (Rule | PropAtRule)[]) {
       });
 
       for (const block of blockRules) {
-        propAtRuleBlock(block, mapping);
+        nativeMappingAtRuleBlock(block, mapping);
       }
     }
   }
@@ -99,38 +99,51 @@ export function parsePropAtRule(rules?: (Rule | PropAtRule)[]) {
   return mapping;
 }
 
-function propAtRuleBlock(
+function nativeMappingAtRuleBlock(
   token: Extract<TokenOrValue, { type: "token" }>[],
   mapping: StyleRuleMapping = {},
 ): StyleRuleMapping {
-  const [from, to] = splitByDelimiter(token, (item) => {
+  let [from, to] = splitByDelimiter(token, (item) => {
     return item.value.type === "colon";
   });
 
-  if (!from || from.length !== 1) {
-    return mapping;
+  // @nativeMapping <to>; (has no from value)
+  if (!to) {
+    to = from;
+    from = [
+      {
+        type: "token",
+        value: { type: "ident", value: "*" },
+      },
+    ];
   }
 
-  const fromToken = from[0];
-  if (!fromToken || fromToken.value.type !== "ident") {
+  // We can only map from a single property
+  if (!from || from.length !== 1 || !to) {
     return mapping;
   }
 
-  if (!to) {
-    mapping["*"] = toRNProperty(fromToken.value.value);
+  const fromToken = from[0];
+  if (!fromToken || fromToken.value.type !== "ident") {
     return mapping;
   }
 
-  mapping[toRNProperty(fromToken.value.value)] = to.flatMap((item, index) => {
+  let value: string | string[] = to.flatMap((item, index) => {
     switch (item.value.type) {
       case "delim":
-        return index === 0 && item.value.value === "*" ? ["*"] : [];
+        return index === 0 && item.value.value === "&" ? ["&"] : [];
       case "ident":
-        return [toRNProperty(item.value.value)];
+        return item.value.value.split(".").map((part) => toRNProperty(part));
       default:
         return [];
     }
   });
 
+  if (value.length === 2 && value[0] === "&" && value[1]) {
+    value = value[1];
+  }
+
+  mapping[toRNProperty(fromToken.value.value)] = value;
+
   return mapping;
 }

package/src/compiler/declarations.ts

@@ -1984,11 +1984,11 @@ export function parseTextShadow(
     parseColor(textShadow.color, builder),
   );
   builder.addDescriptor(
-    "*.textShadowOffset.width",
+    "&.textShadowOffset.width",
     parseLength(textShadow.xOffset, builder),
   );
   builder.addDescriptor(
-    "*.textShadowOffset.height",
+    "&.textShadowOffset.height",
     parseLength(textShadow.yOffset, builder),
   );
   builder.addDescriptor(
@@ -2374,27 +2374,27 @@ export function parseBoxShadow(
 ) {
   for (const [index, shadow] of value.entries()) {
     builder.addDescriptor(
-      `*.boxShadow.[${index}].color`,
+      `&.boxShadow.[${index}].color`,
       parseColor(shadow.color, builder),
     );
     builder.addDescriptor(
-      `*.boxShadow.[${index}].offsetX`,
+      `&.boxShadow.[${index}].offsetX`,
       parseLength(shadow.xOffset, builder),
     );
     builder.addDescriptor(
-      `*.boxShadow.[${index}].offsetY`,
+      `&.boxShadow.[${index}].offsetY`,
       parseLength(shadow.yOffset, builder),
     );
     builder.addDescriptor(
-      `*.boxShadow.[${index}].blurRadius`,
+      `&.boxShadow.[${index}].blurRadius`,
       parseLength(shadow.blur, builder),
     );
     builder.addDescriptor(
-      `*.boxShadow.[${index}].spreadDistance`,
+      `&.boxShadow.[${index}].spreadDistance`,
       parseLength(shadow.spread, builder),
     );
     builder.addDescriptor(
-      `*.boxShadow.[${index}].inset`,
+      `&.boxShadow.[${index}].inset`,
       shadow.inset ? true : undefined,
     );
   }
@@ -3088,7 +3088,7 @@ function parseObjectFit(
   builder: StylesheetBuilder,
 ) {
   builder.addMapping({
-    "object-fit": "contentFit",
+    "object-fit": ["contentFit"],
   });
   builder.addDescriptor(
     "object-fit",
@@ -3101,7 +3101,7 @@ function parseObjectPosition(
   builder: StylesheetBuilder,
 ) {
   builder.addMapping({
-    "object-position": "contentPosition",
+    "object-position": ["contentPosition"],
   });
   builder.addDescriptor("object-position", [
     {},

package/src/compiler/stylesheet.ts

@@ -56,7 +56,7 @@ export class StylesheetBuilder {
     private ruleTemplate: StyleRule = {
       s: [],
     },
-    // Any default mapping should be included in the @prop parsing
+    // Any default mapping should be included in the @nativeMapping parsing
     private mapping: StyleRuleMapping = {},
     public descriptorProperty?: string,
     private shared: {
@@ -403,12 +403,10 @@ export class StylesheetBuilder {
       } else {
         forceTuple = true;
       }
-    } else if (propPath) {
-      forceTuple = true;
-    } else {
-      propPath = property;
     }
 
+    propPath ??= property;
+
     if (forceTuple && !Array.isArray(propPath)) {
       propPath = [propPath];
     }

package/src/components/ActivityIndicator.tsx

@@ -9,14 +9,14 @@ import {
   type StyledProps,
 } from "../runtime";
 
-const mapping = {
+const mapping: StyledConfiguration<typeof RNActivityIndicator> = {
   className: {
     target: "style",
     nativeStyleMapping: {
       color: "color",
     },
   },
-} satisfies StyledConfiguration<typeof RNActivityIndicator>;
+};
 
 export function ActivityIndicator(
   props: StyledProps<ActivityIndicatorProps, typeof mapping>,

package/src/components/Button.tsx

@@ -6,14 +6,14 @@ import {
   type StyledProps,
 } from "../runtime";
 
-const mapping = {
+const mapping: StyledConfiguration<typeof RNButton> = {
   className: {
     target: false,
     nativeStyleMapping: {
       color: "color",
     },
   },
-} satisfies StyledConfiguration<typeof RNButton>;
+};
 
 export function Button(props: StyledProps<ButtonProps, typeof mapping>) {
   return useCssElement(RNButton, props, mapping);

package/src/components/FlatList.tsx

@@ -6,11 +6,12 @@ import {
   type StyledProps,
 } from "../runtime";
 
-const mapping = {
-  columnWrapperStyle: "columnWrapperStyle",
-  listFooterComponentClassName: "ListFooterComponentStyle",
-  listHeaderComponentClassName: "ListHeaderComponentStyle",
-} satisfies StyledConfiguration<typeof RNFlatList>;
+const mapping: StyledConfiguration<typeof RNFlatList> = {
+  ListFooterComponentClassName: "ListFooterComponentStyle",
+  ListHeaderComponentClassName: "ListHeaderComponentStyle",
+  columnWrapperClassName: "columnWrapperStyle",
+  contentContainerClassName: "contentContainerStyle",
+};
 
 export function FlatList<ItemT>(
   props: StyledProps<FlatListProps<ItemT>, typeof mapping>,

package/src/components/Image.tsx

@@ -6,9 +6,9 @@ import {
   type StyledProps,
 } from "../runtime";
 
-const mapping = {
+const mapping: StyledConfiguration<typeof RNImage> = {
   className: "style",
-} satisfies StyledConfiguration<typeof RNImage>;
+};
 
 export function Image(props: StyledProps<ImageProps, typeof mapping>) {
   return useCssElement(RNImage, props, mapping);

package/src/components/ImageBackground.tsx

@@ -0,0 +1,27 @@
+import {
+  ImageBackground as RNImageBackground,
+  type ImageBackgroundProps,
+} from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping: StyledConfiguration<typeof RNImageBackground> = {
+  className: {
+    target: "style",
+    nativeStyleMapping: {
+      backgroundColor: true,
+    },
+  },
+};
+
+export function ImageBackground(
+  props: StyledProps<ImageBackgroundProps, typeof mapping>,
+) {
+  return useCssElement(RNImageBackground, props, mapping);
+}
+
+export default ImageBackground;

package/src/components/KeyboardAvoidingView.tsx

@@ -0,0 +1,24 @@
+import {
+  KeyboardAvoidingView as RNKeyboardAvoidingView,
+  type KeyboardAvoidingViewProps,
+} from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping: StyledConfiguration<typeof RNKeyboardAvoidingView> = {
+  className: {
+    target: "style",
+  },
+};
+
+export function KeyboardAvoidingView(
+  props: StyledProps<KeyboardAvoidingViewProps, typeof mapping>,
+) {
+  return useCssElement(RNKeyboardAvoidingView, props, mapping);
+}
+
+export default KeyboardAvoidingView;

package/src/components/Pressable.tsx

@@ -0,0 +1,17 @@
+import { Pressable as RNPressable, type PressableProps } from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping: StyledConfiguration<typeof RNPressable> = {
+  className: "style",
+};
+
+export function Pressable(props: StyledProps<PressableProps, typeof mapping>) {
+  return useCssElement(RNPressable, props, mapping);
+}
+
+export default Pressable;

package/src/components/ScrollView.tsx

@@ -0,0 +1,20 @@
+import { ScrollView as RNScrollView, type ScrollViewProps } from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping: StyledConfiguration<typeof RNScrollView> = {
+  className: "style",
+  contentContainerClassName: "contentContainerStyle",
+};
+
+export function ScrollView(
+  props: StyledProps<ScrollViewProps, typeof mapping>,
+) {
+  return useCssElement(RNScrollView, props, mapping);
+}
+
+export default ScrollView;

package/src/components/TextInput.tsx

@@ -6,9 +6,14 @@ import {
   type StyledProps,
 } from "../runtime";
 
-const mapping = {
-  className: "style",
-} satisfies StyledConfiguration<typeof RNTextInput>;
+const mapping: StyledConfiguration<typeof RNTextInput> = {
+  className: {
+    target: "style",
+    nativeStyleMapping: {
+      textAlign: true,
+    },
+  },
+};
 
 export function TextInput(props: StyledProps<TextInputProps, typeof mapping>) {
   return useCssElement(RNTextInput, props, mapping);

package/src/components/TouchableHighlight.tsx

@@ -0,0 +1,22 @@
+import {
+  TouchableHighlight as RNTouchableHighlight,
+  type TouchableHighlightProps,
+} from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping: StyledConfiguration<typeof RNTouchableHighlight> = {
+  className: "style",
+};
+
+export function TouchableHighlight(
+  props: StyledProps<TouchableHighlightProps, typeof mapping>,
+) {
+  return useCssElement(RNTouchableHighlight, props, mapping);
+}
+
+export default TouchableHighlight;

package/src/components/TouchableOpacity.tsx

@@ -0,0 +1,22 @@
+import {
+  TouchableOpacity as RNTouchableOpacity,
+  type TouchableOpacityProps,
+} from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping: StyledConfiguration<typeof RNTouchableOpacity> = {
+  className: "style",
+};
+
+export function TouchableOpacity(
+  props: StyledProps<TouchableOpacityProps, typeof mapping>,
+) {
+  return useCssElement(RNTouchableOpacity, props, mapping);
+}
+
+export default TouchableOpacity;

package/src/components/TouchableWithoutFeedback.tsx

@@ -0,0 +1,22 @@
+import {
+  TouchableWithoutFeedback as RNTouchableWithoutFeedback,
+  type TouchableWithoutFeedbackProps,
+} from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping: StyledConfiguration<typeof RNTouchableWithoutFeedback> = {
+  className: "style",
+};
+
+export function TouchableWithoutFeedback(
+  props: StyledProps<TouchableWithoutFeedbackProps, typeof mapping>,
+) {
+  return useCssElement(RNTouchableWithoutFeedback, props, mapping);
+}
+
+export default TouchableWithoutFeedback;

package/src/components/VirtualizedList.tsx

@@ -0,0 +1,25 @@
+import {
+  VirtualizedList as RNVirtualizedList,
+  type VirtualizedListProps,
+} from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping: StyledConfiguration<typeof RNVirtualizedList> = {
+  className: "style",
+  ListFooterComponentClassName: "ListFooterComponentStyle",
+  ListHeaderComponentClassName: "ListHeaderComponentStyle",
+  contentContainerClassName: "contentContainerStyle",
+};
+
+export function VirtualizedList<ItemT>(
+  props: StyledProps<VirtualizedListProps<ItemT>, typeof mapping>,
+) {
+  return useCssElement(RNVirtualizedList, props, mapping);
+}
+
+export default VirtualizedList;

package/src/components/index.tsx

@@ -4,7 +4,15 @@ export { ActivityIndicator } from "./ActivityIndicator";
 export { Button } from "./Button";
 export { FlatList } from "./FlatList";
 export { Image } from "./Image";
+export { ImageBackground } from "./ImageBackground";
+export { KeyboardAvoidingView } from "./KeyboardAvoidingView";
+export { Pressable } from "./Pressable";
+export { ScrollView } from "./ScrollView";
 export { Switch } from "./Switch";
 export { Text } from "./Text";
 export { TextInput } from "./TextInput";
+export { TouchableHighlight } from "./TouchableHighlight";
+export { TouchableOpacity } from "./TouchableOpacity";
+export { TouchableWithoutFeedback } from "./TouchableWithoutFeedback";
 export { View } from "./View";
+export { VirtualizedList } from "./VirtualizedList";

package/src/native/styles/calculate-props.ts

@@ -129,7 +129,7 @@ export function applyDeclarations(
         const final = rest.pop();
 
         if (final) {
-          if (first !== "*") {
+          if (first !== "&") {
             topLevelTarget[first] ??= {};
             target = topLevelTarget[first];
           }