Styled Component in React-Native

styled.js

// @flow

import * as React from 'react'
import { View, Text, ScrollView, StyleSheet } from 'react-native'

const styled = (Component: React.ComponentType<any>) => (style: any = {}) => {
  const container = StyleSheet.create({ container: style }).container
  return (props: any = {}) => {
    const { style, ...rest } = props
    return <Component style={[container, style]} {...rest} />
  }
}

styled.View = styled(View)
styled.Text = styled(Text)
styled.ScrollView = styled(ScrollView)

export default styled

/**
 example of using this
 
 const MyView = styled.View({
  flex: 1,
  backgroundColor: 'red'
})

<MyView />

or 

const StyledCustomComponent = styled(MyCustom)({
  flex: 1,
  backgroundColor: 'red'
})

*/