feat: add missing RN components

Author: marklawlor

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>,

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);

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>,

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);

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;

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;

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;

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;

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);

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;