@acvl/mobile-components 0.0.0-stage → 0.0.1

package/src/texto.tsx

@@ -0,0 +1,44 @@
+import { fuenteBase, usePaleta } from "./tema";
+import { forwardRef, type ComponentRef } from "react";
+import {
+    Text as RNText,
+    TextInput as RNTextInput,
+    type TextInputProps,
+    type TextProps,
+} from "react-native";
+
+/**
+ * `Text` y `TextInput` con la tipografía de la app ya puesta.
+ *
+ * React Native no tiene una fuente por defecto para todo el árbol —y `defaultProps` dejó de
+ * aplicarse a componentes de función en React 19—, así que la familia se inyecta aquí y las
+ * pantallas importan estos dos en lugar de los de "react-native". Los componentes de Paper no
+ * pasan por aquí: esos leen la escala tipográfica del tema (`ProveedorDeTema`).
+ *
+ * La familia va primero en el arreglo de estilos para que cualquier `style` de quien lo use
+ * la pueda pisar. **También el color del texto** (`c.texto`): el `Text` de React Native es negro
+ * por omisión, y en el modo oscuro cada texto sin color propio desaparecía sobre el fondo.
+ */
+
+export const Text = forwardRef<ComponentRef<typeof RNText>, TextProps>(function Text(
+    { style, ...props },
+    ref,
+) {
+    const c = usePaleta();
+    return <RNText ref={ref} style={[fuenteBase, { color: c.texto }, style]} {...props} />;
+});
+
+export const TextInput = forwardRef<ComponentRef<typeof RNTextInput>, TextInputProps>(
+    function TextInput({ style, ...props }, ref) {
+        const c = usePaleta();
+        return (
+            <RNTextInput
+                ref={ref}
+                placeholderTextColor={c.secondaryLight}
+                selectionColor={c.primary}
+                style={[fuenteBase, { color: c.texto }, style]}
+                {...props}
+            />
+        );
+    },
+);