├── .gitignore ├── index.js ├── package.json ├── readme.md ├── readme_assets └── components │ ├── button.png │ ├── coloredView.png │ ├── imageCard.png │ └── progressBar.png └── src ├── components ├── Button.js ├── ColoredView.js ├── ImageCard.js ├── NavigationBar.js └── ProgressBar.js └── styles ├── colors.js └── sizes.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const Button = require('./src/components/Button.js') 2 | const ColoredView = require('./src/components/ColoredView.js') 3 | const ImageCard = require('./src/components/ImageCard.js') 4 | const ProgressBar = require('./src/components/ProgressBar.js') 5 | const NavigationBar = require('./src/components/NavigationBar.js') 6 | 7 | const UI = { 8 | Button, 9 | ColoredView, 10 | ImageCard, 11 | ProgressBar, 12 | NavigationBar 13 | } 14 | 15 | module.exports = UI 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-native-ui", 3 | "version": "0.0.1", 4 | "description": "react native ui components", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git+https://github.com/javierbyte/react-native-ui.git" 12 | }, 13 | "keywords": [ 14 | "react", 15 | "react-native", 16 | "react-native-ui", 17 | "ui", 18 | "components" 19 | ], 20 | "author": { 21 | "name": "javierbyte" 22 | }, 23 | "license": "ISC", 24 | "bugs": { 25 | "url": "https://github.com/javierbyte/react-native-ui/issues" 26 | }, 27 | "homepage": "https://github.com/javierbyte/react-native-ui#readme", 28 | "dependencies": { 29 | "lodash": "^3.10.1", 30 | "tinycolor2": "^1.1.2" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # React Native Components 2 | 3 | ## Components 4 | 5 | ### Button 6 | ![](/readme_assets/components/button.png) 7 | 8 | onPress: React.PropTypes.func, 9 | color: React.PropTypes.string, 10 | children: React.PropTypes.any 11 | 12 | ### ColoredView 13 | ![](/readme_assets/components/coloredView.png) 14 | 15 | title: React.PropTypes.string, 16 | color: React.PropTypes.string, 17 | children: React.PropTypes.element, 18 | leftComponent: React.PropTypes.element 19 | 20 | ### Image Card 21 | ![](/readme_assets/components/imageCard.png) 22 | 23 | title: React.PropTypes.string, 24 | subtitle: React.PropTypes.string, 25 | imageUrl: React.PropTypes.string.isRequired, 26 | onPress: React.PropTypes.func 27 | 28 | ### Progress Bar 29 | ![](/readme_assets/components/progressBar.png) 30 | 31 | progress: React.PropTypes.number, 32 | -------------------------------------------------------------------------------- /readme_assets/components/button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javierbyte/react-native-ui/802b1025b7018a0082c2bffaa9a0db8727057226/readme_assets/components/button.png -------------------------------------------------------------------------------- /readme_assets/components/coloredView.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javierbyte/react-native-ui/802b1025b7018a0082c2bffaa9a0db8727057226/readme_assets/components/coloredView.png -------------------------------------------------------------------------------- /readme_assets/components/imageCard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javierbyte/react-native-ui/802b1025b7018a0082c2bffaa9a0db8727057226/readme_assets/components/imageCard.png -------------------------------------------------------------------------------- /readme_assets/components/progressBar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/javierbyte/react-native-ui/802b1025b7018a0082c2bffaa9a0db8727057226/readme_assets/components/progressBar.png -------------------------------------------------------------------------------- /src/components/Button.js: -------------------------------------------------------------------------------- 1 | const ReactNative = require('react-native') 2 | const React = require('react') 3 | const {Component, View, Text, StyleSheet, TouchableOpacity} = ReactNative 4 | 5 | const SIZES = require('../styles/sizes.js') 6 | const COLORS = require('../styles/colors.js') 7 | 8 | const Button = React.createClass({ 9 | propTypes: { 10 | onPress: React.PropTypes.func, 11 | color: React.PropTypes.string, 12 | children: React.PropTypes.any 13 | }, 14 | 15 | render () { 16 | const {color} = this.props 17 | 18 | return ( 19 | 20 | 21 | 22 | {this.props.children} 23 | 24 | 25 | 26 | ) 27 | } 28 | }) 29 | 30 | const styles = StyleSheet.create({ 31 | container: { 32 | }, 33 | button: { 34 | paddingLeft: SIZES.BASE_PADDING * 2, 35 | paddingRight: SIZES.BASE_PADDING * 2, 36 | height: SIZES.INPUT_HEIGHT, 37 | backgroundColor: COLORS.PRIMARY, 38 | justifyContent: 'center', 39 | alignItems: 'center', 40 | borderRadius: SIZES.BORDER_RADIUS 41 | }, 42 | buttonText: { 43 | color: 'white', 44 | fontWeight: 'bold' 45 | } 46 | }) 47 | 48 | module.exports = Button 49 | -------------------------------------------------------------------------------- /src/components/ColoredView.js: -------------------------------------------------------------------------------- 1 | const React = require('react') 2 | const ReactNative = require('react-native') 3 | const _ = require('lodash') 4 | const tinycolor = require('tinycolor2') 5 | 6 | const SIZES = require('../styles/sizes.js') 7 | 8 | var { 9 | Text, 10 | View, 11 | StatusBar, 12 | ScrollView 13 | } = ReactNative 14 | 15 | const ColoredView = React.createClass({ 16 | 17 | propTypes: { 18 | title: React.PropTypes.any, 19 | color: React.PropTypes.string, 20 | children: React.PropTypes.any, 21 | 22 | customStyles: React.PropTypes.object, 23 | leftComponent: React.PropTypes.element, 24 | 25 | statusBarStyle: React.PropTypes.string 26 | }, 27 | 28 | componentWillMount () { 29 | var statusBarStyle = this.props.statusBarStyle || 'light-content' 30 | StatusBar.setBarStyle(statusBarStyle) 31 | }, 32 | 33 | render () { 34 | const {title, color, children, leftComponent, customStyles} = this.props 35 | 36 | const stylesContainer = _.merge({}, styles.container, { 37 | backgroundColor: '#f1f2f3' 38 | }, _.get(customStyles, 'container')) 39 | 40 | const stylesTitleContainer = _.merge({}, styles.titleContainer, { 41 | backgroundColor: tinycolor(color).lighten(3).toString(), 42 | padding: 15 43 | }) 44 | 45 | return ( 46 | 47 | 48 | {typeof title === 'string' ? {title} : {title}} 49 | 50 | 51 | {leftComponent} 52 | 53 | 54 | 55 | 56 | {children} 57 | 58 | 59 | ) 60 | } 61 | }) 62 | 63 | var styles = { 64 | container: { 65 | flex: 1, 66 | flexDirection: 'column', 67 | alignItems: 'stretch', 68 | backgroundColor: '#fff' 69 | }, 70 | titleContainer: { 71 | padding: SIZES.BASE_PADDING, 72 | paddingTop: SIZES.BASE_PADDING * 2 73 | }, 74 | title: { 75 | textAlign: 'center', 76 | color: '#fff', 77 | fontSize: 18, 78 | fontWeight: '600', 79 | backgroundColor: 'transparent' 80 | }, 81 | leftButton: { 82 | padding: SIZES.BASE_PADDING, 83 | position: 'absolute', 84 | top: SIZES.BASE_PADDING + 4, 85 | left: 0 86 | }, 87 | content: { 88 | flex: 1 89 | } 90 | } 91 | 92 | module.exports = ColoredView 93 | -------------------------------------------------------------------------------- /src/components/ImageCard.js: -------------------------------------------------------------------------------- 1 | const React = require('react') 2 | const ReactNative = require('react-native') 3 | 4 | const SIZES = require('../styles/sizes.js') 5 | 6 | const {Image, Text, View, TouchableOpacity} = React 7 | 8 | const ImageCard = React.createClass({ 9 | 10 | propTypes: { 11 | title: React.PropTypes.string, 12 | subtitle: React.PropTypes.string, 13 | imageUrl: React.PropTypes.string.isRequired, 14 | onPress: React.PropTypes.func 15 | }, 16 | 17 | render () { 18 | const {title, subtitle, imageUrl} = this.props 19 | 20 | return ( 21 | 22 | 25 | sadasdfasdf 34 | 35 | 36 | {subtitle} 37 | 38 | 39 | {title} 40 | 41 | 42 | 43 | ) 44 | } 45 | }) 46 | 47 | const styles = { 48 | container: { 49 | height: 200, 50 | padding: SIZES.BASE_PADDING 51 | }, 52 | subtitle: { 53 | backgroundColor: 'transparent', 54 | color: '#fff' 55 | }, 56 | title: { 57 | marginTop: 2, 58 | fontSize: 20, 59 | fontWeight: '600' 60 | } 61 | } 62 | 63 | module.exports = ImageCard 64 | -------------------------------------------------------------------------------- /src/components/NavigationBar.js: -------------------------------------------------------------------------------- 1 | const ReactNative = require('react-native') 2 | const React = require('react') 3 | const {Component, View, Text, StyleSheet, TouchableOpacity} = ReactNative 4 | const _ = require('lodash') 5 | 6 | import Icon from 'react-native-vector-icons/Foundation'; 7 | 8 | const SIZES = require('../styles/sizes.js') 9 | const COLORS = require('../styles/colors.js') 10 | 11 | const NavigationBar = React.createClass({ 12 | propTypes: { 13 | content: React.PropTypes.object, 14 | active: React.PropTypes.string, 15 | onChange: React.PropTypes.func.isRequired 16 | }, 17 | 18 | render () { 19 | const active = '' + this.props.active 20 | const {content, onChange} = this.props 21 | 22 | return ( 23 | 24 | {_.map(content, (child, childKey) => { 25 | const currentChildContentStyles = ('' + active === '' + childKey) ? _.assign({}, styles.childContent, styles.childContentActive) : styles.childContent 26 | return 27 | 32 | 33 | {child.title} 34 | 35 | 36 | })} 37 | 38 | ) 39 | } 40 | }) 41 | 42 | const styles = { 43 | container: { 44 | backgroundColor: '#fff', 45 | height: 64, 46 | shadowColor: '#000', 47 | shadowOpacity: 0.04, 48 | flexDirection: 'row' 49 | }, 50 | child: { 51 | flex: 1, 52 | alignItems: 'center', 53 | justifyContent: 'center' 54 | }, 55 | childContent: { 56 | color: '#000' 57 | }, 58 | childContentActive: { 59 | color: '#2980B9', 60 | fontWeight: '700' 61 | }, 62 | iconStyles: { 63 | marginTop: 2, 64 | marginBottom: 0 65 | } 66 | } 67 | 68 | module.exports = NavigationBar 69 | -------------------------------------------------------------------------------- /src/components/ProgressBar.js: -------------------------------------------------------------------------------- 1 | const React = require('react') 2 | 3 | var { 4 | View 5 | } = React 6 | 7 | const ProgressBar = React.createClass({ 8 | 9 | propTypes: { 10 | progress: React.PropTypes.number, 11 | style: React.PropTypes.object 12 | }, 13 | 14 | render () { 15 | const {progress, style} = this.props 16 | 17 | const progressStyles = { 18 | backgroundColor: '#E66000', 19 | flex: progress, 20 | borderRadius: 5 21 | } 22 | 23 | const remainingStyles = { 24 | backgroundColor: 'transparent', 25 | flex: 1 - progress 26 | } 27 | 28 | return ( 29 | 30 | 31 | 32 | 33 | ) 34 | } 35 | }) 36 | 37 | var styles = { 38 | bar: { 39 | backgroundColor: '#d1d2d3', 40 | flexAlign: 'stretch', 41 | flexDirection: 'row', 42 | height: 10, 43 | borderRadius: 5 44 | } 45 | } 46 | 47 | module.exports = ProgressBar 48 | -------------------------------------------------------------------------------- /src/styles/colors.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | RED: '#FF3B30', 3 | BLUE: '#007AFF', 4 | 5 | DANGER: '#f15a24', 6 | WARNING: '#fbb03b', 7 | OK: '#39b54a', 8 | 9 | PRIMARY: '#007AFF' // BLUE 10 | } 11 | -------------------------------------------------------------------------------- /src/styles/sizes.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | BASE_PADDING: 15, 3 | BORDER_RADIUS: 3, 4 | INPUT_HEIGHT: 40, 5 | FORM_CONTAINER_PADDING: 15, 6 | FONT_SIZE: 15 7 | } 8 | --------------------------------------------------------------------------------