Skip to content
Twitter, Instagram, (and more!) into your react-native app
TypeScript
Branch: master
Clone or download

Latest commit

Latest commit 8933315 Apr 28, 2020

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example fix: miscellaneous Apr 28, 2020
images
src fix: miscellaneous Apr 28, 2020
.gitattributes 🚧 Add example app Apr 8, 2020
.gitignore feat: improve Twitter Apr 22, 2020
.npmignore
README.md
index.ts 🚧 Add twitter embed Apr 22, 2020
package.json fix: miscellaneous Apr 28, 2020
tsconfig.json fix: miscellaneous Apr 25, 2020
yarn.lock

README.md

React Native Socials

Embedding posts from popular social networks in your react-native app.

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
You can’t perform that action at this time.