React Native Socials

Install

The library is still in version 0, be cautious when you upgrade it! 🚧

yarn add react-native-socials

It is also needed to add react-native-video in your project because social components usually contains embeded videos. See react-native-video library for more information about the installation.

Finally, it is recommended to wrap those components into PureComponent because some of them can be costly to rerender (videos for instance).

Instagram

| Light | Dark | | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ | | | |

import {Instagram} from "react-native-socials";

<Instagram id="B8U12TXAmK-" >

Props:

| Name | Type | Default | Description | | --------------------- | ----------- | --------------------------------------------- | ------------------------------------------------ | | id | string | Required | Instagram post id | | darkMode | bool | false | Toggle dark mode | | language | string enum | "en" - "de" - "fr" - "es" - "pt" - "it" -"ru" | Pick language for metadata of the post | | containerBorderRadius | number | 0 | Border radius of the container of the UI element |

Twitter

| Light | Dark | | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- | | | |

import {Twitter} from "react-native-socials";

<Twitter
consumerKey=""
consumerSecret=""
id="1251870993628434433"
>

Unlike Instagram, the Twitter API is not open. It is needed that you register your app (free version) to the Twitter portal to be able to fetch Twitter posts.

Props:

| Name | Type | Default | Description | | --------------------- | ---------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | id | string | Required | Twitter post id | | consumerKey | string | Required | OAuth 1.0 Twitter key that is granted when you register your app on Twitter Portal | | consumerSecret | string | Required | OAuth 1.0 Twitter secret that is granted when you register your app on Twitter Portal | | darkMode | bool | false | Toggle dark mode | | language | string enum | "en" | Pick language for metadata of the post | | onHashTagPress | (hashtag:string) => void | Redirect to webpage | Overrides default behavior when pressing an hashtag in a Tweet | | onUserMentionPress | (userMention:string) => void | Redirect to webpage | Overrides default behavior when pressing a user mention in a Tweet | | onLinkPress | (link:string) => void | Redirect to webpage | Overrides default behavior when pressing a link in a Tweet | | cornerRadius | string enum | "small" | Chose the corner radius of UI elements in a post. Typically a post taking the whole width of the screen should have "big" whereas a post in a card should use the "small" value | | containerBorderRadius | number | 0 | Border radius of the container of the UI element | | onTweetPress | (tweetId:string) => void | Redirect to webpage | Overrides default behavior when pressing the tweet |