├── src ├── hocs │ ├── index.js │ └── withModal.js ├── util.js ├── index.js ├── components │ ├── index.js │ └── Touchable.js ├── grid.js ├── native.js ├── proxy.js ├── base.js └── view.js ├── .eslintrc.json ├── package.json └── .gitignore /src/hocs/index.js: -------------------------------------------------------------------------------- 1 | import withModal from './withModal' 2 | 3 | export { 4 | withModal 5 | } -------------------------------------------------------------------------------- /src/util.js: -------------------------------------------------------------------------------- 1 | import { themeGet } from '@styled-system/theme-get' 2 | 3 | export function themeColor(code, prefix = 'colors.') { 4 | return code[0] === '#' ? () => code : themeGet(prefix + code) 5 | } 6 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export { withTheme } from 'styled-components' 2 | export { themeGet } from '@styled-system/theme-get' 3 | export { compose, system } from 'styled-system' 4 | 5 | export * from './proxy' 6 | export * from './native' 7 | export * from './base' 8 | export * from './grid' 9 | export * from './view' 10 | export * from './components' 11 | export * from './util' 12 | 13 | export * from './hocs' -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | import { 2 | TouchableOpacity, 3 | TouchableWithoutFeedback, 4 | TouchableHighlight, 5 | TouchableNativeFeedback 6 | } from 'react-native' 7 | 8 | import Touchable from './Touchable' 9 | 10 | export { 11 | 12 | // Proxies 13 | TouchableOpacity, 14 | TouchableWithoutFeedback, 15 | TouchableHighlight, 16 | TouchableNativeFeedback, 17 | 18 | // Customs 19 | Touchable 20 | 21 | } 22 | -------------------------------------------------------------------------------- /src/components/Touchable.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import { 4 | Platform, 5 | TouchableNativeFeedback, 6 | TouchableOpacity, 7 | } from 'react-native' 8 | 9 | export default function (props) { 10 | 11 | const TouchableFallback = Platform.OS === 'android' 12 | ? TouchableNativeFeedback 13 | : TouchableOpacity 14 | 15 | return ( 16 | 17 | {props.children} 18 | 19 | ) 20 | 21 | } 22 | -------------------------------------------------------------------------------- /src/grid.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components/native' 2 | import { 3 | compose, 4 | space, 5 | color, 6 | border, 7 | width, 8 | height 9 | } from 'styled-system' 10 | 11 | import { 12 | Grid as BaseGrid, 13 | Col as BaseCol, 14 | Row as BaseRow 15 | } from 'react-native-easy-grid' 16 | 17 | const styleGrid = compose( 18 | space, 19 | color, 20 | border, 21 | width, 22 | height 23 | ) 24 | 25 | const Grid = styled(BaseGrid)(styleGrid) 26 | const Col = styled(BaseCol)(styleGrid) 27 | const Row = styled(BaseRow)(styleGrid) 28 | 29 | export { 30 | Grid, 31 | Col, 32 | Row 33 | } 34 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es6": true, 5 | "node": true 6 | }, 7 | "extends": [ 8 | "eslint:recommended" 9 | ], 10 | "parser": "babel-eslint", 11 | "globals": { 12 | "Atomics": "readonly", 13 | "SharedArrayBuffer": "readonly" 14 | }, 15 | "parserOptions": { 16 | "ecmaVersion": 2018, 17 | "sourceType": "module" 18 | }, 19 | "plugins": [ 20 | "react-hooks" 21 | ], 22 | "rules": { 23 | "quotes": [ 24 | "error", 25 | "single" 26 | ], 27 | "semi": [ 28 | "error", 29 | "never" 30 | ], 31 | "react-hooks/rules-of-hooks": "error", 32 | "react-hooks/exhaustive-deps": "warn" 33 | } 34 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "styled-native", 3 | "version": "0.1.14", 4 | "description": "Styled native-base UI components using styled-system", 5 | "main": "src/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/rhaldkhein/styled-native.git" 12 | }, 13 | "keywords": [ 14 | "styled", 15 | "native-base", 16 | "styled-system", 17 | "flexbox", 18 | "components", 19 | "ui" 20 | ], 21 | "author": "RhaldKhein", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/rhaldkhein/styled-native/issues" 25 | }, 26 | "homepage": "https://github.com/rhaldkhein/styled-native#readme", 27 | "dependencies": { 28 | "@styled-system/theme-get": "^5.1.0", 29 | "styled-system": "^5.1.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/native.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components/native' 2 | import { Animated } from 'react-native' 3 | import { 4 | compose, 5 | space, 6 | border, 7 | color, 8 | typography, 9 | width, 10 | height 11 | } from 'styled-system' 12 | 13 | const styleText = compose( 14 | space, 15 | color, 16 | typography 17 | ) 18 | 19 | const styleView = compose( 20 | space, 21 | color, 22 | border 23 | ) 24 | 25 | const styleImage = compose( 26 | space, 27 | border, 28 | width, 29 | height 30 | ) 31 | 32 | const Image = styled.Image(styleImage) 33 | 34 | /** 35 | * Animated 36 | */ 37 | 38 | const { ScrollView, FlatList, SectionList } = Animated 39 | 40 | const AnimatedText = styled(Animated.Text)(styleText) 41 | const AnimatedView = styled(Animated.View)(styleView) 42 | const AnimatedImage = styled(Animated.Image)(styleImage) 43 | 44 | export { 45 | Image, 46 | AnimatedText, 47 | AnimatedView, 48 | AnimatedImage, 49 | ScrollView as AnimatedScrollView, 50 | FlatList as AnimatedFlatList, 51 | SectionList as AnimatedSectionList 52 | } 53 | -------------------------------------------------------------------------------- /src/proxy.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Only export commonly used components 3 | */ 4 | 5 | export { 6 | Animated, 7 | ScrollView 8 | } from 'react-native' 9 | 10 | export { 11 | variables, 12 | StyleProvider, 13 | connectStyle, 14 | Drawer, 15 | DatePicker, 16 | Header, 17 | Form, 18 | InputGroup, 19 | Title, 20 | Left, 21 | Right, 22 | Body, 23 | CheckBox, 24 | Radio, 25 | Thumbnail, 26 | Card, 27 | CardItem, 28 | Spinner, 29 | Switch, 30 | Container, 31 | Content, 32 | Footer, 33 | Tab, 34 | Tabs, 35 | FooterTab, 36 | Picker, 37 | List, 38 | ListItem, 39 | Separator, 40 | DeckSwiper, 41 | Item, 42 | Subtitle, 43 | TabContent, 44 | Toast, 45 | ScrollableTab, 46 | ActionSheet, 47 | TabHeading, 48 | TabContainer, 49 | DefaultTabBar, 50 | Segment, 51 | Root, 52 | SwipeRow, 53 | VueNativeBase, 54 | Accordion 55 | 56 | /* 57 | OVERRIDDEN 58 | 59 | Col, 60 | Row, 61 | Grid, 62 | Textarea, 63 | View, 64 | Button, 65 | Icon, 66 | Badge, 67 | Fab, 68 | Text, 69 | H1, 70 | H2, 71 | H3, 72 | Label, 73 | Input 74 | 75 | */ 76 | 77 | } from 'native-base' 78 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | **/.DS_Store 2 | # Logs 3 | logs 4 | *.log 5 | npm-debug.log* 6 | yarn-debug.log* 7 | yarn-error.log* 8 | 9 | # Runtime data 10 | pids 11 | *.pid 12 | *.seed 13 | *.pid.lock 14 | 15 | # Directory for instrumented libs generated by jscoverage/JSCover 16 | lib-cov 17 | 18 | # Coverage directory used by tools like istanbul 19 | coverage 20 | 21 | # nyc test coverage 22 | .nyc_output 23 | 24 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 25 | .grunt 26 | 27 | # Bower dependency directory (https://bower.io/) 28 | bower_components 29 | 30 | # node-waf configuration 31 | .lock-wscript 32 | 33 | # Compiled binary addons (https://nodejs.org/api/addons.html) 34 | build/Release 35 | 36 | # Dependency directories 37 | node_modules/ 38 | jspm_packages/ 39 | 40 | # TypeScript v1 declaration files 41 | typings/ 42 | 43 | # Optional npm cache directory 44 | .npm 45 | 46 | # Optional eslint cache 47 | .eslintcache 48 | 49 | # Optional REPL history 50 | .node_repl_history 51 | 52 | # Output of 'npm pack' 53 | *.tgz 54 | 55 | # Yarn Integrity file 56 | .yarn-integrity 57 | 58 | # dotenv environment variables file 59 | .env 60 | 61 | # next.js build output 62 | .next 63 | -------------------------------------------------------------------------------- /src/base.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components/native' 2 | import * as Base from 'native-base' 3 | import { 4 | system, 5 | compose, 6 | typography, 7 | space, 8 | color, 9 | border, 10 | height 11 | } from 'styled-system' 12 | 13 | const elevation = system({ 14 | prop: 'elevation', 15 | cssProperty: 'elevation', 16 | }) 17 | 18 | const styleText = compose( 19 | space, 20 | color, 21 | typography 22 | ) 23 | 24 | const styleView = compose( 25 | space, 26 | color, 27 | border, 28 | height 29 | ) 30 | 31 | const View = styled(Base.View)(styleView) 32 | const Button = styled(Base.Button)(styleView, elevation) 33 | const Badge = styled(Base.Badge)(styleView) 34 | 35 | const Text = styled(Base.Text)(styleText) 36 | const Label = styled(Base.Label)(styleText) 37 | const Icon = styled(Base.Icon)(styleText) 38 | const Fab = styled(Base.Fab)(styleText) 39 | const H1 = styled(Base.H1)(styleText) 40 | const H2 = styled(Base.H2)(styleText) 41 | const H3 = styled(Base.H3)(styleText) 42 | const Input = styled(Base.Input)(styleText) 43 | const Textarea = styled(Base.Textarea)(styleText) 44 | 45 | Button.defaultProps = { elevation: 0 } 46 | 47 | export { 48 | 49 | View, 50 | Button, 51 | Icon, 52 | Badge, 53 | Fab, 54 | 55 | // Typography 56 | Text, 57 | H1, 58 | H2, 59 | H3, 60 | 61 | // Form 62 | Label, 63 | Input, 64 | Textarea 65 | 66 | } 67 | -------------------------------------------------------------------------------- /src/view.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components/native' 2 | import { View } from './base' 3 | import { AnimatedView } from './native' 4 | import { 5 | compose, 6 | 7 | // Flex Parent 8 | alignItems, 9 | alignContent, 10 | justifyItems, 11 | justifyContent, 12 | flexWrap, 13 | flexDirection, 14 | 15 | // Flex Child 16 | flexGrow, 17 | flexShrink, 18 | flexBasis, 19 | justifySelf, 20 | alignSelf, 21 | order, 22 | 23 | // Others 24 | width, 25 | layout, 26 | position 27 | } from 'styled-system' 28 | 29 | const Flex = styled(View)( 30 | compose( 31 | alignItems, 32 | alignContent, 33 | justifyItems, 34 | justifyContent, 35 | flexWrap, 36 | flexDirection 37 | ) 38 | ) 39 | Flex.defaultProps = { flexDirection: 'row' } 40 | 41 | const Box = styled(View)( 42 | compose( 43 | flexGrow, 44 | flexShrink, 45 | flexBasis, 46 | justifySelf, 47 | alignSelf, 48 | order, 49 | width 50 | ) 51 | ) 52 | 53 | const Area = styled(View)(layout) 54 | const Absolute = styled(View)(position) 55 | Absolute.defaultProps = { position: 'absolute' } 56 | const Relative = styled(View)(position) 57 | Relative.defaultProps = { position: 'relative' } 58 | 59 | const AnimatedArea = styled(AnimatedView)(layout) 60 | const AnimatedAbsolute = styled(AnimatedView)(position) 61 | AnimatedAbsolute.defaultProps = { position: 'absolute' } 62 | const AnimatedRelative = styled(AnimatedView)(position) 63 | AnimatedRelative.defaultProps = { position: 'relative' } 64 | 65 | export { 66 | Flex, 67 | Box, 68 | 69 | Area, 70 | Absolute, 71 | Relative, 72 | 73 | AnimatedArea, 74 | AnimatedAbsolute, 75 | AnimatedRelative 76 | } 77 | -------------------------------------------------------------------------------- /src/hocs/withModal.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import { 3 | Modal, 4 | TouchableWithoutFeedback, 5 | TouchableOpacity, 6 | BackHandler 7 | } from 'react-native' 8 | import { 9 | View, 10 | Flex 11 | } from '../index' 12 | 13 | export default function withModal(Child) { 14 | const Context = React.createContext() 15 | 16 | function CustomModal(props) { 17 | 18 | const [state, setState] = useState(() => { 19 | return { 20 | isShow: false, 21 | show: show => setState(state => ({ ...state, isShow: show })) 22 | } 23 | }) 24 | 25 | return 26 | 27 | 32 | 33 | 34 | state.show(false)} 40 | {...props.modalProps}> 41 | 42 | state.show(false)}> 43 | 48 | 49 | 50 | 51 | 52 | {props.children} 53 | 54 | 55 | } 56 | 57 | function Opener({ children }) { 58 | return 59 | {value => { 60 | return typeof children === 'function' ? 61 | children(value) : 62 | value.show(true)}> 63 | {children} 64 | 65 | }} 66 | 67 | } 68 | 69 | CustomModal.Opener = Opener 70 | return CustomModal 71 | } --------------------------------------------------------------------------------