Add functionality to styled-components
npm install styled-native-kitThis is a base kit for styled-components that provides
- Property shortcuts for styling
- Commonly used layout components
- Commonly used layout mixins
1. If you don't have styled-components installed run npm i styled-components
or npm i styled-components && npm i -D @types/styled-components if you are using typescript.
2. npm i styled-native-kit
---
SEE PROPS
SEE PROPS
``css`
justify-content: center;
align-items: center;
`css`
flex: 1;
justify-content: center;
align-items: center;
`css`
flex-direction: row;
justify-content: center;
`css`
align-items: flex-end;
SEE PROPS
SEE PROPS
`css`
${cssKit.circle}
${cssKit.centered}
`css`
${cssKit.circle}
${cssKit.centered}
overflow: hidden;
SEE PROPS
`css`
justify-content: center;
align-items: center;
`css`
position: absolute;
bottom: 0;
left: 0;
right: 0;
`css`
position: absolute;
top: 0;
left: 0;
right: 0;
`css`
flex: 1;
`css`
height: ${Dimensions.get('screen').height};
width: ${Dimensions.get('screen').width};
`css`
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
ViewKitProps are available to all View based components
TextKitProps are available to all Text based components
`typescript
import { TextProps, ViewProps } from 'react-native'
interface BaseProps {
marginTop?: number
marginBottom?: number
zIndex?: number
color?: string
verticalMargin?: number
horizontalMargin?: number
}
interface TextKitProps extends BaseProps, TextProps {
centered?: boolean
capitalize?: boolean
alignLeft?: boolean
alignRight?: boolean
uppercase?: boolean
lowercase?: boolean
fontWeight?: number
fontSize?: number
}
interface ViewKitProps extends BaseProps, ViewProps {
width?: number
height?: number
padding?: number
margin?: number
marginLeft?: number
marginRight?: number
relative?: boolean
absolute?: boolean
overflowHidden?: boolean
}
interface FlexRowProps extends ViewKitProps {
spaceBetween?: boolean
spaceAround?: boolean
spaceEvenly?: boolean
centered?: boolean
}
interface CircleViewProps extends ViewKitProps {
size: number
}
interface WhitespaceProps extends ViewKitProps {
space: number
}
interface SpacingProps extends ViewKitProps {
multiplier?: number
base?: number
horizontal?: boolean
}
`
`typescript
const centered = css
justify-content: center;
align-items: center;
const screenHeight = css
height: ${Dimensions.get('screen').height};
const screenWidth = css
height: ${Dimensions.get('screen').width};
const screenSize = css
${screenHeight};
${screenWidth};
const topAbsolute = css
position: absolute;
top: 0;
left: 0;
right: 0;
const bottomAbsolute = css
position: absolute;
bottom: 0;
left: 0;
right: 0;
const overlay = css
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
const circle = css
height: ${(props: CircleViewProps) => props.size || 0};
width: ${(props: CircleViewProps) => props.size || 0};
border-radius: ${(props: CircleViewProps) => props.size / 2 || 0};``