Package Exports

react-native-opengraph-kit

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-opengraph-kit) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.26+

Subcomponents

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

OpenGraphAwareInput

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

Property Name	Type	Description
containerStyle	View.propTypes.style	A style to pass to customize the style of the container
onChange	React.PropTypes.func	The function to call on change in the TextInput
textInputStyle	TextInput.propTypes.style	A style to pass to customize the style of the textInput

OpenGraphDisplay

Fully customizable widget for the extracted data

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

Property Name	Type	Description
data	React.PropTypes.shape({ url: React.PropTypes.string, image: React.PropTypes.string, title: React.PropTypes.string, description: React.PropTypes.string, }).isRequired	The data gotten out of the `OpenGraphAwareInput` or the `OpenGraphParser`
containerStyle	View.propTypes.style	A style to pass to customize the style of the container
imageStyle	Image.propTypes.style	A style to pass to customize the style of the image
textContainerStyle	View.propTypes.style	A style to pass to customize the style of the textContainer
titleStyle	Text.propTypes.style	A style to pass to customize the style of the title
descriptionStyle	Text.propTypes.style	A style to pass to customize the style of the description
urlStyle	Text.propTypes.style	A style to pass to customize the style of the url
urlOnlyContainerStyle	View.propTypes.style	A style to pass to customize the style of the urlOnlyContainer

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