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+
import { OpenGraphAwareInput, OpenGraphDisplay, OpenGraphParser } from 'react-native-opengraph-kit';
<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 |
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 |
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