Slot

1import { Children, cloneElement, isValidElement } from "react";
2import type { Pressable as RNPressable, View as RNView } from "react-native";
3import { mergeRefs } from "@/lib/utils";
4 
5// Constants
6const HANDLER_REGEX = /^on[A-Z]/;
7 
8// Types
9type AnyProps = Record<string, unknown>;
10 
11// Components
12const View = ({
13  ref,
14  children,
15  ...viewProps
16}: React.ComponentPropsWithRef<typeof RNView>) => {
17  const child = Children.only(children) as React.ReactElement<
18    React.ComponentPropsWithRef<typeof RNView>
19  >;
20 
21  if (!isValidElement(child)) {
22    console.warn("View expects a single React element as children");
23    return null;
24  }
25 
26  const childRef = "ref" in child ? child.ref : undefined;
27  const mergedRef = childRef
28    ? mergeRefs(ref, childRef as React.Ref<RNView>)
29    : ref;
30 
31  return cloneElement(child, {
32    ...mergeProps(viewProps, child.props as AnyProps),
33    ref: mergedRef,
34  });
35};
36 
37const Pressable = ({
38  ref,
39  children,
40  ...pressableProps
41}: React.ComponentPropsWithRef<typeof RNPressable>) => {
42  const child = Children.only(children) as React.ReactElement<
43    React.ComponentProps<typeof RNPressable>
44  >;
45 
46  if (!isValidElement(child)) {
47    console.warn("Pressable expects a single React element as children");
48    return null;
49  }
50 
51  const childRef = "ref" in child ? child.ref : undefined;
52  const mergedRef = childRef
53    ? mergeRefs(ref, childRef as React.Ref<RNView>)
54    : ref;
55 
56  return cloneElement(child, {
57    ...mergeProps(pressableProps, child.props as AnyProps),
58    ref: mergedRef,
59  });
60};
61 
62// Utils
63function mergeHandler(
64  slotPropValue: unknown,
65  childPropValue: unknown
66): ((...args: unknown[]) => unknown) | unknown {
67  if (
68    slotPropValue &&
69    childPropValue &&
70    typeof childPropValue === "function" &&
71    typeof slotPropValue === "function"
72  ) {
73    return (...args: unknown[]) => {
74      const result = childPropValue(...args);
75      slotPropValue(...args);
76      return result;
77    };
78  }
79  return slotPropValue || childPropValue;
80}
81 
82function mergeStyle(slotPropValue: unknown, childPropValue: unknown) {
83  return [slotPropValue, childPropValue];
84}
85 
86function mergeClassName(slotPropValue: unknown, childPropValue: unknown) {
87  return [slotPropValue, childPropValue].filter(Boolean).join(" ");
88}
89 
90function mergeProps(slotProps: AnyProps, childProps: AnyProps) {
91  // all child props should override
92  const overrideProps = { ...childProps };
93 
94  for (const propName in childProps) {
95    if (!Object.hasOwn(childProps, propName)) {
96// … truncated