v1.1.17

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-themeui",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "description": "Essential cross-platform UI components for React Native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -76,7 +76,8 @@
     "typescript": "^5.0.2"
   },
   "dependencies": {
-    "@react-native-aria/focus": "^0.2.8"
+    "@react-native-aria/focus": "^0.2.8",
+    "react-native-parsed-text": "^0.0.22"
   },
   "resolutions": {
     "@types/react": "17.0.21"

src/components/ParsedText/index.tsx

@@ -0,0 +1,13 @@
+import React, { FC, memo } from 'react';
+import ParsedTextComp from 'react-native-parsed-text';
+
+import { usePropsResolution } from '../../hooks/usePropsResolution';
+import { ParsedTextProps } from './types';
+
+const ParsedText: FC<ParsedTextProps> = ({ children, ...props }) => {
+  const { ...resolvedProps } = usePropsResolution('Text', props);
+
+  return <ParsedTextComp {...resolvedProps}>{children}</ParsedTextComp>;
+};
+
+export default memo(ParsedText);

src/components/ParsedText/types.ts

@@ -0,0 +1,41 @@
+import { PseudoComponentProps } from '../../contexts/theme';
+
+import { TextProps } from 'react-native';
+
+interface BaseParseShape
+  extends Pick<TextProps, Exclude<keyof TextProps, 'onPress' | 'onLongPress'>> {
+  /** arbitrary function to rewrite the matched string into something else */
+  renderText?: (matchingString: string, matches: string[]) => string;
+  onPress?: (text: string, index: number) => void;
+  onLongPress?: (text: string, index: number) => void;
+}
+
+/**
+ * This is for built-in-patterns already supported by this library
+ */
+interface DefaultParseShape extends BaseParseShape {
+  type: 'url' | 'phone' | 'email';
+}
+/**
+ * If you want to provide a custom regexp, this is the configuration to use.
+ * -- For historical reasons, all regexps are processed as if they have the global flag set.
+ * -- Use the nonExhaustiveModeMaxMatchCount property to match a limited number of matches.
+ */
+interface CustomParseShape extends BaseParseShape {
+  pattern: string | RegExp;
+  /**
+   * Enables "non-exhaustive mode", where you can limit how many matches are found.
+   *
+   * If you want to match at most N things per-call to parse(), provide a positive number here.
+   */
+  nonExhaustiveModeMaxMatchCount?: number;
+}
+
+type ParseShape = DefaultParseShape | CustomParseShape;
+
+export interface ParsedTextProps
+  extends TextProps,
+    PseudoComponentProps<TextProps['style']> {
+  parse?: ParseShape[];
+  childrenProps?: TextProps;
+}

src/contexts/ThemeUiProvider.tsx

@@ -1,5 +1,6 @@
 import React, { FC, ReactNode, useState, createContext, memo } from 'react';
 import defaultTheme, { ThemeUiTypes, ThemeActionTypes } from './theme';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 interface ThemeUiProviderProps {
   children: ReactNode;
@@ -23,11 +24,13 @@ const ThemeUiProvider: FC<ThemeUiProviderProps> = ({
     setTheme({ ...theme, mode: mode });
 
   return (
-    <ThemeUiContext.Provider value={theme}>
-      <ThemeUiActionContext.Provider value={{ setThemeMode }}>
-        {children}
-      </ThemeUiActionContext.Provider>
-    </ThemeUiContext.Provider>
+    <SafeAreaProvider>
+      <ThemeUiContext.Provider value={theme}>
+        <ThemeUiActionContext.Provider value={{ setThemeMode }}>
+          {children}
+        </ThemeUiActionContext.Provider>
+      </ThemeUiContext.Provider>
+    </SafeAreaProvider>
   );
 };
 

src/index.tsx

@@ -8,6 +8,7 @@ import ThemeUiProvider, {
 import { useTheme } from './hooks/useTheme';
 import Pressable from './components/Pressable';
 import Icon from './components/Icon';
+import ParsedText from './components/ParsedText';
 
 export {
   ThemeUiContext,
@@ -19,4 +20,5 @@ export {
   Button,
   Pressable,
   Icon,
+  ParsedText,
 };

yarn.lock

@@ -7815,7 +7815,7 @@ prompts@^2.0.1, prompts@^2.4.0, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@*, prop-types@^15.8.1:
+prop-types@*, prop-types@^15.7.x, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -7965,6 +7965,13 @@ react-native-builder-bob@^0.20.0:
   optionalDependencies:
     jetifier "^2.0.0"
 
+react-native-parsed-text@^0.0.22:
+  version "0.0.22"
+  resolved "https://registry.yarnpkg.com/react-native-parsed-text/-/react-native-parsed-text-0.0.22.tgz#a23c756eaa5d6724296814755085127f9072e5f5"
+  integrity sha512-hfD83RDXZf9Fvth3DowR7j65fMnlqM9PpxZBGWkzVcUTFtqe6/yPcIoIAgrJbKn6YmtzkivmhWE2MCE4JKBXrQ==
+  dependencies:
+    prop-types "^15.7.x"
+
 react-native-safe-area-context@^4.7.1:
   version "4.7.1"
   resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.7.1.tgz#b7be2d68dee909717cfa439bb5c7966042d231e8"