diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock index cc793edc..41b50600 100644 --- a/example/ios/Podfile.lock +++ b/example/ios/Podfile.lock @@ -1497,7 +1497,7 @@ PODS: - React-logger (= 0.75.2) - React-perflogger (= 0.75.2) - React-utils (= 0.75.2) - - RNLiveMarkdown (0.1.137): + - RNLiveMarkdown (0.1.143): - DoubleConversion - glog - hermes-engine @@ -1517,9 +1517,9 @@ PODS: - ReactCodegen - ReactCommon/turbomodule/bridging - ReactCommon/turbomodule/core - - RNLiveMarkdown/common (= 0.1.137) + - RNLiveMarkdown/common (= 0.1.143) - Yoga - - RNLiveMarkdown/common (0.1.137): + - RNLiveMarkdown/common (0.1.143): - DoubleConversion - glog - hermes-engine @@ -1805,7 +1805,7 @@ SPEC CHECKSUMS: React-utils: 81a715d9c0a2a49047e77a86f3a2247408540deb ReactCodegen: 60973d382704c793c605b9be0fc7f31cb279442f ReactCommon: 6ef348087d250257c44c0204461c03f036650e9b - RNLiveMarkdown: b2d706acf1bbd968b8dab0be0dc69f130a14db6d + RNLiveMarkdown: e44918843c2638692348f39eafc275698baf0444 SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d Yoga: 2a45d7e59592db061217551fd3bbe2dd993817ae diff --git a/example/src/App.tsx b/example/src/App.tsx index 360103d3..7e29fee9 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -1,96 +1,48 @@ import * as React from 'react'; -import {Button, Platform, StyleSheet, Text, View} from 'react-native'; +import {Button, StyleSheet, Text, View} from 'react-native'; import {MarkdownTextInput} from '@expensify/react-native-live-markdown'; import type {TextInput} from 'react-native'; import * as TEST_CONST from './testConstants'; - -function isWeb() { - return Platform.OS === 'web'; -} - -function getPlatform() { - if (isWeb()) { - return 'web'; - } - // @ts-expect-error it works - return Platform.constants.systemName || Platform.constants.Brand; -} - -function getPlatformVersion() { - return Platform.Version; -} - -function getBundle() { - return __DEV__ ? 'dev' : 'production'; -} - -function getRuntime() { - if ('HermesInternal' in global) { - const version = - // @ts-expect-error this is fine - global.HermesInternal?.getRuntimeProperties?.()['OSS Release Version']; - return `Hermes (${version})`; - } - if ('_v8runtime' in global) { - // @ts-expect-error this is fine - const version = global._v8runtime().version; - return `V8 (${version})`; - } - return 'JSC'; -} - -function getArchitecture() { - return 'nativeFabricUIManager' in global ? 'Fabric' : 'Paper'; -} - -function getReactNativeVersion() { - const {major, minor, patch} = Platform.constants.reactNativeVersion; - return `${major}.${minor}.${patch}`; -} - -function getRandomColor() { - return `#${Math.floor(Math.random() * 16777215) - .toString(16) - .padStart(6, '0')}`; -} +import {PlatformInfo} from './PlatformInfo'; export default function App() { const [value, setValue] = React.useState(TEST_CONST.EXAMPLE_CONTENT); - const [markdownStyle, setMarkdownStyle] = React.useState({}); + const [textColorState, setTextColorState] = React.useState(false); + const [linkColorState, setLinkColorState] = React.useState(false); + const [textFontSizeState, setTextFontSizeState] = React.useState(false); + const [emojiFontSizeState, setEmojiFontSizeState] = React.useState(false); const [selection, setSelection] = React.useState({start: 0, end: 0}); + const style = React.useMemo(() => { + return { + color: textColorState ? 'gray' : 'black', + fontSize: textFontSizeState ? 15 : 20, + }; + }, [textColorState, textFontSizeState]); + + const markdownStyle = React.useMemo(() => { + return { + emoji: { + fontSize: emojiFontSizeState ? 15 : 20, + }, + link: { + color: linkColorState ? 'red' : 'blue', + }, + }; + }, [emojiFontSizeState, linkColorState]); + // TODO: use MarkdownTextInput ref instead of TextInput ref const ref = React.useRef(null); return ( - - - Platform: {getPlatform()} {getPlatformVersion()} - - Bundle: {getBundle()} - {!isWeb() && ( - <> - Architecture: {getArchitecture()} - RN version: {getReactNativeVersion()} - RN runtime: {getRuntime()} - - )} - - {/* MarkdownTextInput singleline - */} - MarkdownTextInput multiline + - {/* TextInput singleline - */} - {/* TextInput multiline - */} {JSON.stringify(value)}