react-native-opengraph-kit v3.0.1

react-native-opengraph-kit

A set of components and utils useful to extract opengraph data directly from your react-native app, with almost no dependency.

For react-native v0.44+

:warning: 2.0.0 is a breaking change, the Parser is now returning an Array of results for all the URLs in the text analysed.

If you are using only the OpenGraphAwareInput, you don't have to change anything.

Prerequesites

Be sure to have in your Info.plist

<key>NSAppTransportSecurity</key>
<!--See http://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/ -->
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
    ...
</dict>

Subcomponents

import { OpenGraphAwareInput, OpenGraphDisplay, OpenGraphParser } from 'react-native-opengraph-kit';

OpenGraphAwareInput

<OpenGraphAwareInput
    containerStyle={styles.textInputContainer}
    textInputStyle={styles.textInput}
    onChange={this.doWhatIWantWithTheContent}
/>

OpenGraphDisplay

Fully customizable widget for the extracted data

<OpenGraphDisplay
    data={this.state.dataIGotFromTheParser}
/>

OpenGraphParser

Where the magic happens

handleTextChange = (event) => {
    OpenGraphParser.extractMeta(event.nativeEvent.text)
    .then((data) => {
        this.setState({ data });
    })
    .catch((error) => {
        console.log(error);
    });
}

render() {
    return (
        <TextInput
            onChange={this.handleTextChange}
        />
    );
}

Example of data object:

[
    {
        description: "We're a young and inspired team that leverages technical knowledge to turn ideas into creative and efficient digital solutions.",
        image: "https://osedea.com/images/thumbnail-osedea-1.png",
        title: "OSEDEA | Digital Efficiency & Creativity",
        type: "website",
        url: "http://osedea.com",
    }
]

See simple React-native example project in example for a working example