Merge pull request #53 from nsantacruz/master

Allow use of other Text components to render text

Author: georgelima

Demo/SelectableText.js

@@ -66,8 +66,17 @@ const mapHighlightsRanges = (value, highlights) => {
  * highlights: array({ id, start, end })
  * highlightColor: string
  * onHighlightPress: string => void
+ * textValueProp: string
+ * TextComponent: ReactNode
+ * textComponentProps: object
  */
-export const SelectableText = ({ onSelection, onHighlightPress, value, children, ...props }) => {
+export const SelectableText = ({
+  onSelection, onHighlightPress, textValueProp, value, TextComponent,
+  textComponentProps, ...props
+}) => {
+  const usesTextComponent = !TextComponent;
+  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 +101,48 @@ export const SelectableText = ({ onSelection, onHighlightPress, value, children,
       : onHighlightPress
     : () => {}
 
+  // highlights feature is only supported if `TextComponent == Text`
+  let textValue = value;
+  if (usesTextComponent) {
+    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>
   )
 }

README.md

@@ -81,3 +81,7 @@ import { SelectableText } from "@astrocoders/react-native-selectable-text";
 | **highlightColor** | highlight color |string | null |
 | **onHighlightPress** | called when the user taps the highlight  |(id: string) => void | () => {} |
 | **appendToChildren** | element to be added in the last line of text | ReactNode | null |
+| **TextComponent** | Text component used to render `value` | ReactNode | <Text> |
+| **textValueProp** | text value prop for TextComponent. Should be used when passing TextComponent. Defaults to 'children' which works for <Text> | string | 'children' |
+| **textComponentProps** | additional props to pass to TextComponent | object | null |
+