react-native-css 0.0.0-nightly.008d479

package/src/components/ActivityIndicator.tsx

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

package/src/components/Button.tsx

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

package/src/components/FlatList.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+import { FlatList as RNFlatList, type FlatListProps } from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "react-native-css";
+
+import { copyComponentProperties } from "./copyComponentProperties";
+
+const mapping: StyledConfiguration<typeof RNFlatList> = {
+  ListFooterComponentClassName: "ListFooterComponentStyle",
+  ListHeaderComponentClassName: "ListHeaderComponentStyle",
+  columnWrapperClassName: "columnWrapperStyle",
+  contentContainerClassName: "contentContainerStyle",
+};
+
+export const FlatList = copyComponentProperties(RNFlatList, function <
+  ItemT,
+>(props: StyledProps<FlatListProps<ItemT>, typeof mapping>) {
+  return useCssElement(RNFlatList, props, mapping);
+}) as unknown as typeof RNFlatList &
+  (<ItemT>(
+    props: StyledProps<
+      FlatListProps<ItemT>,
+      StyledConfiguration<typeof RNFlatList>
+    >,
+  ) => ReactNode);
+
+export default FlatList;

package/src/components/Image.tsx

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

package/src/components/ImageBackground.tsx

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

package/src/components/KeyboardAvoidingView.tsx

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

package/src/components/Pressable.tsx

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

package/src/components/ScrollView.tsx

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

package/src/components/Switch.tsx

@@ -0,0 +1,22 @@
+import { Switch as RNSwitch, type SwitchProps } from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "react-native-css";
+
+import { copyComponentProperties } from "./copyComponentProperties";
+
+const mapping = {
+  className: "style",
+} satisfies StyledConfiguration<typeof RNSwitch>;
+
+export const Switch = copyComponentProperties(
+  RNSwitch,
+  (props: StyledProps<SwitchProps, typeof mapping>) => {
+    return useCssElement(RNSwitch, props, mapping);
+  },
+);
+
+export default Switch;

package/src/components/Text.tsx

@@ -0,0 +1,22 @@
+import { Text as RNText, type TextProps } from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "react-native-css";
+
+import { copyComponentProperties } from "./copyComponentProperties";
+
+const mapping = {
+  className: "style",
+} satisfies StyledConfiguration<typeof RNText>;
+
+export const Text = copyComponentProperties(
+  RNText,
+  (props: StyledProps<TextProps, typeof mapping>) => {
+    return useCssElement(RNText, props, mapping);
+  },
+);
+
+export default Text;

package/src/components/TextInput.tsx

@@ -0,0 +1,27 @@
+import { TextInput as RNTextInput, type TextInputProps } from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "react-native-css";
+
+import { copyComponentProperties } from "./copyComponentProperties";
+
+const mapping: StyledConfiguration<typeof RNTextInput> = {
+  className: {
+    target: "style",
+    nativeStyleMapping: {
+      textAlign: true,
+    },
+  },
+};
+
+export const TextInput = copyComponentProperties(
+  RNTextInput,
+  (props: StyledProps<TextInputProps, typeof mapping>) => {
+    return useCssElement(RNTextInput, props, mapping);
+  },
+);
+
+export default TextInput;

package/src/components/TouchableHighlight.tsx

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

package/src/components/TouchableOpacity.tsx

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

package/src/components/TouchableWithoutFeedback.tsx

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

package/src/components/View.tsx

@@ -0,0 +1,22 @@
+import { View as RNView, type ViewProps } from "react-native";
+
+import {
+  useCssElement,
+  type StyledConfiguration,
+  type StyledProps,
+} from "react-native-css";
+
+import { copyComponentProperties } from "./copyComponentProperties";
+
+const mapping = {
+  className: "style",
+} satisfies StyledConfiguration<typeof RNView>;
+
+export const View = copyComponentProperties(
+  RNView,
+  (props: StyledProps<ViewProps, typeof mapping>) => {
+    return useCssElement(RNView, props, mapping);
+  },
+);
+
+export default View;

package/src/components/VirtualizedList.tsx

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

package/src/components/copyComponentProperties.ts

@@ -0,0 +1,21 @@
+import type { ComponentType } from "react";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyComponent = ComponentType<any>;
+
+export function copyComponentProperties<T extends AnyComponent>(
+  BaseComponent: T,
+  Component: AnyComponent,
+) {
+  for (const [key, value] of Object.entries(BaseComponent)) {
+    if (key === "$$typeof" || key === "render" || key === "contextType") {
+      continue;
+    }
+
+    (Component as unknown as Record<string, unknown>)[key] = value;
+  }
+
+  Component.displayName = BaseComponent.displayName;
+
+  return Component as unknown as T;
+}