Merge pull request react-native-elements#11 from react-native-communi…

…ty/v0.4.1 updated styling, replaced default font family
flyingcircle · Sep 12, 2016 · 5d150b6 · 5d150b6
2 parents ca20d1e + 77402bc
commit 5d150b6
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 31 deletions.
diff --git a/Readme.MD b/Readme.MD
@@ -70,7 +70,7 @@ Check out the pre built and configured [React Native Hackathon Starter Project](
 ## Notes
 
 #### Fonts
-React Native Elements uses Helvetica Neue as the default font family for iOS and Roboto as the default font family for Android. 
+React Native Elements uses the Sytem font as the default font family for iOS and Roboto as the default font family for Android. 
 
 **In the example screenshots, we are using Lato which can be downloaded [here](https://fonts.google.com/specimen/Lato?selection.family=Lato).**
 
@@ -122,7 +122,7 @@ import { Button } from 'react-native-elements'
 | buttonStyle | none | object (style) | add additional styling for button component (optional) |
 | title | none | string | button title (required) |
 | small | false | boolean | makes button small |
-| fontFamily | HelveticaNeue (iOS), Roboto (android) | string | specify different font family |
+| fontFamily | System font (iOS), Roboto (android) | string | specify different font family |
 | iconRight | false | boolean | moves icon to right of title |
 | onPress | none | function | onPress method (required) |
 | icon | none | object {name(string), color(string), size(number)} | [Material Icon Name](https://design.google.com/icons/) (optional) | 
@@ -168,7 +168,7 @@ import { SocialIcon } from 'react-native-elements'
 | style | none | object (style) | button styling (optional) |
 | iconColor | white | string | icon color (optional) |
 | component | TouchableHighlight | React Native Component | type of button (optional)  |
-| fontFamily | HelveticaNeue-CondensedBlack (iOS), Roboto-Black (android) | string | specify different font family |
+| fontFamily | System font bold (iOS), Roboto-Black (android) | string | specify different font family |
 | fontStyle | none | object (style) | specify text styling |
 
 ## Lists
@@ -398,7 +398,7 @@ import { CheckBox } from 'react-native-elements'
 | checkedColor | green | string | default checked color (optional) |
 | uncheckedColor | #bfbfbf | string | default unchecked color (optional) |
 | checkedTitle | none | string | specify a custom checked message (optional) |
-| fontFamily | HelveticaNeue-Bold (iOS), Roboto-Bold (android) | string | specify different font family |
+| fontFamily | System font bold (iOS), Roboto-Bold (android) | string | specify different font family |
 
 ## Forms
 
@@ -427,7 +427,7 @@ import { FormLabel, FormInput } from 'react-native-elements'
 | ---- | ---- | ----| ---- |
 | containerStyle | none | object (style) | additional label container style (optional) |
 | labelStyle | none | object (style) | additional label styling (optional) |
-| fontFamily | HelveticaNeue-Bold (iOS), Roboto-Bold (android) | string | specify different font family |
+| fontFamily | System font bold (iOS), Roboto-Bold (android) | string | specify different font family |
 
 
 ## Card
@@ -455,7 +455,7 @@ import { Card } from 'react-native-elements'
 | title | none | string | optional card title (optional) |
 | titleStyle | none | object (style) | additional title styling (if title provided) (optional) |
 | dividerStyle | none | object (style) | additional divider styling (if title provided) (optional) |
-| fontFamily | HelveticaNeue-Bold (iOS), Roboto-Bold (android) | string | specify different font family |
+| fontFamily | System font bold (iOS), Roboto-Bold (android) | string | specify different font family |
 
 
 ## Pricing Component
@@ -486,10 +486,10 @@ import { PricingCard } from 'react-native-elements'
 | button | none | object {title, icon, buttonStyle} | button information (required) |
 | containerStyle | inherited styling | object (style) | outer component styling (optional) |
 | wrapperStyle | inherited styling | object (style) | inner wrapper component styling (optional) |
-| titleFont | HelveticaNeue-CondensedBlack (iOS), Roboto-Black (android) | string | specify title font family |
-| pricingFont | HelveticaNeue-Bold (iOS), Roboto-Bold (android) | string | specify pricing font family |
-| infoFont | HelveticaNeue-Bold (iOS), Roboto-Bold (android) | string | specify pricing information font family |
-| buttonFont | HelveticaNeue (iOS), Roboto (android) | string | specify button font family |
+| titleFont | System font (font weight 800) (iOS), Roboto-Black (android) | string | specify title font family |
+| pricingFont | System font (font weight 700) (iOS), Roboto-Bold (android) | string | specify pricing font family |
+| infoFont | System font bold (iOS), Roboto-Bold (android) | string | specify pricing information font family |
+| buttonFont | System font (iOS), Roboto (android) | string | specify button font family |
   
 
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-elements",
-  "version": "0.3.2",
+  "version": "0.4.1",
   "description": "React Native Elements & UI Toolkit",
   "main": "src/index.js",
   "repository": {

diff --git a/src/checkbox/CheckBox.js b/src/checkbox/CheckBox.js
@@ -120,7 +120,7 @@ styles = StyleSheet.create({
     color: colors.grey1,
     ...Platform.select({
       ios: {
-        fontFamily: fonts.ios.bold
+        fontWeight: 'bold'
       },
       android: {
         fontFamily: fonts.android.bold

diff --git a/src/config/fonts.js b/src/config/fonts.js
@@ -1,11 +1,5 @@
 export default {
   ios: {
-    regular: 'HelveticaNeue',
-    light: 'HelveticaNeue-Light',
-    lightItalic: 'HelveticaNeue-LightItalic',
-    bold: 'HelveticaNeue-Bold',
-    boldItalic: 'HelveticaNeue-BoldItalic',
-    black: 'HelveticaNeue-CondensedBlack',
   },
   android: {
     regular: 'Roboto',

diff --git a/src/containers/Card.js b/src/containers/Card.js
@@ -54,9 +54,18 @@ styles = StyleSheet.create({
     marginBottom: 15
   },
   cardTitle: {
-    fontFamily: fonts.ios.bold,
+    fontSize: 14,
+    ...Platform.select({
+      ios: {
+        fontWeight: 'bold'
+      },
+      android: {
+        fontFamily: fonts.android.black
+      }
+    }),
     textAlign: 'center',
-    marginBottom: 15
+    marginBottom: 15,
+    color: colors.grey1
   }
 })
 

diff --git a/src/form/FormInput.js b/src/form/FormInput.js
@@ -102,8 +102,9 @@ styles = StyleSheet.create({
     })
   },
   input: {
-    height: 40,
-    color: colors.grey3
+    height: 36,
+    color: colors.grey3,
+    fontSize: 14
   }
 })
 

diff --git a/src/form/FormLabel.js b/src/form/FormLabel.js
@@ -23,11 +23,11 @@ styles = StyleSheet.create({
     marginRight: 20,
     marginTop: 15,
     marginBottom: 1,
-    color: colors.grey2,
-    fontSize: 13,
+    color: colors.grey3,
+    fontSize: 12,
     ...Platform.select({
       ios: {
-        fontFamily: fonts.ios.bold
+        fontWeight: 'bold'
       },
       android: {
         fontFamily: fonts.android.bold

diff --git a/src/list/ListItem.js b/src/list/ListItem.js
@@ -133,7 +133,7 @@ styles = StyleSheet.create({
     marginRight: 10
   },
   title: {
-    fontSize: 16,
+    fontSize: 15,
     color: colors.grey1,
     marginTop: -2
   },
@@ -143,7 +143,7 @@ styles = StyleSheet.create({
     marginTop: 1,
     ...Platform.select({
       ios: {
-        fontFamily: fonts.ios.bold
+        fontWeight: '600'
       },
       android: {
         fontFamily: fonts.android.bold

diff --git a/src/pricing/PricingCard.js b/src/pricing/PricingCard.js
@@ -64,8 +64,13 @@ PricingCard.propTypes = {
   color: PropTypes.string
 }
 
+PricingCard.defaultProps = {
+  color: colors.primary
+}
+
 styles = StyleSheet.create({
   container: {
+    margin: 15,
     marginBottom: 15,
     backgroundColor: 'white',
     borderColor: colors.grey5,
@@ -92,7 +97,7 @@ styles = StyleSheet.create({
     fontSize: 30,
     ...Platform.select({
       ios: {
-        fontFamily: fonts.ios.black
+        fontWeight: '800'
       },
       android: {
         fontFamily: fonts.android.black
@@ -106,7 +111,7 @@ styles = StyleSheet.create({
     fontSize: 40,
     ...Platform.select({
       ios: {
-        fontFamily: fonts.ios.bold
+        fontWeight: '700'
       },
       android: {
         fontFamily: fonts.android.bold
@@ -120,7 +125,7 @@ styles = StyleSheet.create({
     color: colors.grey3,
     ...Platform.select({
       ios: {
-        fontFamily: fonts.ios.bold
+        fontWeight: '600'
       },
       android: {
         fontFamily: fonts.android.bold

diff --git a/src/social/SocialIcon.js b/src/social/SocialIcon.js
@@ -112,7 +112,7 @@ styles = StyleSheet.create({
     marginLeft: 15,
     ...Platform.select({
       ios: {
-        fontFamily: fonts.ios.black
+        fontWeight: 'bold'
       },
       android: {
         fontFamily: fonts.android.black