diff --git a/src/components/ActivityIndicator.tsx b/src/components/ActivityIndicator.tsx new file mode 100644 index 0000000..2007f89 --- /dev/null +++ b/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; + +export function ActivityIndicator( + props: StyledProps, +) { + return useCssElement(RNActivityIndicator, props, mapping); +} + +export default ActivityIndicator; diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 0000000..0c5a5c4 --- /dev/null +++ b/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; + +export function Button(props: StyledProps) { + return useCssElement(RNButton, props, mapping); +} + +export default Button; diff --git a/src/components/FlatList.tsx b/src/components/FlatList.tsx new file mode 100644 index 0000000..54e70b5 --- /dev/null +++ b/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; + +export function FlatList( + props: StyledProps, typeof mapping>, +) { + return useCssElement(RNFlatList, props, mapping); +} + +export default FlatList; diff --git a/src/components/Image.tsx b/src/components/Image.tsx new file mode 100644 index 0000000..7fa1b19 --- /dev/null +++ b/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; + +export function Image(props: StyledProps) { + return useCssElement(RNImage, props, mapping); +} + +export default Image; diff --git a/src/components/TextInput.tsx b/src/components/TextInput.tsx new file mode 100644 index 0000000..5aca4c1 --- /dev/null +++ b/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; + +export function TextInput(props: StyledProps) { + return useCssElement(RNTextInput, props, mapping); +} + +export default TextInput; diff --git a/src/components/index.tsx b/src/components/index.tsx index cf10aa8..abc372b 100644 --- a/src/components/index.tsx +++ b/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";