basic refactor to customize text component

Author: nsantacruz

Demo/SelectableText.js

@@ -67,7 +67,12 @@ const mapHighlightsRanges = (value, highlights) => {
  * highlightColor: string
  * onHighlightPress: string => void
  */
-export const SelectableText = ({ onSelection, onHighlightPress, value, children, ...props }) => {
+export const SelectableText = ({
+  onSelection, onHighlightPress, textValueProp, value, TextComponent,
+  textComponentProps, ...props
+}) => {
+  TextComponent = TextComponent || Text;
+  textValueProp = textValueProp || 'children';  // default to `children` which will render `value` as a child of `TextComponent`
   const onSelectionNative = ({
     nativeEvent: { content, eventType, selectionStart, selectionEnd },
   }) => {
@@ -92,38 +97,46 @@ export const SelectableText = ({ onSelection, onHighlightPress, value, children,
       : onHighlightPress
     : () => {}
 
+  // TODO: convert Text to TextComponent. User React Children API
+  const textValue = (
+    props.highlights && props.highlights.length > 0
+      ? mapHighlightsRanges(value, props.highlights).map(({ id, isHighlight, text }) => (
+          <Text
+            key={v4()}
+            selectable
+            style={
+              isHighlight
+                ? {
+                    backgroundColor: props.highlightColor,
+                  }
+                : {}
+            }
+            onPress={() => {
+              if (isHighlight) {
+                onHighlightPress && onHighlightPress(id)
+              }
+            }}
+          >
+            {text}
+          </Text>
+        ))
+    : [value]
+  );
+  if (props.appendToChildren) {
+    textValue.push(props.appendToChildren);
+  }
   return (
     <RNSelectableText
       {...props}
       onHighlightPress={onHighlightPressNative}
       selectable
       onSelection={onSelectionNative}
     >
-      <Text selectable key={v4()}>
-        {props.highlights && props.highlights.length > 0
-          ? mapHighlightsRanges(value, props.highlights).map(({ id, isHighlight, text }) => (
-              <Text
-                key={v4()}
-                selectable
-                style={
-                  isHighlight
-                    ? {
-                        backgroundColor: props.highlightColor,
-                      }
-                    : {}
-                }
-                onPress={() => {
-                  if (isHighlight) {
-                    onHighlightPress && onHighlightPress(id)
-                  }
-                }}
-              >
-                {text}
-              </Text>
-            ))
-          : value}
-        {props.appendToChildren ? props.appendToChildren : null}
-      </Text>
+      <TextComponent
+        key={v4()}
+        textValueProp={textValue}
+        {...textComponentProps}
+      />
     </RNSelectableText>
   )
 }