1.0.3 • Published 19 days ago

rn-social-buttons v1.0.3

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
19 days ago

React Native Social Buttons

npm.io npm.io npm.io

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>
    );
  }
}