Question: I have an app, where user types his text which could contain links(by the link I mean only links started with https...). Than this input turns into a text so the user could read it. However I want links in this text work as actual links. I have only a text as a string and want all non-link text to stay as a text. If you know the way to make it, please tell me

Answer: 
It can looks like this
<https://snack.expo.io/@webspaceteam/juicy-cookie>

```
import * as React from 'react';
import {
  Text,
  View,
  StyleSheet,
  TouchableOpacity,
  Linking,
} from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App() {
  const userText =
    'rfrfop referoif frefio remfie https://snack.expo.io/@webspaceteam/ea041b fjir frfrfr';
  const convert = () => {
    const urlRegex = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/;

    return userText.split(/\s+/).map((word) => {
      if (urlRegex.test(word)) {
        return (
          <Text onPress={() => Linking.openURL(word)}>
            <Text style={{ color: 'blue' }}>{word}</Text>{' '}
          </Text>
        );
      } else {
        return (
          <>
            <Text>{word}</Text>{' '}
          </>
        );
      }
    });
  };
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>{convert()}</Text>
      <Card>
        <AssetExample />
      </Card>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {},
});

```
Use `getSelection()` within a function that is called in an event listener. See notes info in code.

```js
const article = document.getElementById("article");

// event listener that uses mouseup on a handlerFunction
article.addEventListener('mouseup', handlerFunction, false);

// Mouse up event handler function
function handlerFunction(event) {

  // Check if any text was selected using a conditional
  if (window.getSelection().toString().length > 0) {

    // Get selected text and its parent node
    const selection = window.getSelection().toString();
    const selectedEl = window.getSelection().anchorNode.parentNode;

    // regex patter for https website {{{MAY NEED WORK THIS JUST FOR EXAMPLE}}} 
    var pattern = new RegExp("^(https?:\\/\\/(www\\.)?|ftp:\\/\\/(www\\.)?|www\\.){1}([0-9A-Za-z-\\.@:%_\+~#=]+)+((\\.[a-zA-Z]{2,3})+)(/(.)*)?(\\?(.)*)?");
    console.log(selection);

    // conditional to check if selection is in fact a https site
    // NOTE THIS CONDITIONAL REGEX WAS NOT TESTED THUROUGHLY
    // I SUGGETS YOU ADD YOUR OWN CONDITIONAL CHECK FOR HTTPS
    if (pattern.test(selection)){

      // Add link to selected text
      const addATag = '<li><a href="selection">' + selection + '</a></li>';

    // Append HTML to the selected element
    selectedEl.outerHTML = addATag;
  }
}
}
```

```css
li {
   list-style-type: none;
}
```

```html
<div id="article">
  <ul>
    <li>https://myspace.com</li>
    <li>https://www.mywebsite.com</li>
    <li>https://www.rumble.com</li>
  </ul>
</div>
```