kimkr / rn-social-buttons

Declarative social button components for React Native

React Native Social Buttons

Installation

yarn add rn-social-buttons

or

npm install rn-social-buttons

Basic Usage

import React from "react";
import { View } from "react-native";
import {  
  FacebookSocialButton,
  AmazonSocialButton,
  LinkedInSocialButton,
  GoogleSocialButton,
  MicrosoftSocialButton,
  GitHubSocialButton,
  TwitterSocialButton,
  InstagramSocialButton,
  AppleSocialButton,
  OdnoklassnikiSocialButton,
  VkontakteSocialButton,
  TiktokSocialButton
} from "rn-social-buttons";

export default class App extends React.Component {
  render() {
    return (
      <View>
        <FacebookSocialButton
          onPress={() => {}} 
          buttonViewStyle={...} 
          logoStyle={...} 
          textStyle={...}
        />
      </View>
    );
  }
}

You can costumize the buttons using buttonViewStyle={...}, logoStyle={...} and textStyle={...}

Custom Usage

import React from "react";
import { View } from "react-native";
import { SocialButton } from "rn-social-buttons";

export default class App extends React.Component {
  render() {
    return (
      <View>
        <SocialButton
          iconSource={require("../images/icon.png")}
          backgroundColor={"#5181b8"}
          textColor={"#fff"}
          buttonText={"Sign in with Custom"}
          buttonViewStyle={...}
          onPress={...}
          logoStyle={...}
          textStyle={...}
        />
      </View>
    );
  }
}

show Icon only

import React from "react";
import { View } from "react-native";
import { FacebookSocialButton } from "rn-social-buttons";

export default class App extends React.Component {
  render() {
    return (
      <View>
        <FacebookSocialButton 
          onPress={() => {}} 
          buttonViewStyle={...} 
          logoStyle={...} 
          textStyle={...}
          iconOnly={true}
          size={20}
        />
      </View>
    );
  }
}