CODEWITHSUNDEEP
reactjsreact-nativelinkify
Deepak
Deepak

Reputation: 436

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 [email protected]');

which should return something like

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

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

Upvotes: 0

Views: 681

Answers (1)

Ketan Ramteke
Ketan Ramteke

Reputation: 10655

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 [email protected]'
  );

  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,
  },
});

Upvotes: 1

Related Questions