feat: add more components (#101)

Author: marklawlor

src/components/ActivityIndicator.tsx

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

src/components/Button.tsx

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

src/components/FlatList.tsx

@@ -0,0 +1,21 @@
+import { FlatList as RNFlatList, type FlatListProps } from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "../runtime";
+
+const mapping = {
+  columnWrapperStyle: "columnWrapperStyle",
+  listFooterComponentClassName: "ListFooterComponentStyle",
+  listHeaderComponentClassName: "ListHeaderComponentStyle",
+} satisfies StyledConfiguration<typeof RNFlatList>;
+
+export function FlatList<ItemT>(
+  props: StyledProps<FlatListProps<ItemT>, typeof mapping>,
+) {
+  return useCssElement(RNFlatList, props, mapping);
+}
+
+export default FlatList;

src/components/Image.tsx

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

src/components/TextInput.tsx

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

src/components/index.tsx

@@ -1,4 +1,9 @@
 export * from "react-native";
 
+export { ActivityIndicator } from "./ActivityIndicator";
+export { Button } from "./Button";
+export { FlatList } from "./FlatList";
+export { Image } from "./Image";
 export { Text } from "./Text";
+export { TextInput } from "./TextInput";
 export { View } from "./View";