reactjsreact-nativelinkify

react native get all links from a text


i want to get all links from a text in react native. Like

someFunction.getLinks('Any links to github.com here? If not, contact test@example.com');

which should return something like

[
  {
    type: 'url',
    value: 'github.com',
    href: 'http://github.com'
  },
  {
    type: 'email',
    value: 'test@example.com',
    href: 'mailto:test@example.com'
  }
]

this is possible with Linkify in react but how can we do this in react native?


Solution

  • Working App: Expo Snack

    enter image description here

    import * as React from 'react';
    import { Text, View, StyleSheet, FlatList } from 'react-native';
    import Constants from 'expo-constants';
    var linkify = require('linkifyjs');
    
    import { Card } from 'react-native-paper';
    
    export default function App() {
      const data = linkify.find(
        'Any links to github.com here? If not, contact test@example.com'
      );
    
      console.log(JSON.stringify(data));
      return (
        <View style={styles.container}>
          <FlatList
            data={data}
            renderItem={({ item }) => (
              <View
                style={{
                  padding: 10,
                  backgroundColor: 'rgba(255,0,0,0.1)',
                  marginTop: 5,
                }}>
                <Text style={styles.paragraph}>{`type: ${item.type}`}</Text>
                <Text style={styles.paragraph}>{`type: ${item.value}`}</Text>
                <Text style={styles.paragraph}>{`type: ${item.href}`}</Text>
              </View>
            )}
          />
        </View>
      );
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        paddingTop: Constants.statusBarHeight,
        backgroundColor: '#ecf0f1',
        padding: 8,
      },
      paragraph: {
        fontSize: 18,
      },
    });