├── .gitignore ├── yarn.lock ├── package.json ├── index.js ├── LICENSE └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | lodash.some@^4.6.0: 6 | version "4.6.0" 7 | resolved "https://registry.yarnpkg.com/lodash.some/-/lodash.some-4.6.0.tgz#1bb9f314ef6b8baded13b549169b2a945eb68e4d" 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "styled-native-polished", 3 | "version": "2.1.0", 4 | "description": "Styled Component helpers for React Native", 5 | "main": "index.js", 6 | "repository": "git@github.com:Astrocoders/styled-native-polished.git", 7 | "author": "Gabriel R. Abreu ", 8 | "license": "MIT", 9 | "peerDependencies": { 10 | "react-native": "^0.47.1", 11 | "styled-components": "^2.1.2" 12 | }, 13 | "dependencies": { 14 | "lodash.some": "^4.6.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | import { Dimensions, Platform } from 'react-native' 2 | import { css } from 'styled-components/native' 3 | import some from 'lodash.some' 4 | 5 | const { width: WINDOW_WIDTH } = Dimensions.get('window') 6 | 7 | export const media = ({ maxWidth, minWidth }) => (...args) => { 8 | const conditions = [ 9 | maxWidth && WINDOW_WIDTH < maxWidth, 10 | minWidth && WINDOW_WIDTH > minWidth, 11 | ] 12 | 13 | return some(conditions, Boolean) ? css(...args) : {} 14 | } 15 | 16 | export const ios = (...args) => Platform.select({ ios: css(...args), android: {} }) 17 | 18 | export const android = (...args) => Platform.select({ android: css(...args), ios: {} }) 19 | 20 | export const fullAlign = () => css` 21 | align-items: center; 22 | justify-content: center; 23 | ` 24 | 25 | export const roundedWrapper = size => css` 26 | align-items: center; 27 | justify-content: center; 28 | height: ${size}; 29 | width: ${size}; 30 | border-radius: ${size / 2}; 31 | ` 32 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # styled-native-polished 2 | Styled Components helpers for React Native 3 | 4 | ## Install 5 | ``` 6 | yarn add styled-native-polished styled-component 7 | ``` 8 | 9 | ## Setup 10 | You provide all the methods using the theme provider 11 | ```js 12 | // index.js 13 | 14 | ... 15 | import * as nativePolished from 'styled-native-polished' 16 | import theme './theme' 17 | 18 | 19 | 20 | 21 | ``` 22 | 23 | Or import as necessary with the named imports 24 | ``` 25 | import { ios } from 'styled-native-polished' 26 | ``` 27 | 28 | # Helpers 29 | ## media 30 | ```js 31 | import { media } from 'styled-native-polished' 32 | 33 | const ItemDetails = styled.View` 34 | ${media({ minWidth: 500 })` 35 | width: 100%; 36 | `}; 37 | ${media({ maxWidth: 500 })` 38 | width: 60%; 39 | `}; 40 | ` 41 | ``` 42 | 43 | ## ios 44 | iOS specific styles 45 | ```js 46 | import { ios } from 'styled-native-polished' 47 | 48 | const YouExpectedAnElementButItWasMeDioBtn = styled.TouchableOpacity` 49 | border-color: blue; 50 | ${ios`border-color: red`}; 51 | ` 52 | ``` 53 | 54 | ## android 55 | Android specific styles 56 | ```js 57 | import { android } from 'styled-native-polished' 58 | 59 | const YouExpectedAnElementButItWasMeDioBtn = styled.TouchableOpacity` 60 | border-color: blue; 61 | ${android`border-color: red`}; 62 | ` 63 | ``` 64 | 65 | ## fullAlign 66 | Flex full centralize parent items 67 | ```js 68 | import { fullAlign } from 'styled-native-polished' 69 | 70 | const Wrapper = styled.View` 71 | border-color: blue; 72 | ${fullAlign()}; 73 | ` 74 | ``` 75 | 76 | ## roundedWrapper(size) 77 | Helps to create a completely rounded view 78 | ```js 79 | import { roundedWrapper } from 'styled-native-polished' 80 | 81 | const RoundedButton = styled.TouchableOpacity` 82 | border-color: blue; 83 | ${roundedWrapper('40px')}; 84 | ` 85 | ``` 86 | --------------------------------------------------------------------------------