Improve example app (#484)

Expensify · Sep 12, 2024 · bff3429 · bff3429
1 parent e3e536f
commit bff3429
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 106 deletions.
diff --git 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
@@ -1,118 +1,55 @@
 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<TextInput>(null);
 
   return (
     <View style={styles.container}>
-      <View style={styles.platform}>
-        <Text>
-          Platform: {getPlatform()} {getPlatformVersion()}
-        </Text>
-        <Text>Bundle: {getBundle()}</Text>
-        {!isWeb() && (
-          <>
-            <Text>Architecture: {getArchitecture()}</Text>
-            <Text>RN version: {getReactNativeVersion()}</Text>
-            <Text>RN runtime: {getRuntime()}</Text>
-          </>
-        )}
-      </View>
-      {/* <Text>MarkdownTextInput singleline</Text>
-      <MarkdownTextInput
-        autoCapitalize="none"
-        value={value}
-        onChangeText={setValue}
-        style={styles.input}
-      /> */}
-      <Text>MarkdownTextInput multiline</Text>
+      <PlatformInfo />
       <MarkdownTextInput
         multiline
         autoCapitalize="none"
         value={value}
         onChangeText={setValue}
-        style={styles.input}
+        style={[styles.input, style]}
         ref={ref}
         markdownStyle={markdownStyle}
         placeholder="Type here..."
         onSelectionChange={e => setSelection(e.nativeEvent.selection)}
         selection={selection}
         id={TEST_CONST.INPUT_ID}
       />
-      {/* <Text>TextInput singleline</Text>
-      <TextInput
-        autoCapitalize="none"
-        value={value}
-        onChangeText={setValue}
-        style={styles.input}
-      /> */}
-      {/* <Text>TextInput multiline</Text>
-      <TextInput
-        multiline
-        autoCapitalize="none"
-        value={value}
-        onChangeText={setValue}
-        style={styles.input}
-      /> */}
       <Text style={styles.text}>{JSON.stringify(value)}</Text>
       <Button
         testID="focus"
@@ -139,7 +76,11 @@ export default function App() {
         title="Reset"
         onPress={() => {
           setValue(TEST_CONST.EXAMPLE_CONTENT);
-          setMarkdownStyle({});
+          setTextColorState(false);
+          setLinkColorState(false);
+          setTextFontSizeState(false);
+          setEmojiFontSizeState(false);
+          setSelection({start: 0, end: 0});
         }}
       />
       <Button
@@ -150,14 +91,29 @@ export default function App() {
         }}
       />
       <Button
-        title="Change style"
-        onPress={() =>
-          setMarkdownStyle({
-            link: {
-              color: getRandomColor(),
-            },
-          })
-        }
+        title="Toggle text color"
+        onPress={() => setTextColorState(prev => !prev)}
+      />
+      <Button
+        title="Toggle link color"
+        onPress={() => setLinkColorState(prev => !prev)}
+      />
+      <Button
+        title="Toggle text font size"
+        onPress={() => setTextFontSizeState(prev => !prev)}
+      />
+      <Button
+        title="Toggle emoji font size"
+        onPress={() => setEmojiFontSizeState(prev => !prev)}
+      />
+      <Button
+        title="Toggle all"
+        onPress={() => {
+          setTextColorState(prev => !prev);
+          setLinkColorState(prev => !prev);
+          setTextFontSizeState(prev => !prev);
+          setEmojiFontSizeState(prev => !prev);
+        }}
       />
       <Button
         title="Change selection"
@@ -179,10 +135,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     marginTop: 60,
   },
-  platform: {
-    alignItems: 'center',
-    marginBottom: 20,
-  },
   input: {
     fontSize: 20,
     width: 300,

diff --git a/example/src/PlatformInfo.tsx b/example/src/PlatformInfo.tsx
@@ -0,0 +1,76 @@
+import {Platform, Text, View, StyleSheet} from 'react-native';
+import React from 'react';
+
+function isWeb() {
+  return Platform.OS === 'web';
+}
+
+function isBridgeless() {
+  return (global as Record<string, unknown>)._IS_BRIDGELESS;
+}
+
+function getPlatform() {
+  if (isWeb()) {
+    return 'web';
+  }
+  // @ts-ignore 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-ignore this is fine
+      global.HermesInternal?.getRuntimeProperties?.()['OSS Release Version'];
+    return `Hermes (${version})`;
+  }
+  if ('_v8runtime' in global) {
+    // @ts-ignore 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}`;
+}
+
+export function PlatformInfo() {
+  return (
+    <View style={styles.platform}>
+      <Text>
+        Platform: {getPlatform()} {getPlatformVersion()}
+      </Text>
+      <Text>Bundle: {getBundle()}</Text>
+      {!isWeb() && (
+        <>
+          <Text>Architecture: {getArchitecture()}</Text>
+          <Text>Bridgeless: {isBridgeless() ? 'yes' : 'no'}</Text>
+          <Text>RN version: {getReactNativeVersion()}</Text>
+          <Text>RN runtime: {getRuntime()}</Text>
+        </>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  platform: {
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+});
diff --git a/example/src/testConstants.ts b/example/src/testConstants.ts
@@ -2,6 +2,7 @@ const LOCAL_URL = 'http://localhost:19006/';
 
 const EXAMPLE_CONTENT = [
   'Hello, *world*!',
+  '😀🍕🍔',
   'https://expensify.com',
   '# header1',
   '> blockquote',