Initial commit

package.json

+{
+  "name": "react-native-bucks",
+  "version": "1.0.0",
+  "description": "React Native Bucks & UI Toolkit",
+  "main": "src/index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/azertys/bucks-react.git"
+  },
+  "keywords": [
+    "react-native",
+    "reactjs",
+    "reactnative",
+    "bootstrap"
+  ],
+  "scripts": {
+    "build": "rm -rf build; webpack"
+  },
+  "author": "EpicPxls",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/azertys/bucks-react/issues"
+  },
+  "rnpm": {
+    "assets": [
+      "./src/fonts/"
+    ]
+  },
+  "homepage": "https://github.com/azertys/bucks-react#readme",
+  "dependencies": {
+    "immutable": "^3.8.2",
+    "node": "^8.10.0",
+    "prop-types": "^15.6.0",
+    "react": "16.3.1",
+    "react-native": "https://github.com/expo/react-native/archive/sdk-27.0.0.tar.gz",
+    "react-native-side-menu": "^1.0.2",
+    "react-native-tab-navigator": "^0.3.4",
+    "react-native-pathjs-charts": "https://github.com/EpicCoders/react-native-pathjs-charts",
+    "react-native-vector-icons": "^4.6.0"
+  },
+  "peerDependencies": {},
+  "devDependencies": {}
+}

src/buttons/Button.js

+import PropTypes from 'prop-types';
+import React from 'react';
+import {
+  TouchableNativeFeedback,
+  TouchableHighlight,
+  StyleSheet,
+  View,
+  Platform,
+  Text as NativeText,
+} from 'react-native';
+import Icon from '../icons/Icon';
+import colors from '../config/colors';
+import Text from '../text/Text';
+import normalize from '../helpers/normalizeText';
+import ViewPropTypes from '../config/ViewPropTypes';
+
+const log = () =>
+{
+  console.log('please attach method to this component'); //eslint-disable-line no-console
+};
+
+const Button = props =>
+{
+  const {
+    disabled,
+    title,
+    buttonStyle,
+    borderRadius,
+    onPress,
+    secondary,
+    secondary2,
+    secondary3,
+    iconLeft,
+    color,
+    fontSize,
+    underlayColor,
+    raised,
+    textStyle,
+    containerViewStyle,
+    ...attributes
+  } = props;
+  let {Component} = props;
+
+  if (!Component && Platform.OS === 'ios')
+  {
+    Component = TouchableHighlight;
+  }
+  if (!Component && Platform.OS === 'android')
+  {
+    Component = TouchableNativeFeedback;
+  }
+  if (!Component)
+  {
+    Component = TouchableHighlight;
+  }
+
+  if (Platform.OS === 'android' && (borderRadius && !attributes.background))
+  {
+    attributes.background = TouchableNativeFeedback.Ripple(
+      'ThemeAttrAndroid',
+      true
+    );
+  }
+
+  let buttonTitle = <Text
+    style={[
+      styles.text,
+      color && {color},
+      fontSize && {fontSize},
+      textStyle && textStyle,
+      secondary && {color: colors.grey0},
+      secondary3 && {color: colors.blue},
+    ]}
+  >
+    {title}
+  </Text>;
+
+  if (typeof title === 'object') {
+    buttonTitle = <View
+      style={[
+        color && {color},
+        secondary && {color: colors.grey0},
+        secondary3 && {color: colors.blue},
+      ]}
+    >
+      {title}
+    </View>
+  }
+
+  return (
+    <View
+      style={[styles.container, raised && styles.raised, containerViewStyle]}
+    >
+      <Component
+        underlayColor={underlayColor || 'transparent'}
+        onPress={onPress || log}
+        disabled={disabled || false}
+        {...attributes}
+      >
+        <View
+          style={[
+            styles.button,
+            secondary && {backgroundColor: colors.secondary},
+            secondary2 && {backgroundColor: colors.secondary2},
+            secondary3 && {backgroundColor: colors.secondary3, borderColor: colors.blue, borderWidth: 2},
+            buttonStyle && buttonStyle,
+          ]}
+        >
+          {iconLeft ?
+            <Icon style={styles.iconLeft}
+              {...iconLeft}
+            />
+            : null
+          }
+          {buttonTitle}
+        </View>
+      </Component>
+    </View>
+  );
+};
+
+Button.propTypes = {
+  buttonStyle: ViewPropTypes.style,
+  title: PropTypes.any,
+  onPress: PropTypes.any,
+  icon: PropTypes.object,
+  iconComponent: PropTypes.any,
+  secondary: PropTypes.bool,
+  secondary2: PropTypes.bool,
+  secondary3: PropTypes.bool,
+  primary1: PropTypes.bool,
+  primary2: PropTypes.bool,
+  backgroundColor: PropTypes.string,
+  color: PropTypes.string,
+  fontSize: PropTypes.any,
+  underlayColor: PropTypes.string,
+  raised: PropTypes.bool,
+  textStyle: NativeText.propTypes.style,
+  disabled: PropTypes.bool,
+  loading: PropTypes.bool,
+  activityIndicatorStyle: ViewPropTypes.style,
+  loadingRight: PropTypes.bool,
+  Component: PropTypes.any,
+  borderRadius: PropTypes.number,
+  large: PropTypes.bool,
+  iconRight: PropTypes.bool,
+  iconLeft: PropTypes.object,
+  fontWeight: PropTypes.string,
+  disabledStyle: ViewPropTypes.style,
+  fontFamily: PropTypes.string,
+  containerViewStyle: ViewPropTypes.style,
+  rounded: PropTypes.bool,
+  outline: PropTypes.bool,
+  transparent: PropTypes.bool,
+  allowFontScaling: PropTypes.bool,
+  textNumberOfLines: PropTypes.number,
+  textEllipsizeMode: PropTypes.string,
+};
+
+const stylesObject = {
+  container: {
+    backgroundColor: 'transparent',
+    marginLeft: 15,
+    marginRight: 15,
+  },
+  button: {
+    padding: 5,
+    borderRadius: 33,
+    backgroundColor: colors.bgColor,
+    justifyContent: 'center',
+    alignItems: 'center',
+    flexDirection: 'row',
+  },
+  text: {
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: normalize(12),
+  },
+  iconLeft: {
+    width: 18,
+  },
+};
+
+const styles = StyleSheet.create(stylesObject);
+
+export default Button;

src/calendar/CalendarItem.js

+import PropTypes from 'prop-types';
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+  Platform,
+  TouchableHighlight,
+  Text as NativeText,
+} from 'react-native';
+import colors from '../config/colors';
+import Text from '../text/Text';
+import fonts from '../config/fonts';
+import normalize from '../helpers/normalizeText';
+import ViewPropTypes from '../config/ViewPropTypes';
+import { Calendar, CalendarList, Agenda } from 'react-native-calendars';
+
+const CalendarItem = props => {
+  const {
+    flexDirection,
+    containerStyle,
+    ...attributes
+  } = props;
+
+  let calendarTheme = {
+    arrowColor: 'white',
+      'stylesheet.calendar.header': {
+      week: {
+        marginTop: 5,
+          flexDirection: 'row',
+          justifyContent: 'space-between'
+      }
+    }
+  };
+
+  return (
+    <Agenda
+      // the list of items that have to be displayed in agenda. If you want to render item as empty date
+      // the value of date key kas to be an empty array []. If there exists no value for date key it is
+      // considered that the date in question is not yet loaded
+      items={
+        {'2012-05-22': [{text: 'item 1 - any js object'}],
+          '2012-05-23': [{text: 'item 2 - any js object'}],
+          '2012-05-24': [],
+          '2012-05-25': [{text: 'item 3 - any js object'},{text: 'any js object'}],
+        }}
+      // callback that gets called when items for a certain month should be loaded (month became visible)
+      loadItemsForMonth={(month) => {console.log('trigger items loading')}}
+      // callback that gets called on day press
+      onDayPress={(day)=>{console.log('day pressed')}}
+      // callback that gets called when day changes while scrolling agenda list
+      onDayChange={(day)=>{console.log('day changed')}}
+      // initially selected day
+      selected={'2012-05-22'}
+      // Minimum date that can be selected, dates before minDate will be grayed out. Default = undefined
+      minDate={'2012-05-10'}
+      // Maximum date that can be selected, dates after maxDate will be grayed out. Default = undefined
+      maxDate={'2012-05-30'}
+      // Max amount of months allowed to scroll to the past. Default = 50
+      pastScrollRange={50}
+      // Max amount of months allowed to scroll to the future. Default = 50
+      futureScrollRange={50}
+      // specify how each item should be rendered in agenda
+      renderItem={(item, firstItemInDay) => {return (<View />);}}
+      // specify how each date should be rendered. day can be undefined if the item is not first in that day.
+      renderDay={(day, item) => {return (<View />);}}
+      // specify how empty date content with no items should be rendered
+      renderEmptyDate={() => {return (<View />);}}
+      // specify how agenda knob should look like
+      renderKnob={() => {return (<View />);}}
+      // specify your item comparison function for increased performance
+      rowHasChanged={(r1, r2) => {return r1.text !== r2.text}}
+      // Hide knob button. Default = false
+      hideKnob={true}
+      // By default, agenda dates are marked if they have at least one item, but you can override this if needed
+      markedDates={{
+        '2012-05-16': {selected: true, marked: true},
+        '2012-05-17': {marked: true},
+        '2012-05-18': {disabled: true}
+      }}
+      // agenda theme
+      theme={{
+        ...calendarTheme,
+        agendaDayTextColor: 'yellow',
+        agendaDayNumColor: 'green',
+        agendaTodayColor: 'red',
+        agendaKnobColor: 'blue'
+      }}
+      // agenda container style
+      style={{}}
+    />
+  );
+};
+
+CalendarItem.propTypes = {
+  flexDirection: PropTypes.string,
+  containerStyle: ViewPropTypes.style,
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'white',
+    padding: 16,
+    margin: 15,
+    paddingTop: 26,
+    marginBottom: 0,
+    marginTop: 19,
+    borderRadius: 8,
+    flexDirection: 'column',
+  },
+  calendar: {
+    borderTopWidth: 1,
+    paddingTop: 5,
+    borderBottomWidth: 1,
+    borderColor: '#eee',
+    height: 350
+  },
+});
+
+export default CalendarItem;

src/card/Card.js

+import PropTypes from 'prop-types';
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+  Platform,
+  Image,
+  TouchableHighlight,
+  Text as NativeText,
+} from 'react-native';
+import colors from '../config/colors';
+import Icon from '../icons/Icon';
+import Text from '../text/Text';
+import fonts from '../config/fonts';
+import normalize from '../helpers/normalizeText';
+import ViewPropTypes from '../config/ViewPropTypes';
+
+const TYPES = {
+  mastercard: {
+    source: require('../images/mastercard.png'),
+  },
+  paypal: {
+    source: require('../images/paypal.png'),
+  },
+  visa: {
+    source: require('../images/visa.png'),
+  },
+};
+
+const Card = props => {
+  const {
+    flexDirection,
+    containerStyle,
+    wrapperStyle,
+    title,
+    subTitle,
+    subTitleStyle,
+    type,
+    color,
+    number,
+    expiration,
+    titleStyle,
+    ...attributes
+  } = props;
+
+  let cardColor = color ? color : colors.blue;
+
+  return (
+    <View
+      style={[
+        styles.container,
+        containerStyle && containerStyle,
+      ]}
+      {...attributes}
+    >
+      {expiration ? <View
+        style={[
+          styles.cardColorBlock,
+          {backgroundColor: cardColor},
+        ]} 
+      >
+      </View> : null}
+      <View
+        style={[
+          styles.wrapper,
+          wrapperStyle && wrapperStyle,
+          flexDirection && { flexDirection },
+        ]}
+      >
+        <View
+          style={[
+            styles.topContainer
+          ]}
+        >
+          <View
+            style={[
+              styles.titleSubtitleContainer
+            ]}
+          >
+            {title !== null &&
+            <View>
+              <Text
+                style={[
+                  styles.cardTitle,
+                  titleStyle && titleStyle,
+                ]}
+              >
+                {title}
+              </Text>
+            </View>}
+            {subTitle !== null &&
+            <View>
+              <Text
+                style={[
+                  styles.cardSubTitle,
+                  subTitleStyle && subTitleStyle,
+                ]}
+              >
+                {subTitle}
+              </Text>
+            </View>}
+          </View>
+          <View>
+            <Image
+              style={styles.typeImage}
+              resizeMode="contain"
+              source={TYPES[type].source}
+            />
+          </View>
+        </View>
+        <View
+          style={[
+            styles.numberContainer
+          ]}
+        >
+          <Text
+            style={[
+              styles.numberAsterix
+            ]}
+          >
+            **** **** ****
+          </Text>
+          <Text
+            style={[
+              styles.number
+            ]}
+          >
+            {number}
+          </Text>
+        </View>
+          {expiration ? 
+            <View style={[
+              styles.bottomContainer]}>
+            <View>
+            <Text>
+              {expiration}
+            </Text>
+          </View>
+          <View>
+            <TouchableHighlight>
+              <View
+                style={[
+                  styles.moreButton
+                ]}
+              >
+                <Text
+                  style={[
+                    styles.moreText
+                  ]}
+                >
+                  More
+                </Text>
+                <Icon
+                  color={colors.link}
+                  name='chevron-right'
+                  size={13}
+                />
+              </View>
+            </TouchableHighlight>
+          </View>
+        </View> : null}
+      </View>
+    </View>
+  );
+};
+
+Card.defaultProps = {
+  // underlayColor: 'white',
+  // leftIconUnderlayColor: 'white',
+  // chevronColor: colors.grey4,
+  // rightIcon: { name: 'chevron-right' },
+  // hideChevron: true,
+  // roundAvatar: false,
+  // switchButton: false,
+  // textInputEditable: true,
+  // titleNumberOfLines: 1,
+  // subtitleNumberOfLines: 1,
+  // rightTitleNumberOfLines: 1,
+};
+
+
+Card.propTypes = {
+  flexDirection: PropTypes.string,
+  containerStyle: ViewPropTypes.style,
+  wrapperStyle: ViewPropTypes.style,
+  overlayStyle: ViewPropTypes.style,
+  title: PropTypes.string,
+  titleStyle: NativeText.propTypes.style,
+  subTitle: PropTypes.string,
+  subTitleStyle: NativeText.propTypes.style,
+  type: PropTypes.oneOf([
+    'mastercard',
+    'visa',
+    'paypal'
+  ]),
+  number: PropTypes.string,
+  expiration: PropTypes.string,
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'white',
+    padding: 16,
+    margin: 15,
+    paddingTop: 26,
+    marginBottom: 0,
+    marginTop: 19,
+    borderRadius: 8,
+    flexDirection: 'row',
+    ...Platform.select({
+      ios: {
+        shadowColor: 'rgba(0, 0, 0, 0.04)',
+        shadowOffset: { height: 10, width: 0 },
+        shadowOpacity: 1,
+        shadowRadius: 14,
+      },
+      android: {
+        elevation: 1,
+      },
+    }),
+  },
+  wrapper: {
+    backgroundColor: 'transparent',
+    marginLeft: 10,
+    flexDirection: 'column',
+    flex: 1,
+    marginBottom: 5,
+  },
+  topContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    paddingTop: 0,
+  },
+  titleSubtitleContainer: {
+    flex: 1,
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+  },
+  bottomContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: 22,
+  },
+  cardColorBlock: {
+    height: 26,
+    width: 26,
+    borderRadius: 4,
+    backgroundColor: colors.blue,
+  },
+  typeImage: {
+    alignItems: 'flex-end',
+    justifyContent: 'center',
+    flex: 0.15,
+    width: 60,
+    height: 30,
+  },
+  cardTitle: {
+    fontSize: normalize(18),
+    textAlign: 'left',
+    marginBottom: 5,
+    color: colors.black,
+    letterSpacing: 1.3,
+  },
+  cardSubTitle: {
+    flex: 1,
+    color: colors.grey0,
+    fontSize: normalize(10),
+    opacity: 0.7,
+    ...Platform.select({
+      ios: {
+        fontWeight: 'normal',
+      },
+      android: {
+        ...fonts.android.normal,
+      },
+    }),
+  },
+  numberContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginTop: 20,
+  },
+  numberAsterix: {
+    fontSize: normalize(25),
+    color: colors.grey0,
+    opacity: 0.7,
+    letterSpacing: 2,
+    lineHeight: 0.1,
+    marginTop: 17,
+  },
+  number: {
+    fontSize: normalize(26),
+    color: colors.grey0,
+    marginTop: 4,
+    fontFamily: 'Ayuthaya',
+  },
+  moreButton: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginRight: 10,
+  },
+  moreText: {
+    color: colors.link,
+    fontSize: normalize(11),
+    marginRight: 10,
+  },
+  overlayContainer: {
+    flex: 1,
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.2)',
+    alignSelf: 'stretch',
+    justifyContent: 'center',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+});
+
+export default Card;

src/charts/GainLine.js

+'use strict';
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+} from 'react-native';
+import { Text, Circle } from 'react-native-svg';
+import { SmoothLine } from 'react-native-pathjs-charts';
+
+const GainLine = props => {
+  const {
+    data,
+    options,
+    ...attributes
+  } = props;
+  let baseOptions = {
+    animate: {
+      type: 'delayed',
+      duration: 200
+    },
+    axisX: {
+      showAxis: true,
+      showLines: true,
+      showLabels: false,
+      showTicks: false,
+      zeroAxis: false,
+      orient: 'bottom',
+      label: {
+        fontFamily: 'Arial',
+        fontSize: 14,
+        fontWeight: true,
+        fill: 'transparent'
+      }
+    },
+    axisY: {
+      showAxis: true,
+      showLines: false,
+      showLabels: false,
+      showTicks: false,
+      zeroAxis: false,
+      orient: 'left',
+      label: {
+        fontFamily: 'Arial',
+        fontSize: 14,
+        fontWeight: true,
+        fill: 'transparent'
+      }
+    },
+    showAreas: true,
+    showPoints: true,
+    renderPoint: (graphIndex, pointIndex) => [
+      <Text
+        key="valueLegend"
+        fontFamily="Arial"
+        fontSize={14}
+        fontWeight="normal"
+        fill="transparent"
+        textAnchor="middle"
+        x={0}
+        y={20}
+      >
+        {data[graphIndex][pointIndex].y}
+      </Text>,
+      <Circle key="light" fill='#FFFFFF' cx={0} cy={0} r={7} fillOpacity={1} />,
+      <Circle key="full" fill='#1566DF' cx={0} cy={0} r={5} fillOpacity={1} />,
+    ]
+  };
+  return (
+    <SmoothLine data={data} options={{...baseOptions, ...options}} xKey='x' yKey='y' />
+  );
+};
+
+GainLine.propTypes = {
+  options: PropTypes.any,
+  data: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f7f7f7',
+  },
+});
+
+export default GainLine;
\ No newline at end of file

src/checkbox/Checkbox.js

+import PropTypes from 'prop-types';
+import React from 'react';
+import {
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  Platform,
+  Text as NativeText,
+} from 'react-native';
+import TextElement from '../text/Text';
+import fonts from '../config/fonts';
+import colors from '../config/colors';
+import ViewPropTypes from '../config/ViewPropTypes';
+import Icon from '../icons/Icon';
+
+const CheckBox = props => {
+  const {
+    component,
+    checked,
+    iconRight,
+    title,
+    center,
+    right,
+    containerStyle,
+    textStyle,
+    onPress,
+    onLongPress,
+    onIconPress,
+    onLongIconPress,
+    size,
+    checkedIcon,
+    uncheckedIcon,
+    checkedColor,
+    uncheckedColor,
+    checkedTitle,
+    fontFamily,
+    ...attributes
+  } = props;
+
+  const Component = component || TouchableOpacity;
+  let iconName = uncheckedIcon;
+  if (checked) {
+    iconName = checkedIcon;
+  }
+  return (
+      <Component
+          onLongPress={onLongPress}
+          onPress={onPress}
+          style={[styles.container, containerStyle && containerStyle]}
+          {...attributes}
+      >
+        <View
+            style={[
+              styles.wrapper,
+              right && { justifyContent: 'flex-end' },
+              center && { justifyContent: 'center' },
+            ]}
+        >
+          {!iconRight &&
+          <Icon
+              color={checked ? checkedColor : uncheckedColor}
+              name={iconName}
+              size={size || 24}
+              onLongPress={onLongIconPress}
+              onPress={onIconPress}
+          />}
+
+          {React.isValidElement(title)
+              ? title
+              : <TextElement
+                  style={[
+                    styles.text,
+                    textStyle && textStyle,
+                    fontFamily && { fontFamily },
+                  ]}
+              >
+                {checked ? checkedTitle || title : title}
+              </TextElement>}
+
+          {iconRight &&
+          <Icon
+              color={checked ? checkedColor : uncheckedColor}
+              name={iconName}
+              size={size || 24}
+              onLongPress={onLongIconPress}
+              onPress={onIconPress}
+          />}
+        </View>
+      </Component>
+  );
+};
+
+CheckBox.defaultProps = {
+  checked: false,
+  iconRight: false,
+  right: false,
+  center: false,
+  checkedColor: 'green',
+  uncheckedColor: '#bfbfbf',
+  checkedIcon: 'check-square-o',
+  uncheckedIcon: 'square-o',
+  size: 24,
+};
+
+CheckBox.propTypes = {
+  component: PropTypes.any,
+  checked: PropTypes.bool,
+  iconRight: PropTypes.bool,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  center: PropTypes.bool,
+  right: PropTypes.bool,
+  containerStyle: ViewPropTypes.style,
+  textStyle: NativeText.propTypes.style,
+  onPress: PropTypes.func,
+  onLongPress: PropTypes.func,
+  checkedIcon: PropTypes.string,
+  uncheckedIcon: PropTypes.string,
+  iconType: PropTypes.string,
+  size: PropTypes.number,
+  checkedColor: PropTypes.string,
+  uncheckedColor: PropTypes.string,
+  checkedTitle: PropTypes.string,
+  onIconPress: PropTypes.func,
+  onLongIconPress: PropTypes.func,
+  fontFamily: PropTypes.string,
+};
+
+const styles = StyleSheet.create({
+  wrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  container: {
+    margin: 5,
+    marginLeft: 10,
+    marginRight: 10,
+    backgroundColor: '#fafafa',
+    borderColor: '#ededed',
+    borderWidth: 1,
+    padding: 10,
+    borderRadius: 3,
+  },
+  text: {
+    marginLeft: 10,
+    marginRight: 10,
+    color: colors.grey1,
+    ...Platform.select({
+      ios: {
+        fontWeight: 'bold',
+      },
+      android: {
+        ...fonts.android.bold,
+      },
+    }),
+  },
+});
+
+export default CheckBox;

src/config/BackgroundImage.js

+import { Image, ImageBackground } from 'react-native';
+
+const BackgroundImage = ImageBackground || Image;
+
+export default BackgroundImage;

src/config/ViewPropTypes.js

+import { View, ViewPropTypes as RNViewPropTypes } from 'react-native';
+
+const ViewPropTypes = RNViewPropTypes || View.propTypes;
+
+export default ViewPropTypes;

src/config/colors.js

+export default {
+  primary: '#2F80F6',
+  // primary1: '#4d86f7',
+  primary2: '#6296f9',
+  secondary: '#DEE9F7',
+  secondary2: '#515F71',
+  link: '#136EF1',
+  danger: '#FE4F68',
+  bgColor: '#78AEF9',
+  // secondary3: '#2F80F6',
+
+  grey0: '#3E4A59',
+  // grey1: '#43484d',
+  // grey2: '#5e6977',
+  grey3: '#86939e',
+  // grey4: '#bdc6cf',
+  // grey5: '#e1e8ee',
+  // dkGreyBg: '#232323',
+  // greyOutline: '#bbb',
+  // searchBg: '#303337',
+  // disabled: '#dadee0',
+  white: '#ffffff',
+  border: '#E9EFF7',
+  black: '#24272B',
+
+  pink: '#FE4E56',
+  yellow: '#FFBA12',
+  green: '#09C04C',
+  blue: '#4189FF',
+  purple: '#7153FF',
+  lightBlue: '#4189FF',
+  turquoise: '#00DDCB',
+
+  tabDefault: '#B3BFD0',
+  tabSelected: '#2F80F6',
+  tabTextDefault: '#4B5461',
+  tabTextSelected: '#136EF1',
+
+  sliderLeft: '#2F80F6',
+  sliderRight: '#D3DFEF'
+};
\ No newline at end of file

src/config/fonts.js

+export default {
+  ios: {
+    regular: {
+      fontFamily: 'PingFangHK-Regular, sans-serif',
+    },
+    medium: {
+      fontFamily: 'PingFangHK-Medium',
+    },
+    extraBoldRegular: {
+      fontFamily: 'Abadi MT Condensed Extra Bold Regular'
+    },
+    /* We are only allowed to use these in iOS */
+    SFMedium: {
+      fontFamily: 'SFUIText-Medium'
+    },
+    SFRegular: {
+      fontFamily: 'SFUIText-Regular'
+    },
+    SFSemibold: {
+      fontFamily: 'SFUIText-Semibold'
+    },
+    Ayuthaya: {
+      fontFamily: 'Ayuthaya'
+    }
+  },
+  android: {
+    regular: {
+      fontFamily: 'sans-serif',
+    },
+    medium: {
+      fontFamily: 'sans-serif-medium',
+    },
+    light: {
+      fontFamily: 'sans-serif-light',
+    },
+    condensed: {
+      fontFamily: 'sans-serif-condensed',
+    },
+    condensed_light: {
+      fontFamily: 'sans-serif-condensed',
+      fontWeight: 'light',
+    },
+    black: {
+      // note(brentvatne): sans-serif-black is only supported on Android 5+,
+      // we can detect that here and use it in that case at some point.
+      fontFamily: 'sans-serif',
+      fontWeight: 'bold',
+    },
+    thin: {
+      fontFamily: 'sans-serif-thin',
+    },
+    bold: {
+      fontFamily: 'sans-serif',
+      fontWeight: 'bold',
+    },
+  },
+};

src/divider/Divider.js

+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import colors from '../config/colors';
+import ViewPropTypes from '../config/ViewPropTypes';
+
+let styles = {};
+
+const Divider = ({ style }) =>
+  <View style={[styles.container, style && style]} />;
+
+Divider.propTypes = {
+  style: ViewPropTypes.style,
+};
+
+styles = StyleSheet.create({
+  container: {
+    height: 1,
+    backgroundColor: colors.grey5,
+  },
+});
+
+export default Divider;

src/form/FormInput.js

+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import {
+  Animated,
+  Easing,
+  TextInput,
+  StyleSheet,
+  Platform,
+  Dimensions,
+  Text as NativeText,
+} from 'react-native';
+import colors from '../config/colors';
+import normalize from '../helpers/normalizeText';
+import ViewPropTypes from '../config/ViewPropTypes';
+
+const { width } = Dimensions.get('window');
+
+class FormInput extends Component {
+  constructor(props) {
+    super(props);
+    this.shake = this.shake.bind(this);
+  }
+
+  componentWillMount() {
+    this.shakeAnimationValue = new Animated.Value(0);
+    this.props.shake && this.shake();
+  }
+
+  componentWillReceiveProps(nextProps) {
+    nextProps.shake && this.props.shake !== nextProps.shake && this.shake();
+  }
+
+  getRef = () => {
+    return this.input || this.refs[this.props.textInputRef];
+  };
+
+  getRefHandler = () => {
+    if (this.props.textInputRef) {
+      if (typeof this.props.textInputRef === 'function') {
+        return input => {
+          this.input = input;
+          this.props.textInputRef(input);
+        };
+      } else {
+        return this.props.textInputRef;
+      }
+    } else {
+      return input => (this.input = input);
+    }
+  };
+
+  focus() {
+    this.getRef() && this.getRef().focus();
+  }
+
+  blur() {
+    this.getRef() && this.getRef().blur();
+  }
+
+  clearText() {
+    this.getRef() && this.getRef().clear();
+  }
+
+  shake() {
+    const { shakeAnimationValue } = this;
+    shakeAnimationValue.setValue(0);
+    Animated.timing(shakeAnimationValue, {
+      duration: 375,
+      toValue: 3,
+      ease: Easing.bounce,
+    }).start();
+  }
+
+  render() {
+    const {
+      onSuccess,
+      search,
+      containerStyle,
+      inputStyle,
+      containerRef,
+      selectionColor,
+      placeholder,
+      normalizeFontSize,
+      ...attributes
+    } = this.props;
+
+    if(onSuccess){
+      containerStyle.borderColor= 'transparent';
+    }
+
+    if (search) {
+      inputStyle.color= '#D3DFEF';
+      containerStyle.borderColor= 'transparent';
+    }
+    
+    const translateX = this.shakeAnimationValue.interpolate({
+      inputRange: [0, 0.5, 1, 1.5, 2, 2.5, 3],
+      outputRange: [0, -15, 0, 15, 0, -15, 0],
+    });
+    return (
+      <Animated.View
+        ref={containerRef}
+        style={[
+          styles.container,
+          containerStyle && containerStyle,
+          {
+            transform: [{ translateX }],
+          },
+        ]}
+      >
+        <TextInput
+          ref={this.getRefHandler()}
+          placeholder={placeholder}
+          placeholderTextColor='#CED4DA'
+          selectionColor={selectionColor || colors.grey3}
+          style={[
+            styles.input,
+            { fontSize: normalizeFontSize ? normalize(14) : 14 },
+            inputStyle && inputStyle,
+          ]}
+          {...attributes}
+        />
+      </Animated.View>
+    );
+  }
+}
+
+FormInput.propTypes = {
+  containerStyle: ViewPropTypes.style,
+  inputStyle: NativeText.propTypes.style,
+  selectionColor: PropTypes.string,
+  // Deprecated
+  textInputRef: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  // Deprecated
+  containerRef: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  normalizeFontSize: PropTypes.bool,
+  shake: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.bool,
+    PropTypes.object,
+    PropTypes.number,
+    PropTypes.array,
+  ]),
+};
+
+FormInput.defaultProps = {
+  normalizeFontSize: true,
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginLeft: 15,
+    marginRight: 15,
+    borderColor: '#CED4DA',
+    ...Platform.select({
+      ios: {
+        borderBottomColor: colors.grey4,
+        borderBottomWidth: 1,
+        marginLeft: 20,
+        marginRight: 20,
+      },
+    }),
+  },
+  input: {
+    ...Platform.select({
+      android: {
+        minHeight: 46,
+        width: width - 30,
+      },
+      ios: {
+        minHeight: 36,
+        width: width,
+      },
+    }),
+    // breaks tests - fix before release
+    // Invariant Violation: Invalid undefined `width` of type `string`
+    // supplied to `StyleSheet input`, expected `number`.
+    // width: '100%',
+    color: colors.grey3,
+  },
+});
+
+export default FormInput;
\ No newline at end of file

src/form/FormLabel.js

+import PropTypes from 'prop-types';
+import React from 'react';
+import { StyleSheet, View, Platform, Text as NativeText } from 'react-native';
+import fonts from '../config/fonts';
+import Text from '../text/Text';
+import ViewPropTypes from '../config/ViewPropTypes';
+
+const FormLabel = props => {
+  const {
+    containerStyle,
+    labelStyle,
+    error,
+    children,
+    fontFamily,
+    ...attributes
+  } = props; 
+  if(error){
+    labelStyle.color= '#FE4F68';
+  } else {
+    labelStyle.color= '#3E4A59';
+  }
+ 
+  return (
+    <View
+      style={[styles.container, containerStyle && containerStyle]}
+      {...attributes}
+    >
+      <Text
+        style={[
+          styles.label,
+          labelStyle && labelStyle,
+          fontFamily && { fontFamily },
+        ]}
+      >
+        {children}
+      </Text>
+    </View>
+  );
+};
+
+FormLabel.defaultProps = {
+  error: false,
+};
+
+FormLabel.propTypes = {
+  containerStyle: ViewPropTypes.style,
+  labelStyle: NativeText.propTypes.style,
+  children: PropTypes.any,
+  error: PropTypes.bool,
+  fontFamily: PropTypes.string,
+};
+
+const styles = StyleSheet.create({
+  container: {},
+  label: {
+    marginLeft: 20,
+    marginRight: 20,
+    marginTop: 15,
+    marginBottom: 1,
+    color: '#8D959D',
+    fontSize: 10,
+    opacity: 0.9,
+    ...Platform.select({
+      ios: {
+        fontWeight: 'bold',
+      },
+      android: {
+        ...fonts.android.bold,
+      },
+    }),
+  },
+});
+
+export default FormLabel;
\ No newline at end of file

src/form/FormLogin.js

+import React from 'react';
+import FormInput from '../form/FormInput';
+import PropTypes from 'prop-types';
+import FormLabel from '../form/FormLabel';
+import colors from '../config/colors';
+import Icon from '../icons/Icon';
+import { StyleSheet, View, } from 'react-native';
+
+const FormLogin = props => {
+  const {
+    success,
+    label,
+    icon,
+    placeholder,
+    iconName,
+    onSuccess,
+  } = props;
+
+  return (
+    <View>
+	    {
+	      onSuccess ? (
+	        <View>
+	          <FormLabel
+	            labelStyle={{}}>
+	            {label}
+	          </FormLabel>
+	          <FormInput
+	          	onSuccess={true}
+	          	containerStyle={{}} />
+	          <Icon
+	            color={colors.green}
+	            name='check-circle'
+	            size={18}
+	            style={styles.inputIcon}
+	          />
+	        </View>
+	      ) : <View>
+	            <FormLabel
+	            	labelStyle={{}}>
+	            	{label}
+	            </FormLabel>
+	            <FormInput
+	            placeholder={placeholder} />
+	          </View>
+	    }
+	  </View>
+  );
+};
+
+FormLogin.defaultProps = {
+  success: false,
+};
+
+FormLogin.propTypes = {
+  success: PropTypes.bool,
+  label: PropTypes.string,
+  icon : PropTypes.bool,
+  iconName: PropTypes.string,
+  onSuccess: PropTypes.bool,
+};
+
+const styles = StyleSheet.create({
+  inputIcon: {
+    position: 'absolute',
+    right: 10,
+    bottom: 0,
+    padding: 10
+  },
+});
+
+export default FormLogin;

src/form/FormRow.js

+import React from 'react';
+import FormInput from '../form/FormInput';
+import PropTypes from 'prop-types';
+import FormLabel from '../form/FormLabel';
+import colors from '../config/colors';
+import Icon from '../icons/Icon';
+import { StyleSheet, View} from 'react-native';
+
+const FormRow = props => {
+  const {
+    error,
+    label,
+    icon,
+    iconName,
+    hasError,
+  } = props; 
+ 
+  return (
+    <View>
+      {
+        hasError ? (
+          <View style={styles.errorInput}>
+            <FormLabel 
+              labelStyle={{}}
+              error={true} >
+              Please add the correct {label}
+            </FormLabel>
+            <FormInput />
+            <Icon
+              color={colors.danger}
+              name='question-circle'
+              size={20}
+              style={styles.inputIcon}
+            />
+          </View>
+        ) : <View>
+              <FormLabel 
+                labelStyle={{}}>
+                {label}
+              </FormLabel>
+              <FormInput />
+              {icon ? <Icon
+                  color={colors.link}
+                  name={iconName}
+                  size={20}
+                  style={styles.inputIcon}
+                /> : null}
+            </View>
+      }
+      </View>
+  );
+};
+
+FormRow.defaultProps = {
+  error: false,
+};
+
+FormRow.propTypes = {
+  error: PropTypes.bool,
+  label: PropTypes.string,
+  icon : PropTypes.bool,
+  iconName: PropTypes.string,
+  hasError: PropTypes.bool,
+};
+
+const styles = StyleSheet.create({
+  inputIcon: {
+    position: 'absolute',
+    right: 10,
+    bottom: 0,
+    padding: 10
+  },
+    errorInput: {
+    borderLeftWidth: 4,
+    borderColor: '#FE4F68',
+  },
+});
+
+export default FormRow;
\ No newline at end of file

src/form/FormSearch.js

+import React from 'react';
+import FormInput from '../form/FormInput';
+import PropTypes from 'prop-types';
+import Icon from '../icons/Icon';
+import ViewPropTypes from '../config/ViewPropTypes';
+import { StyleSheet, View} from 'react-native';
+
+const FormSearch = props => {
+  const {
+    error,
+    label,
+    icon,
+    search,
+    search2,
+    iconName,
+    iconSearch,
+    iconName2,
+    iconSearch2,
+    containersStyle,
+    hasError,
+  } = props; 
+
+if (search2) {
+  
+  containersStyle.backgroundColor= '#E9EFF7';
+}
+ 
+  return (
+    <View style={[styles.searchBar, containersStyle && containersStyle]}>
+    
+      <FormInput inputStyle={{}} containerStyle={{}} placeholder='Search' search={true} />
+        {search2 ? <Icon
+          color='#8795A8'
+          name={iconName}
+          size={20}
+          style={styles.inputIcon}
+        /> : <Icon
+          color='white'
+          name={iconName}
+          size={20}
+          style={styles.inputIcon}
+        />}
+
+        {search2 ? <Icon
+          color='#8795A8'
+          name={iconSearch}
+          size={20}
+          style={styles.inputSearch}
+        /> : <Icon
+          color='white'
+          name={iconSearch}
+          size={20}
+          style={styles.inputSearch}
+        />}
+    </View>
+    
+  );
+};
+
+FormSearch.defaultProps = {
+  error: false,
+  search2: false,
+};
+
+FormSearch.propTypes = {
+  containerStyle: ViewPropTypes.style,
+  error: PropTypes.bool,
+  label: PropTypes.string,
+  icon : PropTypes.bool,
+  iconName: PropTypes.string,
+  hasError: PropTypes.bool,
+};
+
+const styles = StyleSheet.create({
+  inputIcon: {
+    position: 'absolute',
+    right: 10,
+    bottom: 0,
+    padding: 10,
+  },
+  inputSearch: {
+    position: 'absolute',
+    left: 10,
+    bottom: 0,
+    padding: 10
+  },
+  inputIcon2: {
+    position: 'absolute',
+    right: 10,
+    bottom: 0,
+    padding: 10
+  },
+  inputSearch2: {
+    position: 'absolute',
+    left: 10,
+    bottom: 0,
+    padding: 10
+  },
+  searchBar: {
+    backgroundColor: '#1259C4',
+    paddingLeft: 30,
+    paddingRight: 30,
+    position: 'absolute',
+    top: 7,
+    borderRadius: 4,
+    width: 350,
+    height: 40,
+    paddingTop: 3
+  },
+});
+
+export default FormSearch;
\ No newline at end of file

src/headers/CategoriesHeader.js

+import React from 'react';
+import Button from '../buttons/Button'
+import Icon from '../icons/Icon';
+import FormLogin from '../form/FormLogin';
+import { StyleSheet, View, Text} from 'react-native';
+
+const CategoriesHeader = props => {
+  return (
+    <View>
+      <View style={styles.header}>
+        <FormLogin
+          label=''
+          placeholder='SEARCH'
+          />
+        <Icon
+          color='#fff'
+          name='search'
+          size={18}
+          style={styles.searchIcon}
+        />
+      </View>
+      <View style={styles.navButtons}>
+        <Button
+          buttonStyle={styles.button}
+          title={<View style={styles.buttonStyle}><Icon
+            color='#FFCC54'
+            name='home'
+            size={18}
+            style={styles.icon1}
+          /><Text style={styles.textSocial}>RENT</Text></View>}
+          />
+        <Button
+          buttonStyle={styles.button}
+          title={<View style={styles.buttonStyle}><Icon
+            color='#F65252'
+            name='shower'
+            size={18}
+            style={styles.icon2}
+          /><Text style={styles.textSocial}>UTILITIES</Text></View>}
+          />
+          <Button
+          buttonStyle={styles.button}
+          title={<View style={styles.buttonStyle}><Icon
+            color='#FF844D'
+            name='shield'
+            size={18}
+            style={styles.icon3}
+          /><Text style={styles.textSocial}>INSURANCE</Text></View>}
+          />
+        <Button
+          buttonStyle={styles.button}
+          title={<View style={styles.buttonStyle}><Icon
+            color='#78AEF9'
+            name='file-text-o'
+            size={18}
+            style={styles.icon4}
+          /><Text style={styles.textSocial}>BILL</Text></View>}
+          />
+          <Button
+          buttonStyle={styles.button}
+          title={<View style={styles.buttonStyle}><Icon
+            color='#C075C9'
+            name='desktop'
+            size={18}
+            style={styles.icon5}
+          /><Text style={styles.textSocial}>ELECTRONIC</Text></View>}
+          />
+        <Button
+          buttonStyle={styles.button}
+          title={<View style={styles.buttonStyle}><Icon
+            color='#50C1B6'
+            name='black-tie'
+            size={18}
+            style={styles.icon6}
+          /><Text style={styles.textSocial}>CLOTHING</Text></View>}
+          />
+          <Button
+          buttonStyle={styles.button}
+          title={<View style={styles.buttonStyle}><Icon
+            color='#73CC72'
+            name='mobile'
+            size={18}
+            style={styles.icon7}
+          /><Text style={styles.textSocial}>GADGET</Text></View>}
+          />
+          <Button
+          buttonStyle={styles.button}
+          title={<View style={styles.buttonStyle}><Icon
+            color='#F45D90'
+            name='usd'
+            size={18}
+            style={styles.icon8}
+          /><Text style={styles.textSocial}>SAVINGS</Text></View>}
+          />
+      </View>
+    </View>
+  );
+};
+
+
+
+const styles = StyleSheet.create({
+  header: {
+    height: 130,
+    paddingTop: 50,
+  },
+  mainTitle: {
+    fontSize: 16,
+    color: '#fff',
+    fontWeight: 'normal'
+  },
+  subTitle: {
+    fontSize: 12,
+    color: '#fff',
+    fontWeight: 'normal'
+  },
+  navButtons: {
+    flexDirection: 'column',
+  },
+  buttonStyle: {
+    flexDirection: 'row',
+    height: 20,
+    width: 300,
+    alignItems: 'center'
+  },
+  button: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1,
+    paddingTop: 20,
+    paddingBottom: 18,
+    width: 300,
+    height: 55,
+    marginTop: 20,
+    backgroundColor: '#fff'
+  },
+  textSocial: {
+    color: '#595F66',
+    fontWeight: 'normal',
+    fontSize: 12,
+    paddingLeft: 20
+  },
+  searchIcon: {
+    position: 'absolute',
+    right: 20,
+    bottom: 20,
+    padding: 10,
+    backgroundColor: '#6AE1C4',
+    borderRadius: 22,
+  },
+  icon1: {
+    backgroundColor: 'rgba(255,204,84,0.16)',
+    borderRadius: 22,
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  icon2: {
+    backgroundColor: 'rgba(246,82,82,0.16)',
+    borderRadius: 22,
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  icon3: {
+    backgroundColor: 'rgba(255,132,77,0.16)',
+    borderRadius: 22,
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  icon4: {
+    backgroundColor: 'rgba(120,174,249,0.16)',
+    borderRadius: 22,
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  icon5: {
+    backgroundColor: 'rgba(192,117,201,0.16)',
+    borderRadius: 22,
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  icon6: {
+    backgroundColor: 'rgba(80,193,182,0.16)',
+    borderRadius: 22,
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  icon7: {
+    backgroundColor: 'rgba(115,204,114,0.16)',
+    borderRadius: 22,
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  icon8: {
+    backgroundColor: 'rgba(244,93,144,0.16)',
+    borderRadius: 22,
+    width: 32,
+    height: 32,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+});
+
+export default CategoriesHeader;

src/headers/LandingHeader.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import { StyleSheet, View, Text } from 'react-native';
+
+const LandingHeader = props => {
+  const {
+    mainTitle,
+  } = props;
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        
+        <Text style={styles.mainTitle}>{mainTitle}</Text>
+      </View>
+      
+    </View>
+  );
+};
+
+LandingHeader.defaultProps = {
+  mainTitle: '',
+};
+
+LandingHeader.propTypes = {
+  mainTitle: PropTypes.string,
+  valueTitle: PropTypes.string,
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'column',
+    flex: 1,
+    display: 'flex',
+  },
+  header: {
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  mainTitle: {
+    fontSize: 35,
+    marginTop: 150,
+    color: '#fff'
+  },
+
+});
+
+export default LandingHeader;

src/headers/LoginHeader.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import colors from '../config/colors';
+import { StyleSheet, View, Text } from 'react-native';
+
+const LoginHeader = props => {
+  const {
+    headerTitle,
+  } = props;
+
+  return (
+    <View style={styles.header}>
+      <Text style={styles.headerTitle}>{headerTitle}</Text>
+    </View>
+  );
+};
+
+LoginHeader.defaultProps = {
+  headerTitle: '',
+};
+
+LoginHeader.propTypes = {
+  headerTitle: PropTypes.string,
+};
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: colors.secondary,
+    flex: 1,
+    padding: 0,
+  },
+  header: {
+    flexDirection: 'column',
+    paddingLeft: 20,
+    height: 200,
+    justifyContent: 'center',
+    backgroundColor: '#3083FF',
+  },
+  headerTitle: {
+    fontSize: 28,
+    fontWeight: 'normal',
+    color: '#fff'
+  },
+});
+
+export default LoginHeader;
\ No newline at end of file

src/headers/MenuHeader.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from '../buttons/Button'
+import Icon from '../icons/Icon';
+import { StyleSheet, View, Text, Image, } from 'react-native';
+
+const MenuHeader = props => {
+  const {
+    mainTitle,
+    subTitle,
+    image,
+    imageSize,
+  } = props;
+
+  return (
+    <View>
+      <View style={styles.header}>
+        <Image
+        style={[MenuHeader.defaultProps.imageSize, imageSize && imageSize]}
+        source={image}
+        />
+        <View style={{flexDirection: 'column', margin: 20}}>
+          <Text style={styles.mainTitle}>{mainTitle}</Text>
+          <Text style={styles.subTitle}>{subTitle}</Text>
+        </View>  
+      </View>
+      <View style={styles.navButtons}>
+        <Button 
+          buttonStyle={styles.button}
+          title={<View style={styles.buttonStyle}><Icon
+            color='#fff'
+            name='bar-chart'
+            size={18}
+          /><Text style={styles.textSocial}>DASHBOARD</Text></View>}
+          />
+        <Button 
+          buttonStyle={styles.button}
+          title={<View style={styles.buttonStyle}><Icon
+            color='#fff'
+            name='bell-o'
+            size={18}
+          /><Text style={styles.textSocial}>NOTIFICATION</Text></View>}
+          />
+          <Button 
+          buttonStyle={styles.button}
+          title={<View style={styles.buttonStyle}><Icon
+            color='#fff'
+            name='pie-chart'
+            size={18}
+          /><Text style={styles.textSocial}>BUDGET</Text></View>}
+          />
+        <Button 
+          buttonStyle={styles.button}
+          title={<View style={styles.buttonStyle}><Icon
+            color='#fff'
+            name='calendar-o'
+            size={18}
+          /><Text style={styles.textSocial}>SCHEDULED PAYMENT</Text></View>}
+          />
+          <Button 
+          buttonStyle={styles.button}
+          title={<View style={styles.buttonStyle}><Icon
+            color='#fff'
+            name='user-o'
+            size={18}
+          /><Text style={styles.textSocial}>ACCOUNTS</Text></View>}
+          />
+        <Button 
+          buttonStyle={styles.button}
+          title={<View style={styles.buttonStyle}><Icon
+            color='#fff'
+            name='cog'
+            size={18}
+          /><Text style={styles.textSocial}>SETTINGS</Text></View>}
+          />
+          <Button 
+          buttonStyle={styles.button}
+          title={<View style={styles.buttonStyle}><Icon
+            color='#fff'
+            name='sign-out'
+            size={18}
+          /><Text style={styles.textSocial}>SIGN OUT</Text></View>}
+          />
+      </View>
+    </View>
+  );
+};
+
+MenuHeader.defaultProps = {
+  mainTitle: '',
+  subTitle: '',
+  image: require('../images/facebook.png'),
+  imageSize: {width: 48, height: 48}
+};
+
+MenuHeader.propTypes = {
+  mainTitle: PropTypes.string,
+  subTitle: PropTypes.string,
+  valueTitle: PropTypes.string,
+};
+
+const styles = StyleSheet.create({
+  header: {
+    height: 80,
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginLeft: 30,
+    marginTop: 60,
+  },
+  mainTitle: {
+    fontSize: 16,
+    color: '#fff',
+    fontWeight: '600'
+  },
+  subTitle: {
+    fontSize: 12,
+    color: '#fff',
+    fontWeight: '500'
+  },
+  navButtons: {
+    flexDirection: 'column',
+  },
+  buttonStyle: {
+    flexDirection: 'row',
+    height: 20,
+    width: 300,
+    alignItems: 'center'
+  },
+  button: { 
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1, 
+    paddingTop: 20,
+    paddingBottom: 12,
+    width: 300,
+    height: 55, 
+    marginTop: 20,
+  },
+  textSocial: {
+    color: '#fff',
+    fontWeight: '600',
+    fontSize: 14,
+    paddingLeft: 20
+  },
+});
+
+export default MenuHeader;

src/headers/WalletHeader.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import Icon from '../icons/Icon';
+import { StyleSheet, View, Text, Image, } from 'react-native';
+
+const WalletHeader = props => {
+  const {
+    curentBalance,
+    income,
+    expenses,
+  } = props;
+
+  return (
+    <View style={styles.header}>
+      <Text style={styles.headerTitle}>Current Balance</Text>
+      <Text style={styles.headerSubtitle}>{curentBalance}</Text>
+      <View style={styles.balance}>
+        <View style={styles.balanceValue}>
+          <Icon
+            color='#78AEF9'
+            height= {26}
+            width= {26}
+            name='plus'
+            size={12} 
+            style={styles.icon1} />
+          <View style={styles.balanceAmount}>
+            <Text style={styles.balanceTitle}>Income</Text>
+            <Text style={styles.balanceSubtitle}>{income}</Text>
+          </View>
+        </View>
+        <View style={styles.balanceValue}>
+          <Icon
+            color='#78AEF9'
+            height= {26}
+            width= {26}
+            name='minus'
+            size={12} 
+            style={styles.icon1} />
+          <View style={styles.balanceAmount}>
+            <Text style={styles.balanceTitle}>Expenses</Text>
+            <Text style={styles.balanceSubtitle}>{expenses}</Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+WalletHeader.defaultProps = {
+  curentBalance: '',
+  income: '',
+  expenses: '',
+};
+WalletHeader.propTypes = {
+  curentBalance: PropTypes.string,
+  income: PropTypes.string,
+  expenses: PropTypes.string,
+};
+
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: 'column',
+    backgroundColor: '#78AEF9',
+    margin: 20,
+    borderRadius: 10,
+    padding: 20,
+    marginBottom: 30,
+    shadowColor: '#78AEF9',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.5,
+    shadowRadius: 15,
+  },
+  balance: {
+    flexDirection: 'row',
+    height: 40,
+  },
+  balanceValue: {
+    flexDirection: 'row',
+    flex: 1,
+  },
+  balanceAmount: {
+    flexDirection: 'column',
+    justifyContent: 'space-around'
+  },
+  headerTitle: {
+    color: '#fff',
+    fontSize: 14,
+    fontWeight: 'normal',
+  },
+  headerSubtitle: {
+    color: '#fff',
+    fontSize: 32,
+    fontWeight: '300',
+    marginTop: 10,
+    marginBottom: 20,
+  },
+  balanceTitle: {
+    color: '#fff',
+    fontSize: 11,
+    fontWeight: 'normal',
+    opacity: 0.8,
+  },
+  balanceSubtitle: {
+    color: '#fff',
+    fontSize: 14,
+    fontWeight: 'normal',
+  },
+  icon1: {
+    backgroundColor: 'rgba(255,255,255,0.24)',
+    borderRadius: 22,
+    width: 25,
+    height: 25,
+    alignItems: 'center',
+    justifyContent: 'center',
+    margin: 8,
+  },
+});
+
+export default WalletHeader;

src/helpers/normalizeText.js

+//
+// Method to normalize size of fonts across devices
+//
+// Some code taken from https://jsfiddle.net/97ty7yjk/ &
+// https://stackoverflow.com/questions/34837342/font-size-on-iphone-6s-plus
+//
+// author: @xiaoneng
+// date: 14/10/2016
+// version: 03
+//
+
+const React = require('react-native'); // eslint-disable-line no-undef
+const { PixelRatio, Dimensions } = React;
+
+const pixelRatio = PixelRatio.get();
+const deviceHeight = Dimensions.get('window').height;
+const deviceWidth = Dimensions.get('window').width;
+
+// -- Testing Only --
+// const fontScale = PixelRatio.getFontScale();
+// const layoutSize = PixelRatio.getPixelSizeForLayoutSize(14);
+// console.log('normalizeText getPR ->', pixelRatio);
+// console.log('normalizeText getFS ->', fontScale);
+// console.log('normalizeText getDH ->', deviceHeight);
+// console.log('normalizeText getDW ->', deviceWidth);
+// console.log('normalizeText getPSFLS ->', layoutSize);
+
+const normalize = size => {
+  if (pixelRatio === 2) {
+    // iphone 5s and older Androids
+    if (deviceWidth < 360) {
+      return size * 0.95;
+    }
+    // iphone 5
+    if (deviceHeight < 667) {
+      return size;
+      // iphone 6-6s
+    } else if (deviceHeight >= 667 && deviceHeight <= 735) {
+      return size * 1.15;
+    }
+    // older phablets
+    return size * 1.25;
+  }
+  if (pixelRatio === 3) {
+    // catch Android font scaling on small machines
+    // where pixel ratio / font scale ratio => 3:3
+    if (deviceWidth <= 360) {
+      return size;
+    }
+    // Catch other weird android width sizings
+    if (deviceHeight < 667) {
+      return size * 1.15;
+      // catch in-between size Androids and scale font up
+      // a tad but not too much
+    }
+    if (deviceHeight >= 667 && deviceHeight <= 735) {
+      return size * 1.2;
+    }
+    // catch larger devices
+    // ie iphone 6s plus / 7 plus / mi note 等等
+    return size * 1.27;
+  }
+  if (pixelRatio === 3.5) {
+    // catch Android font scaling on small machines
+    // where pixel ratio / font scale ratio => 3:3
+    if (deviceWidth <= 360) {
+      return size;
+      // Catch other smaller android height sizings
+    }
+    if (deviceHeight < 667) {
+      return size * 1.20;
+      // catch in-between size Androids and scale font up
+      // a tad but not too much
+    }
+    if (deviceHeight >= 667 && deviceHeight <= 735) {
+      return size * 1.25;
+    }
+    // catch larger phablet devices
+    return size * 1.40;
+  }
+  // if older device ie pixelRatio !== 2 || 3 || 3.5
+  return size;
+};
+
+module.exports = normalize; // eslint-disable-line no-undef

src/icons/Icon.js

+import PropTypes from 'prop-types';
+import React from 'react';
+import {
+  Platform,
+  TouchableHighlight,
+  View,
+  StyleSheet,
+  Text as NativeText,
+} from 'react-native';
+import iconSet from 'react-native-vector-icons/FontAwesome';
+import ViewPropTypes from '../config/ViewPropTypes';
+
+const Icon = props => {
+  const {
+    name,
+    size,
+    color,
+    iconStyle,
+    component,
+    underlayColor,
+    reverse,
+    raised,
+    containerStyle,
+    reverseColor,
+    onPress,
+    ...attributes
+  } = props;
+
+  let Component = View;
+  if (onPress) {
+    Component = TouchableHighlight;
+  }
+  if (component) {
+    Component = component;
+  }
+  let Icon = iconSet;
+  return (
+    <Component
+      underlayColor={reverse ? color : underlayColor || color}
+      style={[
+        (reverse || raised) && styles.button,
+        (reverse || raised) && {
+          borderRadius: size + 4,
+          height: size * 2 + 4,
+          width: size * 2 + 4,
+        },
+        raised && styles.raised,
+        {
+          backgroundColor: reverse ? color : raised ? 'white' : 'transparent',
+          alignItems: 'center',
+          justifyContent: 'center',
+        },
+        containerStyle && containerStyle,
+      ]}
+      onPress={onPress}
+      {...attributes}
+    >
+      <Icon
+        style={[{ backgroundColor: 'transparent' }, iconStyle && iconStyle]}
+        size={size}
+        name={name}
+        color={reverse ? reverseColor : color}
+      />
+    </Component>
+  );
+};
+
+Icon.propTypes = {
+  name: PropTypes.string,
+  size: PropTypes.number,
+  color: PropTypes.string,
+  component: PropTypes.func,
+  underlayColor: PropTypes.string,
+  reverse: PropTypes.bool,
+  raised: PropTypes.bool,
+  containerStyle: ViewPropTypes.style,
+  iconStyle: NativeText.propTypes.style,
+  onPress: PropTypes.func,
+  reverseColor: PropTypes.string,
+};
+
+Icon.defaultProps = {
+  underlayColor: 'white',
+  reverse: false,
+  raised: false,
+  size: 24,
+  color: 'black',
+  reverseColor: 'white',
+};
+
+const styles = StyleSheet.create({
+  button: {
+    margin: 7,
+  },
+  raised: {
+    ...Platform.select({
+      ios: {
+        shadowColor: 'rgba(0,0,0, .4)',
+        shadowOffset: { height: 1, width: 1 },
+        shadowOpacity: 1,
+        shadowRadius: 1,
+      },
+      android: {
+        elevation: 2,
+      },
+    }),
+  },
+});
+
+export default Icon;

src/index.js

+// Core
+import Button from './buttons/Button';
+
+import CalendarItem from './calendar/CalendarItem';
+
+import Card from './card/Card';
+
+import GainLine from './charts/GainLine';
+
+import CheckBox from './checkbox/Checkbox';
+
+import BackgroundImage from './config/BackgroundImage';
+import colors from './config/colors';
+import fonts from './config/fonts';
+import ViewPropTypes from './config/ViewPropTypes';
+
+import Divider from './divider/Divider';
+
+import FormInput from './form/FormInput';
+import FormLabel from './form/FormLabel';
+import FormLogin from './form/FormLogin';
+import FormRow from './form/FormRow';
+import FormSearch from './form/FormSearch';
+
+import CategoriesHeader from './headers/CategoriesHeader';
+import LandingHeader from './headers/LandingHeader';
+import LoginHeader from './headers/LoginHeader';
+import MenuHeader from './headers/MenuHeader';
+import WalletHeader from './headers/WalletHeader';
+
+import Icon from './icons/Icon';
+
+import List from './list/List';
+import ListItem from './list/ListItem';
+import ListItemAction from './list/ListItemAction';
+
+import DefaultMarker from './slider/DefaultMarker';
+import MultiSlider from './slider/MultiSlider';
+import Slider from './slider/Slider';
+
+import TabNavigator from './tabs/TabNavigator'
+
+import Text from './text/Text';
+
+export {
+  Button,
+  CalendarItem,
+  Card,
+  GainLine,
+  CheckBox,
+  BackgroundImage,
+  colors,
+  fonts,
+  ViewPropTypes,
+  Divider,
+  FormInput,
+  FormRow,
+  FormLabel,
+  FormLogin,
+  FormSearch,
+  CategoriesHeader,
+  LandingHeader,
+  LoginHeader,
+  MenuHeader,
+  WalletHeader,
+  Icon,
+  List,
+  ListItem,
+  ListItemAction,
+  TabNavigator,
+  Text,
+  Slider,
+  MultiSlider,
+  DefaultMarker
+};

src/list/List.js

+import PropTypes from 'prop-types';
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import colors from '../config/colors';
+import ViewPropTypes from '../config/ViewPropTypes';
+
+const List = props => {
+  const { children, containerStyle, ...attributes } = props;
+  return (
+    <View
+      style={[styles.listContainer, containerStyle && containerStyle]}
+      {...attributes}
+    >
+      {children}
+    </View>
+  );
+};
+
+List.propTypes = {
+  children: PropTypes.any,
+  containerStyle: ViewPropTypes.style,
+};
+
+const styles = StyleSheet.create({
+  listContainer: {
+    marginTop: 0,
+    borderTopWidth: 1,
+    borderColor: colors.white,
+    backgroundColor: colors.white,
+  },
+});
+
+export default List;

src/save

+import React from 'react';
+import { StyleSheet, Text, View, ScrollView } from 'react-native';
+// import { Button } from 'react-pocket';
+import Button from './src/buttons/Button'
+
+export default class App extends React.Component {
+  render() {
+    return (
+      <ScrollView>
+        <View style={styles.hero}>
+          <Text style={styles.heading}>Button</Text>
+        </View>
+        <Button
+          buttonStyle={styles.button}
+          title="Button"
+        />
+        <Button
+          buttonStyle={styles.button}
+          title="Button"
+          secondary
+        />
+        <Button
+          buttonStyle={styles.button}
+          title="Button"
+          secondary2
+        />
+        <Button
+          buttonStyle={styles.button}
+          title="Button"
+          secondary3
+        />
+      </ScrollView>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  heading: {
+    color: 'white',
+    marginTop: 10,
+    fontSize: 22,
+  },
+  hero: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 40,
+    backgroundColor: '#fff',
+  },
+  titleContainer: {},
+  button: {
+    marginTop: 15,
+  },
+  title: {
+    textAlign: 'center',
+    color: '#5e6977'
+  },
+  socialRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+});

src/slider/DefaultMarker.js

+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { View, StyleSheet, Platform, TouchableHighlight } from 'react-native';
+
+const ViewPropTypes = require('react-native').ViewPropTypes || View.propTypes;
+
+export default class DefaultMarker extends React.Component {
+  static propTypes = {
+    pressed: PropTypes.bool,
+    pressedMarkerStyle: ViewPropTypes.style,
+    markerStyle: ViewPropTypes.style,
+    enabled: PropTypes.bool,
+    valuePrefix: PropTypes.string,
+    valueSuffix: PropTypes.string,
+  };
+
+  render() {
+    return (
+      <TouchableHighlight>
+        <View
+          style={this.props.enabled ? [
+            styles.markerStyle,
+            this.props.markerStyle,
+            this.props.pressed && styles.pressedMarkerStyle,
+            this.props.pressed && this.props.pressedMarkerStyle,
+          ] : [styles.markerStyle, styles.disabled]}
+        />
+      </TouchableHighlight>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  markerStyle: {
+    ...Platform.select({
+      ios: {
+        height: 20,
+        width: 20,
+        borderRadius: 10,
+        backgroundColor: '#FFF',
+        shadowColor: 'rgba(0,0,0,0.06)',
+        shadowOffset: {
+          width: 1,
+          height: 2
+        },
+        shadowRadius: 1,
+        shadowOpacity: 1,
+      },
+      android: {
+        height: 20,
+        width: 20,
+        borderRadius: 10,
+        backgroundColor: '#FFF',
+      },
+    }),
+  },
+  pressedMarkerStyle: {
+    ...Platform.select({
+      ios: {},
+      android: {
+        height: 20,
+        width: 20,
+        borderRadius: 20,
+      },
+    }),
+  },
+  disabled: {
+    opacity: 0.4,
+  },
+});
\ No newline at end of file

src/slider/converters.js

+'use strict';
+
+export function valueToPosition(value, valuesArray, sliderLength) {
+  var arrLength;
+  var index = valuesArray.indexOf(value);
+
+  if (index === -1) {
+    //console.log('Invalid value, array does not contain: ', value);
+    return null;
+  } else {
+    arrLength = valuesArray.length - 1;
+    return sliderLength * index / arrLength;
+  }
+}
+
+export function positionToValue(position, valuesArray, sliderLength) {
+  var arrLength;
+  var index;
+
+  if (position < 0 || sliderLength < position) {
+    //console.log('invalid position: ', position);
+    return null;
+  } else {
+    arrLength = valuesArray.length - 1;
+    index = arrLength * position / sliderLength;
+    return valuesArray[Math.round(index)];
+  }
+}
+
+export function createArray(start, end, step) {
+  var i;
+  var length;
+  var direction = start - end > 0 ? -1 : 1;
+  var result = [];
+  if (!step) {
+    //console.log('invalid step: ', step);
+    return result;
+  } else {
+    length = Math.abs((start - end) / step) + 1;
+    for (i = 0; i < length; i++) {
+      result.push(start + i * Math.abs(step) * direction);
+    }
+    return result;
+  }
+}
\ No newline at end of file

src/tabs/Layout.js

+'use strict';
+
+import { PixelRatio } from 'react-native';
+
+export default {
+  pixel: 1 / PixelRatio.get(),
+  tabBarHeight: 49,
+};
\ No newline at end of file

src/tabs/StaticContainer.js

+'use strict';
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class StaticContainer extends React.Component {
+  static propTypes = {
+    shouldUpdate: PropTypes.bool,
+  };
+
+  // noinspection JSAnnotator
+  shouldComponentUpdate(nextProps: Object): boolean {
+    return !!nextProps.shouldUpdate;
+  }
+
+  render() {
+    let { children } = this.props;
+    return children ? React.Children.only(children) : null;
+  }
+}
\ No newline at end of file