diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000000..99670bfe0d
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,3 @@
+{
+ "plugins": ["transform-object-rest-spread"]
+}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000000..b512c09d47
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules
\ No newline at end of file
diff --git a/.npmignore b/.npmignore
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/Fonts/Lato-Black.ttf b/Fonts/Lato-Black.ttf
new file mode 100755
index 0000000000..6848db0d1a
Binary files /dev/null and b/Fonts/Lato-Black.ttf differ
diff --git a/Fonts/Lato-BlackItalic.ttf b/Fonts/Lato-BlackItalic.ttf
new file mode 100755
index 0000000000..5decf12973
Binary files /dev/null and b/Fonts/Lato-BlackItalic.ttf differ
diff --git a/Fonts/Lato-Bold.ttf b/Fonts/Lato-Bold.ttf
new file mode 100755
index 0000000000..74343694e2
Binary files /dev/null and b/Fonts/Lato-Bold.ttf differ
diff --git a/Fonts/Lato-BoldItalic.ttf b/Fonts/Lato-BoldItalic.ttf
new file mode 100755
index 0000000000..684aacf5b4
Binary files /dev/null and b/Fonts/Lato-BoldItalic.ttf differ
diff --git a/Fonts/Lato-Hairline.ttf b/Fonts/Lato-Hairline.ttf
new file mode 100755
index 0000000000..288be29553
Binary files /dev/null and b/Fonts/Lato-Hairline.ttf differ
diff --git a/Fonts/Lato-HairlineItalic.ttf b/Fonts/Lato-HairlineItalic.ttf
new file mode 100755
index 0000000000..c2bfd3353e
Binary files /dev/null and b/Fonts/Lato-HairlineItalic.ttf differ
diff --git a/Fonts/Lato-Italic.ttf b/Fonts/Lato-Italic.ttf
new file mode 100755
index 0000000000..3d3b7a2984
Binary files /dev/null and b/Fonts/Lato-Italic.ttf differ
diff --git a/Fonts/Lato-Light.ttf b/Fonts/Lato-Light.ttf
new file mode 100755
index 0000000000..a958067a86
Binary files /dev/null and b/Fonts/Lato-Light.ttf differ
diff --git a/Fonts/Lato-LightItalic.ttf b/Fonts/Lato-LightItalic.ttf
new file mode 100755
index 0000000000..5e45ad9a6c
Binary files /dev/null and b/Fonts/Lato-LightItalic.ttf differ
diff --git a/Fonts/Lato-Regular.ttf b/Fonts/Lato-Regular.ttf
new file mode 100755
index 0000000000..04ea8efb13
Binary files /dev/null and b/Fonts/Lato-Regular.ttf differ
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000000..1394590fc5
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,22 @@
+
+The MIT License (MIT)
+
+Copyright (c) 2016 Nader Dabit
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/Readme.MD b/Readme.MD
new file mode 100644
index 0000000000..fcc463cd29
--- /dev/null
+++ b/Readme.MD
@@ -0,0 +1,272 @@
+
+## React Native UI Toolkit
+
+![React Native UI Toolkit]()
+
+## Get Started
+
+1 install React Native Elements
+
+```
+npm i react-native-elements --save
+```
+
+2 link project
+
+```
+rnpm link
+```
+
+3 start using components
+
+```
+import {
+ RNEButton
+} from 'react-native-elements'
+
+
+
+```
+
+
+# Included
+- [x] [Buttons]()
+- [x] Pricing Component
+- [x] [Social Icons / Buttons]()
+- [x] [Card component]()
+- [x] [Form Elements]()
+- [x] [List Element]()
+- [x] [Linked List Element]()
+- [x] HTML style headings (h1, h2, etc...)
+
+#### Todo Soon
+- [ ] Add icons to TextInputs
+- [ ] Add Profile Component
+- [ ] Add Picker
+- [ ] Add Search Bar
+- [ ] Add Side Menu
+
+# API
+
+## Buttons
+
+
+
+```
+import Button from 'HSButton'
+
+
+```
+
+| prop | default | type | description |
+| ---- | ---- | ----| ---- |
+| buttonStyle | none | object (style) | add additional styling for button component (optional) |
+| title | none | string | button title (required) |
+| onPress | none | function | onPress method (required) |
+| icon | none | object {name(string), color(string), size(number)} | [Material Icon Name](https://design.google.com/icons/) (optional) |
+| secondary | false | boolean | secondary button flag (optional) |
+| backgroundColor | primary color | string (color) | background color of button (optional) |
+| color | white | string(color) | font color (optional) |
+| textStyle | none | object (style) | text styling (optional) |
+| fontSize | 18 | number | font size (optional) |
+| underlayColor | transparent | string(color) | underlay color for button press (optional) |
+| raised | false | boolean | flag to add raised button styling (optional) |
+
+## Social Icons & Buttons
+
+
+
+```
+import SocialIcon from 'HSSocialIcon'
+
+// Icon
+
+
+// Button
+
+```
+
+| prop | default | type | description |
+| ---- | ---- | ----| ---- |
+| component | TouchableHighlight | React Native Component | type of button (optional) |
+| type | none | social media type (facebook, twitter, google-plus-official, pinterest, linkedin, youtube, vimeo, tumblr, instagram, quora, foursquare, wordpress, stumbleupon) | social media type (required) |
+| button | false | boolean | creates button (optional) |
+| onPress | none | funciton | onPress method (optional) |
+| iconStyle | none | object (style) | extra styling for icon component ([React Native Vector Icons](https://github.com/oblador/react-native-vector-icons)) (optional) |
+| style | none | object (style) | button styling (optional) |
+| iconColor | white | string | icon color (optional) |
+| title | none | string | title if made into a button (optional) |
+
+## Lists
+
+
+
+#### Using Map Function. Implemented with icons.
+
+```
+import List from 'HSList'
+import ListItem from 'HSListItem'
+
+
+ {
+ list1.map((l, i) => (
+
+ ))
+ }
+
+```
+
+#### Using RN ListView. Implemented with avatars.
+
+```
+renderRow (rowData, sectionID) {
+ return (
+
+ )
+}
+
+render () {
+ return (
+
+
+
+ )
+}
+
+```
+
+#### HSList Props
+
+| prop | default | type | description |
+| ---- | ---- | ----| ---- |
+| containerStyle | none | object (style) | style the list container |
+
+
+#### HSListItem Props
+
+| prop | default | type | description |
+| ---- | ---- | ----| ---- |
+| avatar | none | string | left avatar (optional) |
+| avatarStyle | none | object (style) | avatar styling (optional) |
+| chevronColor | #bdc6cf | string | set chevron color |
+| component | View or TouchableHighlight if onPress method is added as prop | React Native element | replace element with custom element (optional) |
+| containerStyle | none | object (style) | additional main container styling (optional) |
+| hideChevron | false | boolean | set if you do not want a chevron (optional) |
+| icon | none | object {name, color, style} | icon configuration for left icon (optional) |
+| onPress | none | function | onPress method for link (optional) |
+| rightIcon | chevron | string | right icon (optional) ([material icon name](https://design.google.com/icons/)) |
+| roundAvatar | false | boolan | make left avatar round |
+| subtitle | none | string | subtitle text (optional) |
+| subtitleStyle | none | object (style) | additional subtitle styling (optional ) |
+| title | none | string | main title for list item (required) |
+| titleStyle | none | object (style) | additional title styling (optional) |
+| wrapperStyle | none | object (style) | additional wrapper styling (optional) |
+| underlayColor | white | string | define underlay color for TouchableHighlight (optional) |
+
+## Forms
+
+
+
+```
+import FormLabel from 'HSFormLabel'
+import FormInput from 'HSFormInput'
+
+Name
+
+
+```
+### FormInput
+
+##### This component inherits [all native TextInput props that come with a standard React Native TextInput element](https://facebook.github.io/react-native/docs/textinput.html), along with the following:
+
+| prop | default | type | description |
+| ---- | ---- | ----| ---- |
+| containerStyle | none | object (style) | TextInput container styling (optional) |
+| inputStyle | none | object (style) | TextInput styling (optional) |
+
+### FormLabel
+
+| prop | default | type | description |
+| ---- | ---- | ----| ---- |
+| containerStyle | none | object (style) | additional label container style (optional) |
+| labelStyle | none | object (style) | additional label styling (optional) |
+
+## Card
+
+
+
+```
+import Card from 'HSCard'
+
+
+ {
+ users.map((u, i) => {}
+ }
+
+```
+
+| prop | default | type | description |
+| ---- | ---- | ----| ---- |
+| flexDirection | column | string | flex direction (row or column) |
+| containerStyle | none | object (style) | outer container style |
+| wrapperStyle | none | object (style) | inner container style |
+| title | none | string | optional card title |
+| titleStyle | none | object (style) | additional title styling (if title provided) |
+| dividerStyle | none | object (style) | additional divider styling (if title provided) |
+
+## Colors
+
+Colors are configured in `./src/config/colors`:
+
+````
+/**
+ * @providesModule HSColors
+ */
+
+export default {
+ primary: '#397af8',
+ primary1: '#4d86f7',
+ primary2: '#6296f9',
+ secondary: '#8F0CE8',
+ secondary2: '#00B233',
+ secondary3: '#00FF48',
+ grey1: '#43484d',
+ grey2: '#5e6977',
+ grey3: '#86939e',
+ grey4: '#bdc6cf',
+ grey5: '#e1e8ee',
+ dkGreyBg: '#232323',
+ greyOutline: '#cbd2d9'
+}
+
+
+```
+
+
+
diff --git a/dist/Divider.js b/dist/Divider.js
new file mode 100644
index 0000000000..2bb8941611
--- /dev/null
+++ b/dist/Divider.js
@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactNative = require('react-native');
+
+var _colors = require('./config/colors');
+
+var _colors2 = _interopRequireDefault(_colors);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = {};
+
+var Divider = function Divider(_ref) {
+ var style = _ref.style;
+ return _react2.default.createElement(_reactNative.View, { style: [styles.container, style && style] });
+};
+
+styles = _reactNative.StyleSheet.create({
+ container: {
+ height: 1,
+ backgroundColor: _colors2.default.grey5
+ }
+});
+
+exports.default = Divider;
\ No newline at end of file
diff --git a/dist/buttons/Button.js b/dist/buttons/Button.js
new file mode 100644
index 0000000000..f66e6b20b2
--- /dev/null
+++ b/dist/buttons/Button.js
@@ -0,0 +1,126 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactNative = require('react-native');
+
+var _MaterialIcons = require('react-native-vector-icons/MaterialIcons');
+
+var _MaterialIcons2 = _interopRequireDefault(_MaterialIcons);
+
+var _colors = require('../config/colors');
+
+var _colors2 = _interopRequireDefault(_colors);
+
+var _Text = require('../text/Text');
+
+var _Text2 = _interopRequireDefault(_Text);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = {};
+
+var log = function log() {
+ console.log('please attach method to this component');
+};
+
+var Button = function Button(_ref) {
+ var buttonStyle = _ref.buttonStyle;
+ var title = _ref.title;
+ var onPress = _ref.onPress;
+ var icon = _ref.icon;
+ var secondary = _ref.secondary;
+ var secondary2 = _ref.secondary2;
+ var secondary3 = _ref.secondary3;
+ var primary1 = _ref.primary1;
+ var primary2 = _ref.primary2;
+ var primary3 = _ref.primary3;
+ var backgroundColor = _ref.backgroundColor;
+ var color = _ref.color;
+ var fontSize = _ref.fontSize;
+ var underlayColor = _ref.underlayColor;
+ var raised = _ref.raised;
+ var textStyle = _ref.textStyle;
+ return _react2.default.createElement(
+ _reactNative.TouchableHighlight,
+ {
+ underlayColor: underlayColor || 'transparent',
+ onPress: onPress || log },
+ _react2.default.createElement(
+ _reactNative.View,
+ {
+ style: [styles.button, secondary && { backgroundColor: _colors2.default.secondary }, secondary2 && { backgroundColor: _colors2.default.secondary2 }, secondary3 && { backgroundColor: _colors2.default.secondary3 }, primary1 && { backgroundColor: _colors2.default.primary1 }, primary2 && { backgroundColor: _colors2.default.primary2 }, backgroundColor && { backgroundColor: backgroundColor }, buttonStyle && buttonStyle, raised && styles.raised]
+ },
+ icon && _react2.default.createElement(_MaterialIcons2.default, { color: icon.color || 'white', size: icon.size || 26, style: styles.icon, name: icon.name }),
+ _react2.default.createElement(
+ _Text2.default,
+ { style: [styles.text, textStyle && textStyle, color && { color: color }, fontSize && { fontSize: fontSize }] },
+ title
+ )
+ )
+ );
+};
+
+Button.propTypes = {
+ buttonStyle: _react.PropTypes.any,
+ title: _react.PropTypes.string,
+ onPress: _react.PropTypes.any,
+ icon: _react.PropTypes.object,
+ secondary: _react.PropTypes.bool,
+ secondary2: _react.PropTypes.bool,
+ secondary3: _react.PropTypes.bool,
+ primary1: _react.PropTypes.bool,
+ primary2: _react.PropTypes.bool,
+ primary3: _react.PropTypes.bool,
+ backgroundColor: _react.PropTypes.string,
+ color: _react.PropTypes.string,
+ fontSize: _react.PropTypes.number,
+ underlayColor: _react.PropTypes.string,
+ raised: _react.PropTypes.bool,
+ textStyle: _react.PropTypes.any
+};
+
+styles = _reactNative.StyleSheet.create({
+ button: {
+ padding: 20,
+ borderTopWidth: 1,
+ marginLeft: 15,
+ marginRight: 15,
+ borderColor: '#ededed',
+ backgroundColor: _colors2.default.primary,
+ justifyContent: 'center',
+ alignItems: 'center',
+ flexDirection: 'row',
+ borderRadius: 5,
+ marginTop: 7.5,
+ marginBottom: 7.5
+ },
+ text: {
+ color: 'white',
+ fontSize: 18
+ },
+ icon: {
+ marginRight: 10
+ },
+ raised: _extends({}, _reactNative.Platform.select({
+ ios: {
+ shadowColor: 'rgba(0,0,0, .4)',
+ shadowOffset: { height: 1, width: 1 },
+ shadowOpacity: 1,
+ shadowRadius: 1
+ },
+ android: {
+ elevation: 2
+ }
+ }))
+});
+
+exports.default = Button;
\ No newline at end of file
diff --git a/dist/config/colors.js b/dist/config/colors.js
new file mode 100644
index 0000000000..a1e820a6ff
--- /dev/null
+++ b/dist/config/colors.js
@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+exports.default = {
+ primary: '#397af8',
+ primary1: '#4d86f7',
+ primary2: '#6296f9',
+ secondary: '#8F0CE8',
+ secondary2: '#00B233',
+ secondary3: '#00FF48',
+ grey1: '#43484d',
+ grey2: '#5e6977',
+ grey3: '#86939e',
+ grey4: '#bdc6cf',
+ grey5: '#e1e8ee',
+ dkGreyBg: '#232323',
+ greyOutline: '#cbd2d9'
+};
\ No newline at end of file
diff --git a/dist/config/fonts.js b/dist/config/fonts.js
new file mode 100644
index 0000000000..d4671a2855
--- /dev/null
+++ b/dist/config/fonts.js
@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+/**
+ * @providesModule RNEFonts
+ */
+
+exports.default = {
+ ios: {
+ regular: 'Lato' || 'HelveticaNeue',
+ light: 'Lato-Light' || 'HelveticaNeue-Light',
+ lightItalic: 'Lato-LightItalic' || 'HelveticaNeue-LightItalic',
+ bold: 'Lato-Bold' || 'HelveticaNeue-Bold',
+ boldItalic: 'Lato-BoldItalic' || 'HelveticaNeue-BoldItalic',
+ black: 'Lato-Black' || 'HelveticaNeue-CondensedBlack',
+ blackItalic: 'Lato-BlackItalic' || 'HelveticaNeue-BoldItalic'
+ },
+ android: {
+ regular: 'Roboto',
+ italic: 'Roboto-Italic',
+ thin: 'Roboto-Thin',
+ thinItalic: 'Roboto-ThinItalic',
+ light: 'Roboto-Light',
+ lightItalic: 'Roboto-LightItalic',
+ medium: 'Roboto-Medium',
+ mediumItalic: 'Roboto-MediumItalic',
+ bold: 'Roboto-Bold',
+ boldItalic: 'Roboto-BoldItalic',
+ condensed: 'RobotoCondensed-Regular',
+ condensedItalic: 'RobotoCondensed-Italic'
+ }
+};
\ No newline at end of file
diff --git a/dist/containers/Card.js b/dist/containers/Card.js
new file mode 100644
index 0000000000..1ac658c316
--- /dev/null
+++ b/dist/containers/Card.js
@@ -0,0 +1,97 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactNative = require('react-native');
+
+var _fonts = require('../config/fonts');
+
+var _fonts2 = _interopRequireDefault(_fonts);
+
+var _colors = require('../config/colors');
+
+var _colors2 = _interopRequireDefault(_colors);
+
+var _Text = require('../text/Text');
+
+var _Text2 = _interopRequireDefault(_Text);
+
+var _Divider = require('../Divider');
+
+var _Divider2 = _interopRequireDefault(_Divider);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = {};
+
+var Card = function Card(_ref) {
+ var children = _ref.children;
+ var flexDirection = _ref.flexDirection;
+ var containerStyle = _ref.containerStyle;
+ var wrapperStyle = _ref.wrapperStyle;
+ var title = _ref.title;
+ var titleStyle = _ref.titleStyle;
+ var dividerStyle = _ref.dividerStyle;
+ return _react2.default.createElement(
+ _reactNative.View,
+ { style: [styles.container, containerStyle && containerStyle] },
+ _react2.default.createElement(
+ _reactNative.View,
+ { style: [styles.wrapper, wrapperStyle && wrapperStyle, flexDirection && { flexDirection: flexDirection }] },
+ title && _react2.default.createElement(
+ _reactNative.View,
+ null,
+ _react2.default.createElement(
+ _Text2.default,
+ { style: [styles.cardTitle, titleStyle && titleStyle] },
+ title
+ ),
+ _react2.default.createElement(_Divider2.default, { style: [styles.divider, dividerStyle && dividerStyle] })
+ ),
+ children
+ )
+ );
+};
+
+styles = _reactNative.StyleSheet.create({
+ container: _extends({
+ backgroundColor: 'white',
+ borderColor: _colors2.default.grey5,
+ borderWidth: 1,
+ borderRadius: 3,
+ padding: 15,
+ margin: 15,
+ marginBottom: 0
+ }, _reactNative.Platform.select({
+ ios: {
+ shadowColor: 'rgba(0,0,0, .2)',
+ shadowOffset: { height: 0, width: 0 },
+ shadowOpacity: 1,
+ shadowRadius: 1
+ },
+ android: {
+ elevation: 1
+ }
+ })),
+ wrapper: {
+ backgroundColor: 'transparent'
+ },
+ divider: {
+ marginBottom: 15
+ },
+ cardTitle: {
+ fontFamily: _fonts2.default.ios.bold,
+ textAlign: 'center',
+ marginBottom: 15
+ }
+});
+
+exports.default = Card;
\ No newline at end of file
diff --git a/dist/form/FormInput.js b/dist/form/FormInput.js
new file mode 100644
index 0000000000..f4f5ea1cde
--- /dev/null
+++ b/dist/form/FormInput.js
@@ -0,0 +1,119 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactNative = require('react-native');
+
+var _colors = require('../config/colors');
+
+var _colors2 = _interopRequireDefault(_colors);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = {};
+
+var FormInput = function FormInput(_ref) {
+ var containerStyle = _ref.containerStyle;
+ var inputStyle = _ref.inputStyle;
+ var value = _ref.value;
+ var autoCapitalize = _ref.autoCapitalize;
+ var autoCorrect = _ref.autoCorrect;
+ var autoFocus = _ref.autoFocus;
+ var blurOnSubmit = _ref.blurOnSubmit;
+ var defaultValue = _ref.defaultValue;
+ var editable = _ref.editable;
+ var keyboardType = _ref.keyboardType;
+ var maxLength = _ref.maxLength;
+ var multiline = _ref.multiline;
+ var onBlur = _ref.onBlur;
+ var onChange = _ref.onChange;
+ var onChangeText = _ref.onChangeText;
+ var onContentSizeChange = _ref.onContentSizeChange;
+ var onEndEditing = _ref.onEndEditing;
+ var onFocus = _ref.onFocus;
+ var onLayout = _ref.onLayout;
+ var onSelectionChange = _ref.onSelectionChange;
+ var onSubmitEditing = _ref.onSubmitEditing;
+ var placeholder = _ref.placeholder;
+ var placeholderTextColor = _ref.placeholderTextColor;
+ var returnKeyType = _ref.returnKeyType;
+ var secureTextEntry = _ref.secureTextEntry;
+ var selectTextOnFocus = _ref.selectTextOnFocus;
+ var selectionColor = _ref.selectionColor;
+ var inlineImageLeft = _ref.inlineImageLeft;
+ var inlineImagePadding = _ref.inlineImagePadding;
+ var numberOfLines = _ref.numberOfLines;
+ var returnKeyLabel = _ref.returnKeyLabel;
+ var underlineColorAndroid = _ref.underlineColorAndroid;
+ var clearButtonMode = _ref.clearButtonMode;
+ var clearTextOnFocus = _ref.clearTextOnFocus;
+ var dataDetectorTypes = _ref.dataDetectorTypes;
+ var enablesReturnKeyAutomatically = _ref.enablesReturnKeyAutomatically;
+ var keyboardAppearance = _ref.keyboardAppearance;
+ var onKeyPress = _ref.onKeyPress;
+ var selectionState = _ref.selectionState;
+ return _react2.default.createElement(
+ _reactNative.View,
+ { style: [styles.container, containerStyle && containerStyle] },
+ _react2.default.createElement(_reactNative.TextInput, {
+ autoCapitalize: autoCapitalize,
+ autoCorrect: autoCorrect,
+ autoFocus: autoFocus,
+ blurOnSubmit: blurOnSubmit,
+ defaultValue: defaultValue,
+ keyboardType: keyboardType,
+ maxLength: maxLength,
+ multiline: multiline,
+ onBlur: onBlur,
+ onChange: onChange,
+ onChangeText: onChangeText,
+ onContentSizeChange: onContentSizeChange,
+ onEndEditing: onEndEditing,
+ onFocus: onFocus,
+ onLayout: onLayout,
+ onSelectionChange: onSelectionChange,
+ onSubmitEditing: onSubmitEditing,
+ placeholder: placeholder,
+ placeholderTextColor: placeholderTextColor,
+ returnKeyType: returnKeyType,
+ secureTextEntry: secureTextEntry,
+ selectTextOnFocus: selectTextOnFocus,
+ inlineImageLeft: inlineImageLeft,
+ inlineImagePadding: inlineImagePadding,
+ numberOfLines: numberOfLines,
+ returnKeyLabel: returnKeyLabel,
+ underlineColorAndroid: underlineColorAndroid,
+ clearButtonMode: clearButtonMode,
+ clearTextOnFocus: clearTextOnFocus,
+ dataDetectorTypes: dataDetectorTypes,
+ enablesReturnKeyAutomatically: enablesReturnKeyAutomatically,
+ keyboardAppearance: keyboardAppearance,
+ onKeyPress: onKeyPress,
+ selectionState: selectionState,
+ editable: editable,
+ selectionColor: selectionColor || _colors2.default.grey3,
+ value: value,
+ style: [styles.input, inputStyle && inputStyle] })
+ );
+};
+
+styles = _reactNative.StyleSheet.create({
+ container: {
+ borderBottomColor: _colors2.default.grey4,
+ borderBottomWidth: 1,
+ marginLeft: 20,
+ marginRight: 20
+ },
+ input: {
+ height: 40,
+ color: _colors2.default.grey3
+ }
+});
+
+exports.default = FormInput;
\ No newline at end of file
diff --git a/dist/form/FormLabel.js b/dist/form/FormLabel.js
new file mode 100644
index 0000000000..1493a33af2
--- /dev/null
+++ b/dist/form/FormLabel.js
@@ -0,0 +1,65 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactNative = require('react-native');
+
+var _colors = require('../config/colors');
+
+var _colors2 = _interopRequireDefault(_colors);
+
+var _fonts = require('../config/fonts');
+
+var _fonts2 = _interopRequireDefault(_fonts);
+
+var _Text = require('../text/Text');
+
+var _Text2 = _interopRequireDefault(_Text);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = {};
+
+var FormLabel = function FormLabel(_ref) {
+ var containerStyle = _ref.containerStyle;
+ var labelStyle = _ref.labelStyle;
+ var children = _ref.children;
+ return _react2.default.createElement(
+ _reactNative.View,
+ { style: [styles.container, containerStyle && containerStyle] },
+ _react2.default.createElement(
+ _Text2.default,
+ { style: [styles.label, labelStyle && labelStyle] },
+ children.toUpperCase()
+ )
+ );
+};
+
+styles = _reactNative.StyleSheet.create({
+ container: {},
+ label: _extends({
+ marginLeft: 20,
+ marginRight: 20,
+ marginTop: 15,
+ marginBottom: 1,
+ color: _colors2.default.grey2,
+ fontSize: 13
+ }, _reactNative.Platform.select({
+ ios: {
+ fontFamily: _fonts2.default.ios.bold
+ },
+ android: {
+ fontFamily: _fonts2.default.android.bold
+ }
+ }))
+});
+
+exports.default = FormLabel;
\ No newline at end of file
diff --git a/dist/icons/Chevron.js b/dist/icons/Chevron.js
new file mode 100644
index 0000000000..4be67d121d
--- /dev/null
+++ b/dist/icons/Chevron.js
@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactNative = require('react-native');
+
+var _HSColors = require('HSColors');
+
+var _HSColors2 = _interopRequireDefault(_HSColors);
+
+var _MaterialIcons = require('react-native-vector-icons/MaterialIcons');
+
+var _MaterialIcons2 = _interopRequireDefault(_MaterialIcons);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Chevron = function Chevron(_ref) {
+ var type = _ref.type;
+ var style = _ref.style;
+ var color = _ref.color;
+ return _react2.default.createElement(
+ _reactNative.View,
+ { style: [style && style] },
+ _react2.default.createElement(_MaterialIcons2.default, { name: 'chevron-' + type, size: 26, color: color || _HSColors2.default.silver })
+ );
+};
+
+Chevron.propTypes = {
+ type: _react.PropTypes.string,
+ style: _react.PropTypes.any,
+ color: _react.PropTypes.string
+};
+
+exports.default = Chevron;
\ No newline at end of file
diff --git a/dist/index.js b/dist/index.js
new file mode 100644
index 0000000000..fa00ba8808
--- /dev/null
+++ b/dist/index.js
@@ -0,0 +1,58 @@
+'use strict';
+
+var _Button = require('./buttons/Button');
+
+var _Button2 = _interopRequireDefault(_Button);
+
+var _Card = require('./containers/Card');
+
+var _Card2 = _interopRequireDefault(_Card);
+
+var _FormInput = require('./form/FormInput');
+
+var _FormInput2 = _interopRequireDefault(_FormInput);
+
+var _FormLabel = require('./form/FormLabel');
+
+var _FormLabel2 = _interopRequireDefault(_FormLabel);
+
+var _List = require('./list/List');
+
+var _List2 = _interopRequireDefault(_List);
+
+var _ListItem = require('./list/ListItem');
+
+var _ListItem2 = _interopRequireDefault(_ListItem);
+
+var _PricingCard = require('./pricing/PricingCard');
+
+var _PricingCard2 = _interopRequireDefault(_PricingCard);
+
+var _SocialIcon = require('./social/SocialIcon');
+
+var _SocialIcon2 = _interopRequireDefault(_SocialIcon);
+
+var _Text = require('./text/Text');
+
+var _Text2 = _interopRequireDefault(_Text);
+
+var _Divider = require('./Divider');
+
+var _Divider2 = _interopRequireDefault(_Divider);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var RNElements = {
+ RNEButton: _Button2.default,
+ RNECard: _Card2.default,
+ RNEFormInput: _FormInput2.default,
+ RNEFormLabel: _FormLabel2.default,
+ RNEList: _List2.default,
+ RNEListItem: _ListItem2.default,
+ RNEPricingCard: _PricingCard2.default,
+ RNESocialIcon: _SocialIcon2.default,
+ RNEText: _Text2.default,
+ RNEDivider: _Divider2.default
+};
+
+module.exports = RNElements;
\ No newline at end of file
diff --git a/dist/list/List.js b/dist/list/List.js
new file mode 100644
index 0000000000..31bc7901ad
--- /dev/null
+++ b/dist/list/List.js
@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactNative = require('react-native');
+
+var _colors = require('../config/colors');
+
+var _colors2 = _interopRequireDefault(_colors);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = void 0;
+
+var Component = function Component(_ref) {
+ var children = _ref.children;
+ var containerStyle = _ref.containerStyle;
+ return _react2.default.createElement(
+ _reactNative.View,
+ { style: [styles.listContainer, containerStyle && containerStyle] },
+ children
+ );
+};
+
+Component.propTypes = {};
+
+styles = _reactNative.StyleSheet.create({
+ listContainer: {
+ marginTop: 20,
+ borderTopWidth: 1,
+ borderBottomWidth: 1,
+ borderColor: _colors2.default.greyOutline
+ }
+});
+
+exports.default = Component;
\ No newline at end of file
diff --git a/dist/list/ListItem.js b/dist/list/ListItem.js
new file mode 100644
index 0000000000..1bfc6d5b6c
--- /dev/null
+++ b/dist/list/ListItem.js
@@ -0,0 +1,175 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactNative = require('react-native');
+
+var _MaterialIcons = require('react-native-vector-icons/MaterialIcons');
+
+var _MaterialIcons2 = _interopRequireDefault(_MaterialIcons);
+
+var _Text = require('../text/Text');
+
+var _Text2 = _interopRequireDefault(_Text);
+
+var _colors = require('../config/colors');
+
+var _colors2 = _interopRequireDefault(_colors);
+
+var _fonts = require('../config/fonts');
+
+var _fonts2 = _interopRequireDefault(_fonts);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = void 0;
+
+var ListItem = function ListItem(_ref) {
+ var onPress = _ref.onPress;
+ var title = _ref.title;
+ var icon = _ref.icon;
+ var rightIcon = _ref.rightIcon;
+ var avatar = _ref.avatar;
+ var avatarStyle = _ref.avatarStyle;
+ var underlayColor = _ref.underlayColor;
+ var subtitle = _ref.subtitle;
+ var subtitleStyle = _ref.subtitleStyle;
+ var containerStyle = _ref.containerStyle;
+ var wrapperStyle = _ref.wrapperStyle;
+ var titleStyle = _ref.titleStyle;
+ var hideChevron = _ref.hideChevron;
+ var chevronColor = _ref.chevronColor;
+ var roundAvatar = _ref.roundAvatar;
+ var component = _ref.component;
+
+ var Component = onPress ? _reactNative.TouchableHighlight : _reactNative.View;
+ if (component) {
+ Component = component;
+ }
+ return _react2.default.createElement(
+ Component,
+ {
+ onPress: onPress,
+ underlayColor: underlayColor,
+ style: [styles.container, containerStyle && containerStyle] },
+ _react2.default.createElement(
+ _reactNative.View,
+ { style: [styles.wrapper, wrapperStyle && wrapperStyle] },
+ icon && icon.name && _react2.default.createElement(_MaterialIcons2.default, {
+ size: 28,
+ style: [styles.icon, icon.style && icon.style],
+ name: icon.name,
+ color: icon.color || _colors2.default.grey4
+ }),
+ avatar && _react2.default.createElement(_reactNative.Image, {
+ style: [styles.avatar, roundAvatar && { borderRadius: 15 }, avatarStyle && avatarStyle],
+ source: { uri: avatar }
+ }),
+ _react2.default.createElement(
+ _reactNative.View,
+ { style: styles.titleContainer },
+ _react2.default.createElement(
+ _Text2.default,
+ {
+ style: [styles.title, titleStyle && titleStyle, !icon && { marginLeft: 10 }] },
+ title
+ ),
+ subtitle && _react2.default.createElement(
+ _Text2.default,
+ {
+ style: [styles.subtitle, !icon && { marginLeft: 10 }, subtitleStyle && subtitleStyle] },
+ subtitle
+ )
+ ),
+ onPress && !hideChevron && _react2.default.createElement(
+ _reactNative.View,
+ { style: styles.chevronContainer },
+ _react2.default.createElement(_MaterialIcons2.default, {
+ style: styles.chevron,
+ size: 28,
+ name: rightIcon,
+ color: chevronColor })
+ )
+ )
+ );
+};
+
+ListItem.defaultProps = {
+ underlayColor: 'white',
+ chevronColor: _colors2.default.grey4,
+ rightIcon: 'chevron-right',
+ hideChevron: false,
+ roundAvatar: false
+};
+
+ListItem.propTypes = {
+ title: _react.PropTypes.string,
+ avatar: _react.PropTypes.any,
+ icon: _react.PropTypes.any,
+ onPress: _react.PropTypes.func,
+ rightIcon: _react.PropTypes.string,
+ underlayColor: _react.PropTypes.string,
+ subtitle: _react.PropTypes.string,
+ subtitleStyle: _react.PropTypes.any,
+ containerStyle: _react.PropTypes.any,
+ wrapperStyle: _react.PropTypes.any,
+ titleStyle: _react.PropTypes.any,
+ hideChevron: _react.PropTypes.bool,
+ chevronColor: _react.PropTypes.string,
+ roundAvatar: _react.PropTypes.bool
+};
+
+styles = _reactNative.StyleSheet.create({
+ avatar: {
+ width: 34,
+ height: 34
+ },
+ container: {
+ padding: 10,
+ borderBottomColor: '#ededed',
+ borderBottomWidth: 1,
+ backgroundColor: 'white'
+ },
+ wrapper: {
+ flexDirection: 'row'
+ },
+ icon: {
+ marginRight: 10
+ },
+ title: {
+ fontSize: 16,
+ color: _colors2.default.grey1,
+ marginTop: -2
+ },
+ subtitle: _extends({
+ color: _colors2.default.grey3,
+ fontSize: 12,
+ marginTop: 1
+ }, _reactNative.Platform.select({
+ ios: {
+ fontFamily: _fonts2.default.ios.bold
+ },
+ android: {
+ fontFamily: _fonts2.default.android.bold
+ }
+ })),
+ titleContainer: {
+ justifyContent: 'center'
+ },
+ chevronContainer: {
+ flex: 1,
+ alignItems: 'flex-end',
+ justifyContent: 'center'
+ },
+ chevron: {}
+});
+
+exports.default = ListItem;
\ No newline at end of file
diff --git a/dist/nav/BackButton.js b/dist/nav/BackButton.js
new file mode 100644
index 0000000000..2e0d3eb2f1
--- /dev/null
+++ b/dist/nav/BackButton.js
@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactNative = require('react-native');
+
+var _MaterialIcons = require('react-native-vector-icons/MaterialIcons');
+
+var _MaterialIcons2 = _interopRequireDefault(_MaterialIcons);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var BackButton = function BackButton(_ref) {
+ var onPress = _ref.onPress;
+ var name = _ref.name;
+ var size = _ref.size;
+ return _react2.default.createElement(
+ _reactNative.TouchableHighlight,
+ { onPress: onPress },
+ _react2.default.createElement(_MaterialIcons2.default, { name: name, size: size || 28 })
+ );
+}; /**
+ * @providesModule HSBackButton
+ */
+
+exports.default = BackButton;
\ No newline at end of file
diff --git a/dist/nav/NavBar.js b/dist/nav/NavBar.js
new file mode 100644
index 0000000000..478d93c6bd
--- /dev/null
+++ b/dist/nav/NavBar.js
@@ -0,0 +1,90 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /**
+ * @providesModule HSNavBar
+ */
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactNative = require('react-native');
+
+var _HSNavTitleComponent = require('HSNavTitleComponent');
+
+var _HSNavTitleComponent2 = _interopRequireDefault(_HSNavTitleComponent);
+
+var _HSNavTitleIcon = require('HSNavTitleIcon');
+
+var _HSNavTitleIcon2 = _interopRequireDefault(_HSNavTitleIcon);
+
+var _HSColors = require('HSColors');
+
+var _HSColors2 = _interopRequireDefault(_HSColors);
+
+var _MaterialIcons = require('react-native-vector-icons/MaterialIcons');
+
+var _MaterialIcons2 = _interopRequireDefault(_MaterialIcons);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = {};
+
+var NavigationBar = function NavigationBar() {
+ var src = require('image!logo');
+ var LeftButton = function LeftButton(route, navigator, index, navState) {
+ if (index > 0) {
+ var leftAction = navigator.pop;
+ var leftIcon = 'chevron-left';
+ return _react2.default.createElement(_MaterialIcons2.default, {
+ onPress: leftAction,
+ name: leftIcon, size: 28 });
+ }
+ return null;
+ };
+
+ var RightButton = function RightButton() /* route, navigator, index, navState */{
+ return null;
+ };
+
+ var Title = function Title(route, navigator, index, navState) {
+ if (route.title) {
+ return _react2.default.createElement(_HSNavTitleComponent2.default, { title: route.title });
+ }
+ return _react2.default.createElement(_HSNavTitleIcon2.default, { src: src });
+ };
+
+ return _react2.default.createElement(_reactNative.Navigator.NavigationBar, {
+ routeMapper: {
+ LeftButton: LeftButton,
+ RightButton: RightButton,
+ Title: Title
+ },
+ style: styles.navBar
+ });
+};
+
+styles = _reactNative.StyleSheet.create({
+ navBar: _extends({
+ height: 65,
+ backgroundColor: _HSColors2.default.dkGreyBg
+ }, _reactNative.Platform.select({
+ android: {
+ height: 55
+ }
+ })),
+ backIcon: _extends({
+ marginLeft: 10,
+ marginTop: 10
+ }, _reactNative.Platform.select({
+ android: {
+ marginTop: 15
+ }
+ }))
+});
+
+exports.default = NavigationBar;
\ No newline at end of file
diff --git a/dist/nav/NavTitleComponent.js b/dist/nav/NavTitleComponent.js
new file mode 100644
index 0000000000..9813630dee
--- /dev/null
+++ b/dist/nav/NavTitleComponent.js
@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactNative = require('react-native');
+
+var _HSText = require('HSText');
+
+var _HSText2 = _interopRequireDefault(_HSText);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var NavTitleComponent = function NavTitleComponent() {
+ return _react2.default.createElement(
+ _reactNative.View,
+ null,
+ _react2.default.createElement(
+ _HSText2.default,
+ null,
+ 'Hello from Nav'
+ )
+ );
+}; /**
+ * @providesModule HSNavTitleComponent
+ */
+
+exports.default = NavTitleComponent;
\ No newline at end of file
diff --git a/dist/nav/NavTitleIcon.js b/dist/nav/NavTitleIcon.js
new file mode 100644
index 0000000000..a4d6d1ef1b
--- /dev/null
+++ b/dist/nav/NavTitleIcon.js
@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactNative = require('react-native');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * @providesModule HSNavTitleIcon
+ */
+
+var styles = {};
+
+var NavTitleIcon = function NavTitleIcon(_ref) {
+ var src = _ref.src;
+ return _react2.default.createElement(
+ _reactNative.View,
+ null,
+ _react2.default.createElement(_reactNative.Image, {
+ source: src,
+ style: styles.logo })
+ );
+};
+
+styles = _reactNative.StyleSheet.create({
+ container: {},
+ logo: {
+ resizeMode: 'center',
+ marginTop: -15
+ }
+});
+
+exports.default = NavTitleIcon;
\ No newline at end of file
diff --git a/dist/pricing/PricingCard.js b/dist/pricing/PricingCard.js
new file mode 100644
index 0000000000..3e5071a3b3
--- /dev/null
+++ b/dist/pricing/PricingCard.js
@@ -0,0 +1,141 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactNative = require('react-native');
+
+var _Text = require('../text/Text');
+
+var _Text2 = _interopRequireDefault(_Text);
+
+var _fonts = require('../config/fonts');
+
+var _fonts2 = _interopRequireDefault(_fonts);
+
+var _colors = require('../config/colors');
+
+var _colors2 = _interopRequireDefault(_colors);
+
+var _Button = require('../buttons/Button');
+
+var _Button2 = _interopRequireDefault(_Button);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = {};
+
+var PricingCard = function PricingCard(_ref) {
+ var children = _ref.children;
+ var flexDirection = _ref.flexDirection;
+ var containerStyle = _ref.containerStyle;
+ var wrapperStyle = _ref.wrapperStyle;
+ var title = _ref.title;
+ var price = _ref.price;
+ var info = _ref.info;
+ var button = _ref.button;
+ var color = _ref.color;
+ return _react2.default.createElement(
+ _reactNative.View,
+ { style: [styles.container, containerStyle && containerStyle] },
+ _react2.default.createElement(
+ _reactNative.View,
+ { style: [styles.wrapper, wrapperStyle && wrapperStyle, flexDirection && { flexDirection: flexDirection }] },
+ _react2.default.createElement(
+ _Text2.default,
+ { style: [styles.pricingTitle, { color: color }] },
+ title
+ ),
+ _react2.default.createElement(
+ _Text2.default,
+ { style: styles.pricingPrice },
+ price
+ ),
+ info.map(function (info, i) {
+ return _react2.default.createElement(
+ _Text2.default,
+ { key: i, style: styles.pricingInfo },
+ info
+ );
+ }),
+ _react2.default.createElement(_Button2.default, {
+ icon: { name: button.icon },
+ buttonStyle: [styles.button, button.buttonStyle, { backgroundColor: color }],
+ title: button.title })
+ )
+ );
+};
+
+styles = _reactNative.StyleSheet.create({
+ container: _extends({
+ marginBottom: 15,
+ backgroundColor: 'white',
+ borderColor: _colors2.default.grey5,
+ borderWidth: 1,
+ padding: 15
+ }, _reactNative.Platform.select({
+ ios: {
+ shadowColor: 'rgba(0,0,0, .2)',
+ shadowOffset: { height: 1, width: 0 },
+ shadowOpacity: 0.5,
+ shadowRadius: 0.5
+ },
+ android: {
+ elevation: 1
+ }
+ })),
+ wrapper: {
+ backgroundColor: 'transparent'
+ },
+ pricingTitle: _extends({
+ textAlign: 'center',
+ color: _colors2.default.primary,
+ fontSize: 30
+ }, _reactNative.Platform.select({
+ ios: {
+ fontFamily: _fonts2.default.ios.black
+ },
+ android: {
+ fontFamily: _fonts2.default.android.black
+ }
+ })),
+ pricingPrice: _extends({
+ textAlign: 'center',
+ marginTop: 10,
+ marginBottom: 10,
+ fontSize: 40
+ }, _reactNative.Platform.select({
+ ios: {
+ fontFamily: _fonts2.default.ios.bold
+ },
+ android: {
+ fontFamily: _fonts2.default.android.bold
+ }
+ })),
+ pricingInfo: _extends({
+ textAlign: 'center',
+ marginTop: 5,
+ marginBottom: 5,
+ color: _colors2.default.grey3
+ }, _reactNative.Platform.select({
+ ios: {
+ fontFamily: _fonts2.default.ios.bold
+ },
+ android: {
+ fontFamily: _fonts2.default.android.bold
+ }
+ })),
+ button: {
+ marginTop: 15,
+ marginBottom: 10
+ }
+});
+
+exports.default = PricingCard;
\ No newline at end of file
diff --git a/dist/social/SocialIcon.js b/dist/social/SocialIcon.js
new file mode 100644
index 0000000000..c72455c38d
--- /dev/null
+++ b/dist/social/SocialIcon.js
@@ -0,0 +1,128 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _colors;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactNative = require('react-native');
+
+var _FontAwesome = require('react-native-vector-icons/FontAwesome');
+
+var _FontAwesome2 = _interopRequireDefault(_FontAwesome);
+
+var _Text = require('../text/Text');
+
+var _Text2 = _interopRequireDefault(_Text);
+
+var _fonts = require('../config/fonts');
+
+var _fonts2 = _interopRequireDefault(_fonts);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var styles = void 0;
+
+var colors = (_colors = {
+ facebook: '#3b5998',
+ twitter: '#00aced'
+}, _defineProperty(_colors, 'google-plus-official', '#dd4b39'), _defineProperty(_colors, 'pinterest', '#cb2027'), _defineProperty(_colors, 'linkedin', '#007bb6'), _defineProperty(_colors, 'youtube', '#bb0000'), _defineProperty(_colors, 'vimeo', '#aad450'), _defineProperty(_colors, 'tumblr', '#32506d'), _defineProperty(_colors, 'instagram', '#517fa4'), _defineProperty(_colors, 'quora', '#a82400'), _defineProperty(_colors, 'foursquare', '#0072b1'), _defineProperty(_colors, 'wordpress', '#21759b'), _defineProperty(_colors, 'stumbleupon', '#EB4823'), _colors);
+
+var onTouch = function onTouch() {
+ return console.log('please attach a click handler...');
+};
+
+var SocialIcon = function SocialIcon(_ref) {
+ var component = _ref.component;
+ var type = _ref.type;
+ var button = _ref.button;
+ var onPress = _ref.onPress;
+ var iconStyle = _ref.iconStyle;
+ var style = _ref.style;
+ var iconColor = _ref.iconColor;
+ var title = _ref.title;
+
+ var onClick = onPress || onTouch;
+ var Component = component || _reactNative.TouchableHighlight;
+ return _react2.default.createElement(
+ Component,
+ {
+ underlayColor: colors[type],
+ onPress: onClick,
+ style: [styles.container, button ? styles.button : styles.icon, { backgroundColor: colors[type] }, style && style] },
+ _react2.default.createElement(
+ _reactNative.View,
+ { style: styles.wrapper },
+ _react2.default.createElement(_FontAwesome2.default, {
+ style: [iconStyle && iconStyle],
+ color: iconColor || 'white',
+ name: type,
+ size: 24 }),
+ button && title && _react2.default.createElement(
+ _Text2.default,
+ { style: styles.title },
+ title
+ )
+ )
+ );
+};
+
+SocialIcon.propTypes = {
+ component: _react.PropTypes.element,
+ type: _react.PropTypes.string,
+ button: _react.PropTypes.bool,
+ onPress: _react.PropTypes.func,
+ iconStyle: _react.PropTypes.any,
+ style: _react.PropTypes.any,
+ iconColor: _react.PropTypes.string,
+ title: _react.PropTypes.string
+};
+
+styles = _reactNative.StyleSheet.create({
+ container: _extends({
+ margin: 7,
+ padding: 15,
+ borderRadius: 30
+ }, _reactNative.Platform.select({
+ ios: {
+ shadowColor: 'rgba(0,0,0, .4)',
+ shadowOffset: { height: 1, width: 1 },
+ shadowOpacity: 1,
+ shadowRadius: 1
+ },
+ android: {
+ elevation: 2
+ }
+ })),
+ wrapper: {
+ flexDirection: 'row',
+ justifyContent: 'center',
+ alignItems: 'center'
+ },
+ title: _extends({
+ color: 'white',
+ marginLeft: 15
+ }, _reactNative.Platform.select({
+ ios: {
+ fontFamily: _fonts2.default.ios.black
+ },
+ android: {
+ fontFamily: _fonts2.default.android.black
+ }
+ })),
+ icon: {
+ height: 52,
+ width: 52
+ }
+});
+
+exports.default = SocialIcon;
\ No newline at end of file
diff --git a/dist/text/Text.js b/dist/text/Text.js
new file mode 100644
index 0000000000..81da4f593b
--- /dev/null
+++ b/dist/text/Text.js
@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+ value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactNative = require('react-native');
+
+var _fonts = require('../config/fonts');
+
+var _fonts2 = _interopRequireDefault(_fonts);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var styles = {};
+
+var TextElement = function TextElement(_ref) {
+ var style = _ref.style;
+ var children = _ref.children;
+ var h1 = _ref.h1;
+ var h2 = _ref.h2;
+ var h3 = _ref.h3;
+ var h4 = _ref.h4;
+ return _react2.default.createElement(
+ _reactNative.Text,
+ {
+ style: [styles.text, h1 && { fontSize: 40 }, h2 && { fontSize: 34 }, h3 && { fontSize: 28 }, h4 && { fontSize: 22 }, h1 && styles.bold, h2 && styles.bold, h3 && styles.bold, h4 && styles.bold, style && style] },
+ children
+ );
+};
+
+styles = _reactNative.StyleSheet.create({
+ text: _extends({}, _reactNative.Platform.select({
+ ios: {
+ fontFamily: _fonts2.default.ios.regular
+ },
+ android: {
+ fontFamily: _fonts2.default.android.regular
+ }
+ })),
+ bold: _extends({}, _reactNative.Platform.select({
+ ios: {
+ fontFamily: _fonts2.default.ios.bold
+ },
+ android: {
+ fontFamily: _fonts2.default.android.bold
+ }
+ }))
+});
+
+exports.default = TextElement;
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000000..5da356531d
--- /dev/null
+++ b/package.json
@@ -0,0 +1,40 @@
+{
+ "name": "react-native-elements",
+ "version": "0.0.1",
+ "description": "React Native Elements & UI Toolkit",
+ "main": "dist/index.js",
+ "scripts": {
+ "build": "babel src --out-dir dist --presets es2015,react",
+ "watch": "babel src --out-dir dist --watch --presets es2015,react"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+ssh://git@github.com/dabit3/React-Native-Elements.git"
+ },
+ "keywords": [
+ "react-native",
+ "reactjs",
+ "reactnative",
+ "bootstrap"
+ ],
+ "dependencies": {
+ "react-native-vector-icons": "^2.1.0"
+ },
+ "rnpm": {
+ "assets": [
+ "Fonts"
+ ]
+ },
+ "devDependencies": {
+ "babel-cli": "^6.11.4",
+ "babel-plugin-transform-object-rest-spread": "^6.8.0",
+ "babel-preset-es2015": "^6.13.2",
+ "babel-preset-react": "^6.11.1"
+ },
+ "author": "Nader Dabit",
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/dabit3/React-Native-Elements/issues"
+ },
+ "homepage": "https://github.com/dabit3/React-Native-Elements#readme"
+}
diff --git a/src/Divider.js b/src/Divider.js
new file mode 100644
index 0000000000..29ba62f1cc
--- /dev/null
+++ b/src/Divider.js
@@ -0,0 +1,18 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import colors from './config/colors'
+
+let styles = {}
+
+const Divider = ({style}) => (
+
+)
+
+styles = StyleSheet.create({
+ container: {
+ height: 1,
+ backgroundColor: colors.grey5
+ }
+})
+
+export default Divider
diff --git a/src/buttons/Button.js b/src/buttons/Button.js
new file mode 100644
index 0000000000..f30bc22f1c
--- /dev/null
+++ b/src/buttons/Button.js
@@ -0,0 +1,96 @@
+import React, { PropTypes } from 'react'
+import { TouchableHighlight, StyleSheet, View, Platform } from 'react-native'
+import Icon from 'react-native-vector-icons/MaterialIcons'
+import colors from '../config/colors'
+import Text from '../text/Text'
+
+let styles = {}
+
+const log = () => {
+ console.log('please attach method to this component')
+}
+
+const Button = ({buttonStyle, title, onPress, icon, secondary, secondary2, secondary3, primary1, primary2, primary3, backgroundColor, color, fontSize, underlayColor, raised, textStyle}) => (
+
+
+ {
+ icon &&
+ }
+
+ {title}
+
+
+
+)
+
+Button.propTypes = {
+ buttonStyle: PropTypes.any,
+ title: PropTypes.string,
+ onPress: PropTypes.any,
+ icon: PropTypes.object,
+ secondary: PropTypes.bool,
+ secondary2: PropTypes.bool,
+ secondary3: PropTypes.bool,
+ primary1: PropTypes.bool,
+ primary2: PropTypes.bool,
+ primary3: PropTypes.bool,
+ backgroundColor: PropTypes.string,
+ color: PropTypes.string,
+ fontSize: PropTypes.number,
+ underlayColor: PropTypes.string,
+ raised: PropTypes.bool,
+ textStyle: PropTypes.any
+}
+
+styles = StyleSheet.create({
+ button: {
+ padding: 20,
+ borderTopWidth: 1,
+ marginLeft: 15,
+ marginRight: 15,
+ borderColor: '#ededed',
+ backgroundColor: colors.primary,
+ justifyContent: 'center',
+ alignItems: 'center',
+ flexDirection: 'row',
+ borderRadius: 5,
+ marginTop: 7.5,
+ marginBottom: 7.5
+ },
+ text: {
+ color: 'white',
+ fontSize: 18
+ },
+ icon: {
+ marginRight: 10
+ },
+ raised: {
+ ...Platform.select({
+ ios: {
+ shadowColor: 'rgba(0,0,0, .4)',
+ shadowOffset: {height: 1, width: 1},
+ shadowOpacity: 1,
+ shadowRadius: 1
+ },
+ android: {
+ elevation: 2
+ }
+ })
+ }
+})
+
+export default Button
diff --git a/src/config/colors.js b/src/config/colors.js
new file mode 100644
index 0000000000..35a512f7d4
--- /dev/null
+++ b/src/config/colors.js
@@ -0,0 +1,15 @@
+export default {
+ primary: '#397af8',
+ primary1: '#4d86f7',
+ primary2: '#6296f9',
+ secondary: '#8F0CE8',
+ secondary2: '#00B233',
+ secondary3: '#00FF48',
+ grey1: '#43484d',
+ grey2: '#5e6977',
+ grey3: '#86939e',
+ grey4: '#bdc6cf',
+ grey5: '#e1e8ee',
+ dkGreyBg: '#232323',
+ greyOutline: '#cbd2d9'
+}
diff --git a/src/config/fonts.js b/src/config/fonts.js
new file mode 100644
index 0000000000..196c8509d2
--- /dev/null
+++ b/src/config/fonts.js
@@ -0,0 +1,29 @@
+/**
+ * @providesModule RNEFonts
+ */
+
+export default {
+ ios: {
+ regular: 'Lato' || 'HelveticaNeue',
+ light: 'Lato-Light' || 'HelveticaNeue-Light',
+ lightItalic: 'Lato-LightItalic' || 'HelveticaNeue-LightItalic',
+ bold: 'Lato-Bold' || 'HelveticaNeue-Bold',
+ boldItalic: 'Lato-BoldItalic' || 'HelveticaNeue-BoldItalic',
+ black: 'Lato-Black' || 'HelveticaNeue-CondensedBlack',
+ blackItalic: 'Lato-BlackItalic' || 'HelveticaNeue-BoldItalic'
+ },
+ android: {
+ regular: 'Roboto',
+ italic: 'Roboto-Italic',
+ thin: 'Roboto-Thin',
+ thinItalic: 'Roboto-ThinItalic',
+ light: 'Roboto-Light',
+ lightItalic: 'Roboto-LightItalic',
+ medium: 'Roboto-Medium',
+ mediumItalic: 'Roboto-MediumItalic',
+ bold: 'Roboto-Bold',
+ boldItalic: 'Roboto-BoldItalic',
+ condensed: 'RobotoCondensed-Regular',
+ condensedItalic: 'RobotoCondensed-Italic'
+ }
+}
diff --git a/src/containers/Card.js b/src/containers/Card.js
new file mode 100644
index 0000000000..5c47f17223
--- /dev/null
+++ b/src/containers/Card.js
@@ -0,0 +1,59 @@
+import React from 'react'
+import { View, StyleSheet, Platform } from 'react-native'
+import fonts from '../config/fonts'
+import colors from '../config/colors'
+import Text from '../text/Text'
+import Divider from '../Divider'
+let styles = {}
+
+const Card = ({children, flexDirection, containerStyle, wrapperStyle, title, titleStyle, dividerStyle}) => (
+
+
+ {
+ title && (
+
+ {title}
+
+
+ )
+ }
+ {children}
+
+
+)
+
+styles = StyleSheet.create({
+ container: {
+ backgroundColor: 'white',
+ borderColor: colors.grey5,
+ borderWidth: 1,
+ borderRadius: 3,
+ padding: 15,
+ margin: 15,
+ marginBottom: 0,
+ ...Platform.select({
+ ios: {
+ shadowColor: 'rgba(0,0,0, .2)',
+ shadowOffset: {height: 0, width: 0},
+ shadowOpacity: 1,
+ shadowRadius: 1
+ },
+ android: {
+ elevation: 1
+ }
+ })
+ },
+ wrapper: {
+ backgroundColor: 'transparent'
+ },
+ divider: {
+ marginBottom: 15
+ },
+ cardTitle: {
+ fontFamily: fonts.ios.bold,
+ textAlign: 'center',
+ marginBottom: 15
+ }
+})
+
+export default Card
diff --git a/src/form/FormInput.js b/src/form/FormInput.js
new file mode 100644
index 0000000000..ba86da9980
--- /dev/null
+++ b/src/form/FormInput.js
@@ -0,0 +1,104 @@
+import React from 'react'
+import { TextInput, StyleSheet, View } from 'react-native'
+import colors from '../config/colors'
+
+let styles = {}
+
+const FormInput = ({
+ containerStyle,
+ inputStyle,
+ value,
+ autoCapitalize,
+ autoCorrect,
+ autoFocus,
+ blurOnSubmit,
+ defaultValue,
+ editable,
+ keyboardType,
+ maxLength,
+ multiline,
+ onBlur,
+ onChange,
+ onChangeText,
+ onContentSizeChange,
+ onEndEditing,
+ onFocus,
+ onLayout,
+ onSelectionChange,
+ onSubmitEditing,
+ placeholder,
+ placeholderTextColor,
+ returnKeyType,
+ secureTextEntry,
+ selectTextOnFocus,
+ selectionColor,
+ inlineImageLeft,
+ inlineImagePadding,
+ numberOfLines,
+ returnKeyLabel,
+ underlineColorAndroid,
+ clearButtonMode,
+ clearTextOnFocus,
+ dataDetectorTypes,
+ enablesReturnKeyAutomatically,
+ keyboardAppearance,
+ onKeyPress,
+ selectionState
+}) => (
+
+
+
+)
+
+styles = StyleSheet.create({
+ container: {
+ borderBottomColor: colors.grey4,
+ borderBottomWidth: 1,
+ marginLeft: 20,
+ marginRight: 20
+ },
+ input: {
+ height: 40,
+ color: colors.grey3
+ }
+})
+
+export default FormInput
diff --git a/src/form/FormLabel.js b/src/form/FormLabel.js
new file mode 100644
index 0000000000..2a963d15f6
--- /dev/null
+++ b/src/form/FormLabel.js
@@ -0,0 +1,35 @@
+import React from 'react'
+import { StyleSheet, View, Platform } from 'react-native'
+import colors from '../config/colors'
+import fonts from '../config/fonts'
+import Text from '../text/Text'
+
+let styles = {}
+
+const FormLabel = ({containerStyle, labelStyle, children}) => (
+
+ {children.toUpperCase()}
+
+)
+
+styles = StyleSheet.create({
+ container: {},
+ label: {
+ marginLeft: 20,
+ marginRight: 20,
+ marginTop: 15,
+ marginBottom: 1,
+ color: colors.grey2,
+ fontSize: 13,
+ ...Platform.select({
+ ios: {
+ fontFamily: fonts.ios.bold
+ },
+ android: {
+ fontFamily: fonts.android.bold
+ }
+ })
+ }
+})
+
+export default FormLabel
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000000..24b1cc9dc9
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,25 @@
+import RNEButton from './buttons/Button'
+import RNECard from './containers/Card'
+import RNEFormInput from './form/FormInput'
+import RNEFormLabel from './form/FormLabel'
+import RNEList from './list/List'
+import RNEListItem from './list/ListItem'
+import RNEPricingCard from './pricing/PricingCard'
+import RNESocialIcon from './social/SocialIcon'
+import RNEText from './text/Text'
+import RNEDivider from './Divider'
+
+const RNElements = {
+ RNEButton,
+ RNECard,
+ RNEFormInput,
+ RNEFormLabel,
+ RNEList,
+ RNEListItem,
+ RNEPricingCard,
+ RNESocialIcon,
+ RNEText,
+ RNEDivider
+}
+
+module.exports = RNElements
diff --git a/src/list/List.js b/src/list/List.js
new file mode 100644
index 0000000000..2905881d4f
--- /dev/null
+++ b/src/list/List.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import { View, StyleSheet } from 'react-native'
+import colors from '../config/colors'
+let styles
+
+const Component = ({children, containerStyle}) => (
+
+ {children}
+
+)
+
+Component.propTypes = {}
+
+styles = StyleSheet.create({
+ listContainer: {
+ marginTop: 20,
+ borderTopWidth: 1,
+ borderBottomWidth: 1,
+ borderColor: colors.greyOutline
+ }
+})
+
+export default Component
diff --git a/src/list/ListItem.js b/src/list/ListItem.js
new file mode 100644
index 0000000000..e1b172f109
--- /dev/null
+++ b/src/list/ListItem.js
@@ -0,0 +1,162 @@
+import React, { PropTypes } from 'react'
+import { View, StyleSheet, TouchableHighlight, Image, Platform } from 'react-native'
+import Icon from 'react-native-vector-icons/MaterialIcons'
+import Text from '../text/Text'
+import colors from '../config/colors'
+import fonts from '../config/fonts'
+let styles
+
+const ListItem = ({
+ onPress,
+ title,
+ icon,
+ rightIcon,
+ avatar,
+ avatarStyle,
+ underlayColor,
+ subtitle,
+ subtitleStyle,
+ containerStyle,
+ wrapperStyle,
+ titleStyle,
+ hideChevron,
+ chevronColor,
+ roundAvatar,
+ component
+}) => {
+ let Component = onPress ? TouchableHighlight : View
+ if (component) {
+ Component = component
+ }
+ return (
+
+
+ {
+ icon && icon.name && (
+
+ )
+ }
+ {
+ avatar && (
+
+ )
+ }
+
+ {title}
+ {subtitle && (
+ {subtitle}
+ )}
+
+ {
+ onPress && !hideChevron && (
+
+
+
+ )
+ }
+
+
+ )
+}
+
+ListItem.defaultProps = {
+ underlayColor: 'white',
+ chevronColor: colors.grey4,
+ rightIcon: 'chevron-right',
+ hideChevron: false,
+ roundAvatar: false
+}
+
+ListItem.propTypes = {
+ title: PropTypes.string,
+ avatar: PropTypes.any,
+ icon: PropTypes.any,
+ onPress: PropTypes.func,
+ rightIcon: PropTypes.string,
+ underlayColor: PropTypes.string,
+ subtitle: PropTypes.string,
+ subtitleStyle: PropTypes.any,
+ containerStyle: PropTypes.any,
+ wrapperStyle: PropTypes.any,
+ titleStyle: PropTypes.any,
+ hideChevron: PropTypes.bool,
+ chevronColor: PropTypes.string,
+ roundAvatar: PropTypes.bool
+}
+
+styles = StyleSheet.create({
+ avatar: {
+ width: 34,
+ height: 34
+ },
+ container: {
+ padding: 10,
+ borderBottomColor: '#ededed',
+ borderBottomWidth: 1,
+ backgroundColor: 'white'
+ },
+ wrapper: {
+ flexDirection: 'row'
+ },
+ icon: {
+ marginRight: 10
+ },
+ title: {
+ fontSize: 16,
+ color: colors.grey1,
+ marginTop: -2
+ },
+ subtitle: {
+ color: colors.grey3,
+ fontSize: 12,
+ marginTop: 1,
+ ...Platform.select({
+ ios: {
+ fontFamily: fonts.ios.bold
+ },
+ android: {
+ fontFamily: fonts.android.bold
+ }
+ })
+ },
+ titleContainer: {
+ justifyContent: 'center'
+ },
+ chevronContainer: {
+ flex: 1,
+ alignItems: 'flex-end',
+ justifyContent: 'center'
+ },
+ chevron: {
+ }
+})
+
+export default ListItem
diff --git a/src/pricing/PricingCard.js b/src/pricing/PricingCard.js
new file mode 100644
index 0000000000..c9583625af
--- /dev/null
+++ b/src/pricing/PricingCard.js
@@ -0,0 +1,96 @@
+import React from 'react'
+import { View, StyleSheet, Platform } from 'react-native'
+import Text from '../text/Text'
+import fonts from '../config/fonts'
+import colors from '../config/colors'
+import Button from '../buttons/Button'
+let styles = {}
+
+const PricingCard = ({children, flexDirection, containerStyle, wrapperStyle, title, price, info, button, color}) => (
+
+
+ {title}
+ {price}
+ {
+ info.map((info, i) => {
+ return {info}
+ })
+ }
+
+
+
+)
+
+styles = StyleSheet.create({
+ container: {
+ marginBottom: 15,
+ backgroundColor: 'white',
+ borderColor: colors.grey5,
+ borderWidth: 1,
+ padding: 15,
+ ...Platform.select({
+ ios: {
+ shadowColor: 'rgba(0,0,0, .2)',
+ shadowOffset: {height: 1, width: 0},
+ shadowOpacity: 0.5,
+ shadowRadius: 0.5
+ },
+ android: {
+ elevation: 1
+ }
+ })
+ },
+ wrapper: {
+ backgroundColor: 'transparent'
+ },
+ pricingTitle: {
+ textAlign: 'center',
+ color: colors.primary,
+ fontSize: 30,
+ ...Platform.select({
+ ios: {
+ fontFamily: fonts.ios.black
+ },
+ android: {
+ fontFamily: fonts.android.black
+ }
+ })
+ },
+ pricingPrice: {
+ textAlign: 'center',
+ marginTop: 10,
+ marginBottom: 10,
+ fontSize: 40,
+ ...Platform.select({
+ ios: {
+ fontFamily: fonts.ios.bold
+ },
+ android: {
+ fontFamily: fonts.android.bold
+ }
+ })
+ },
+ pricingInfo: {
+ textAlign: 'center',
+ marginTop: 5,
+ marginBottom: 5,
+ color: colors.grey3,
+ ...Platform.select({
+ ios: {
+ fontFamily: fonts.ios.bold
+ },
+ android: {
+ fontFamily: fonts.android.bold
+ }
+ })
+ },
+ button: {
+ marginTop: 15,
+ marginBottom: 10
+ }
+})
+
+export default PricingCard
diff --git a/src/social/SocialIcon.js b/src/social/SocialIcon.js
new file mode 100644
index 0000000000..8f585d0b7b
--- /dev/null
+++ b/src/social/SocialIcon.js
@@ -0,0 +1,101 @@
+import React, { PropTypes } from 'react'
+import { View, StyleSheet, Platform, TouchableHighlight } from 'react-native'
+import Icon from 'react-native-vector-icons/FontAwesome'
+import Text from '../text/Text'
+import fonts from '../config/fonts'
+let styles
+
+const colors = {
+ facebook: '#3b5998',
+ twitter: '#00aced',
+ ['google-plus-official']: '#dd4b39',
+ pinterest: '#cb2027',
+ linkedin: '#007bb6',
+ youtube: '#bb0000',
+ vimeo: '#aad450',
+ tumblr: '#32506d',
+ instagram: '#517fa4',
+ quora: '#a82400',
+ foursquare: '#0072b1',
+ wordpress: '#21759b',
+ stumbleupon: '#EB4823'
+}
+
+const onTouch = () => console.log('please attach a click handler...')
+
+const SocialIcon = ({component, type, button, onPress, iconStyle, style, iconColor, title}) => {
+ const onClick = onPress || onTouch
+ const Component = component || TouchableHighlight
+ return (
+
+
+
+ {
+ button && title && (
+ {title}
+ )
+ }
+
+
+ )
+}
+
+SocialIcon.propTypes = {
+ component: PropTypes.element,
+ type: PropTypes.string,
+ button: PropTypes.bool,
+ onPress: PropTypes.func,
+ iconStyle: PropTypes.any,
+ style: PropTypes.any,
+ iconColor: PropTypes.string,
+ title: PropTypes.string
+}
+
+styles = StyleSheet.create({
+ container: {
+ margin: 7,
+ padding: 15,
+ borderRadius: 30,
+ ...Platform.select({
+ ios: {
+ shadowColor: 'rgba(0,0,0, .4)',
+ shadowOffset: {height: 1, width: 1},
+ shadowOpacity: 1,
+ shadowRadius: 1
+ },
+ android: {
+ elevation: 2
+ }
+ })
+ },
+ wrapper: {
+ flexDirection: 'row',
+ justifyContent: 'center',
+ alignItems: 'center',
+ },
+ title: {
+ color: 'white',
+ marginLeft: 15,
+ ...Platform.select({
+ ios: {
+ fontFamily: fonts.ios.black,
+ },
+ android: {
+ fontFamily: fonts.android.black
+ }
+ })
+ },
+ icon: {
+ height: 52,
+ width: 52,
+ }
+})
+
+export default SocialIcon
diff --git a/src/text/Text.js b/src/text/Text.js
new file mode 100644
index 0000000000..4cd9be2ec0
--- /dev/null
+++ b/src/text/Text.js
@@ -0,0 +1,46 @@
+import React from 'react'
+import { Text, StyleSheet, Platform } from 'react-native'
+import fonts from '../config/fonts'
+
+let styles = {}
+
+const TextElement = ({style, children, h1, h2, h3, h4}) => (
+ {children}
+)
+
+styles = StyleSheet.create({
+ text: {
+ ...Platform.select({
+ ios: {
+ fontFamily: fonts.ios.regular
+ },
+ android: {
+ fontFamily: fonts.android.regular
+ }
+ })
+ },
+ bold: {
+ ...Platform.select({
+ ios: {
+ fontFamily: fonts.ios.bold
+ },
+ android: {
+ fontFamily: fonts.android.bold
+ }
+ })
+ }
+})
+
+export default TextElement