styled-native-polished

Styled Components helpers for React Native

Install

yarn add styled-native-polished styled-component

Setup

You provide all the methods using the theme provider

// index.js

...
import * as nativePolished from 'styled-native-polished'
import theme './theme'

<ThemeProvider theme={{ ...nativePolished, ...theme}}>
  <App />
</ThemeProvider>

Or import as necessary with the named imports

import { ios } from 'styled-native-polished'

Helpers

media

import { media } from 'styled-native-polished'

const ItemDetails = styled.View`
 ${media({ minWidth: 500 })`
   width: 100%;
 `};
  ${media({ maxWidth: 500 })`
   width: 60%;
 `};
`

ios

iOS specific styles

import { ios } from 'styled-native-polished'

const YouExpectedAnElementButItWasMeDioBtn = styled.TouchableOpacity`
 border-color: blue;
 ${ios`border-color: red`};
`

android

Android specific styles

import { android } from 'styled-native-polished'

const YouExpectedAnElementButItWasMeDioBtn = styled.TouchableOpacity`
 border-color: blue;
 ${android`border-color: red`};
`

fullAlign

Flex full centralize parent items

import { fullAlign } from 'styled-native-polished'

const Wrapper = styled.View`
 border-color: blue;
 ${fullAlign()};
`

roundedWrapper(size)

Helps to create a completely rounded view

import { roundedWrapper } from 'styled-native-polished'

const RoundedButton = styled.TouchableOpacity`
 border-color: blue;
 ${roundedWrapper('40px')};
`