feat(component): view and text

example/package.json

@@ -12,15 +12,15 @@
     "expo": "~49.0.13",
     "expo-status-bar": "~1.6.0",
     "react": "18.2.0",
-    "react-native": "0.72.5",
     "react-dom": "18.2.0",
+    "react-native": "0.72.5",
     "react-native-web": "~0.19.6"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "babel-plugin-module-resolver": "^5.0.0",
     "@expo/webpack-config": "^18.0.1",
-    "babel-loader": "^8.1.0"
+    "babel-loader": "^8.1.0",
+    "babel-plugin-module-resolver": "^5.0.0"
   },
   "private": true
 }

example/src/App.tsx

@@ -1,18 +1,25 @@
 import * as React from 'react';
 
 import { StyleSheet, View, Text } from 'react-native';
-import { multiply } from 'react-native-reset-css';
+import Customizer, { customizeView } from 'react-native-reset-css';
 
 export default function App() {
-  const [result, setResult] = React.useState<number | undefined>();
+  Customizer.Text({
+    style: {
+      backgroundColor: 'yellow',
+    },
+  });
 
-  React.useEffect(() => {
-    multiply(3, 7).then(setResult);
-  }, []);
+  customizeView({
+    style: {
+      backgroundColor: 'blue',
+    },
+  });
 
   return (
     <View style={styles.container}>
-      <Text>Result: {result}</Text>
+      <Text style={{ backgroundColor: 'green' }}>Result:</Text>
+      <Text style={{ color: 'pink' }}>Result:</Text>
     </View>
   );
 }

src/customizers/text.tsx

@@ -0,0 +1,17 @@
+import { Text, type TextProps } from 'react-native';
+
+export const customizeText = (customProps: TextProps) => {
+  const TextRender = (Text as any).render;
+  if (!TextRender) {
+    (Text as any).defaultProps = customProps;
+    return;
+  }
+  (Text as any).render = (props: any, ref: any) => {
+    props = {
+      ...customProps,
+      ...props,
+      style: [customProps.style, props.style],
+    };
+    return TextRender.call(this, props, ref);
+  };
+};

src/customizers/view.tsx

@@ -0,0 +1,17 @@
+import { View, type ViewProps } from 'react-native';
+
+export const customizeView = (customProps: ViewProps) => {
+  const TextRender = (View as any).render;
+  if (!TextRender) {
+    (View as any).defaultProps = customProps;
+    return;
+  }
+  (View as any).render = (props: any, ref: any) => {
+    props = {
+      ...customProps,
+      ...props,
+      style: [customProps.style, props.style],
+    };
+    return TextRender.call(this, props, ref);
+  };
+};

src/index.tsx

@@ -1,3 +1,11 @@
-export function multiply(a: number, b: number): Promise<number> {
-  return Promise.resolve(a * b);
-}
+import { customizeView } from './customizers/view';
+import { customizeText } from './customizers/text';
+
+const Customizer = {
+  Text: customizeText,
+  View: customizeView,
+};
+
+export { customizeText, customizeView };
+
+export default Customizer;