Added to SocialIcon (#773)

* Add to SocialIcon I wanted an email icon for the SocialIcon element and while looking around FontAwesome, several other missing possibilities were found. * Change reddit color Matchs official iconography beter. * Wrong color for envelope Forgot that the icon itself was white and the color was the background when entering the color for the envelope. * Trying different snapchat icon Snapchat puts a border around the ghost for a reason. I’m looking at other icons, but may remove it entirely. * Removing Snapchat Without significant change, Snapchat will not look good. The white on yellow doesn’t have enough contrast. * Flickr icon too complex The Flickr icon is too complex for this scheme as well. There isn’t enough contrast, and no ability to make the circles differing colors. * Added new icons to docs Added the new SocialIcon types into the docs * Alphabetized SocialIcon typs in docs * Corrected envelope property At first I used envelope-o but decided on just envelope and didn’t remove the special property notation. * Small typo in docs Missed a space before envelope * Demo project shows all social icons All social icons currently supported were added to the Social Icons card in the demo app.
react-native-elements · Dec 10, 2017 · e78d527 · e78d527
1 parent 11f23c2
commit e78d527
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 49 deletions.
diff --git a/docs/API/social_icons.md b/docs/API/social_icons.md
@@ -57,7 +57,7 @@ import { SocialIcon } from 'react-native-elements'
 | prop | default | type | description |
 | ---- | ---- | ----| ---- |
 | title | none | string | title if made into a button (optional) |
-| type | none | social media type (facebook, twitter, google-plus-official, pinterest, linkedin, youtube, vimeo, tumblr, instagram, quora, foursquare, wordpress, stumbleupon, github, github-alt, twitch, medium, soundcloud, gitlab, angellist, codepen) | social media type (required) |
+| type | none | social media type (angellist, codepen, envelope, etsy, facebook, foursquare, github-alt, github, gitlab, instagram, linkedin, medium, pinterest, quora, reddit-alien, soundcloud, stack-overflow, steam, stumbleupon, tumblr, twitch, twitter,google-plus-official, vimeo, wordpress, youtube) | social media type (required) |
 | raised | true | boolean | raised adds a drop shadow, set to false to remove |
 | button | false | boolean | creates button (optional) |
 | onPress | none | function | onPress method (optional) |

diff --git a/example/src/views/buttons_home.js b/example/src/views/buttons_home.js
@@ -363,28 +363,44 @@ class Buttons extends Component {
             styles.socialRow,
             { marginTop: 15, marginBottom: 15 },
           ]}
-        >
+        >          
+        <View style={styles.socialRow}>
+            <SocialIcon type="angellist" />
+            <SocialIcon type="codepen" />
+            <SocialIcon type="envelope" />
+            <SocialIcon type="etsy" />
+            <SocialIcon type="facebook" />
+          </View>
+          <View style={styles.socialRow}>
+            <SocialIcon type="foursquare" />
+            <SocialIcon type="github-alt" />
+            <SocialIcon type="github" />
+            <SocialIcon type="gitlab" />
+            <SocialIcon type="instagram" />
+          </View>
+          <View style={styles.socialRow}>
+            <SocialIcon type="linkedin" />
+            <SocialIcon type="medium" />
+            <SocialIcon type="pinterest" />
+            <SocialIcon type="quora" />
+            <SocialIcon type="reddit-alien" />
+          </View>
           <View style={styles.socialRow}>
-            <SocialIcon
-              raised={false}
-              type="gitlab"
-              onPress={() => console.log('hi!')}
-            />
-            <SocialIcon type="medium" onPress={() => console.log('hi2!')} />
-            <SocialIcon type="github-alt" onPress={() => console.log('hi3!')} />
-            <SocialIcon type="twitch" />
             <SocialIcon type="soundcloud" />
+            <SocialIcon type="stack-overflow" />
+            <SocialIcon type="steam" />
+            <SocialIcon type="stumbleupon" />
+            <SocialIcon type="tumblr" />
           </View>
           <View style={styles.socialRow}>
-            <SocialIcon
-              raised={false}
-              type="facebook"
-              onPress={() => console.log('hi!')}
-            />
-            <SocialIcon type="twitter" onPress={() => console.log('hi2!')} />
-            <SocialIcon type="instagram" onPress={() => console.log('hi3!')} />
-            <SocialIcon raised={false} type="codepen" />
-            <SocialIcon raised={false} type="youtube" />
+            <SocialIcon type="twitch" />
+            <SocialIcon type="twitter" />
+            <SocialIcon type="google-plus-official" />
+            <SocialIcon type="vimeo" />
+            <SocialIcon type="wordpress" />
+          </View>
+          <View style={styles.socialRow}>
+            <SocialIcon type="youtube" />
           </View>
         </Card>
         <Card

diff --git a/src/social/SocialIcon.js b/src/social/SocialIcon.js
@@ -18,51 +18,56 @@ const log = () => {
 };
 
 const colors = {
-  facebook: '#3b5998',
-  twitter: '#00aced',
+  ['github-alt']: '#000000',
   ['google-plus-official']: '#dd4b39',
-  pinterest: '#cb2027',
-  linkedin: '#007bb6',
-  youtube: '#bb0000',
-  vimeo: '#aad450',
-  tumblr: '#32506d',
-  instagram: '#517fa4',
-  quora: '#a82400',
+  ['reddit-alien']: '#fc461e',
+  ['stack-overflow']: '#f27f33',
+  angellist: '#1c4082',
+  codepen: '#000000',
+  envelope: '#000000',
+  etsy: '#f2581e',
+  facebook: '#3b5998',
   foursquare: '#0072b1',
-  wordpress: '#21759b',
-  stumbleupon: '#EB4823',
   github: '#000000',
-  ['github-alt']: '#000000',
-  twitch: '#6441A5',
+  gitlab: '#e14329',
+  instagram: '#517fa4',
+  linkedin: '#007bb6',
   medium: '#02b875',
+  pinterest: '#cb2027',
+  quora: '#a82400',
   soundcloud: '#f50',
-  gitlab: '#e14329',
-  angellist: '#1c4082',
-  codepen: '#000000',
+  steam: '#c6c3c1',
+  stumbleupon: '#EB4823',
+  tumblr: '#32506d',
+  twitch: '#6441A5',
+  twitter: '#00aced',
+  vimeo: '#aad450',
+  wordpress: '#21759b',
+  youtube: '#bb0000',
 };
 
 const SocialIcon = props => {
   const {
-    component,
-    type,
+    activityIndicatorStyle,
     button,
+    component,
     disabled,
-    loading,
-    activityIndicatorStyle,
-    small,
-    onPress,
-    iconStyle,
-    style,
-    iconColor,
-    underlayColor,
-    title,
-    raised,
-    light,
     fontFamily,
     fontStyle,
+    fontWeight,
+    iconColor,
     iconSize,
+    iconStyle,
+    light,
+    loading,
     onLongPress,
-    fontWeight,
+    onPress,
+    raised,
+    small,
+    style,
+    title,
+    type,
+    underlayColor,
     ...attributes
   } = props;