Skip to content

Instantly share code, notes, and snippets.

@statianzo

statianzo/Styled.js

Forked from ssomnoremac/Styled.js
Created April 9, 2017 21:32
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save statianzo/a6b51e5b1768cd63892950af6314c03a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save statianzo/a6b51e5b1768cd63892950af6314c03a to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @ssomnoremac ssomnoremac revised this gist Mar 23, 2017. 1 changed file with 12 additions and 5 deletions.
    17 changes: 12 additions & 5 deletions Styled.js
    View file
    Original file line number Diff line number Diff line change
    @@ -14,11 +14,18 @@ import {

    let Styled = {}

    const StyledComponent = (Component) => (styles) => (props) => (
    <Component style={[styles, props.styles]} {...props}>
    {props.children}
    </Component>
    );
    const StyledComponent = (Component) => (styles) => (props) => {
    const {
    styles: inlineStyles,
    children,
    ...otherProps,
    } = props
    return(
    <Component style={[styles, inlineStyles]} {...otherProps}>
    {children}
    </Component>
    )
    };

    Styled.View = StyledComponent(View)
    Styled.Image = StyledComponent(Image)
  2. @ssomnoremac ssomnoremac revised this gist Mar 23, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Styled.js
    View file
    Original file line number Diff line number Diff line change
    @@ -15,7 +15,7 @@ import {
    let Styled = {}

    const StyledComponent = (Component) => (styles) => (props) => (
    <Component style={styles} {...props}>
    <Component style={[styles, props.styles]} {...props}>
    {props.children}
    </Component>
    );
  3. @ssomnoremac ssomnoremac created this gist Mar 23, 2017.
    33 changes: 33 additions & 0 deletions Styled.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,33 @@
    import React from 'react';

    import {
    View,
    Image,
    ListView,
    ScrollView,
    Text,
    TouchableHighlight,
    TouchableNativeFeedback,
    TouchableOpacity,
    TouchableWithoutFeedback,
    } from 'react-native'

    let Styled = {}

    const StyledComponent = (Component) => (styles) => (props) => (
    <Component style={styles} {...props}>
    {props.children}
    </Component>
    );

    Styled.View = StyledComponent(View)
    Styled.Image = StyledComponent(Image)
    Styled.ListView = StyledComponent(ListView)
    Styled.ScrollView = StyledComponent(ScrollView)
    Styled.Text = StyledComponent(Text)
    Styled.TouchableHighlight = StyledComponent(TouchableHighlight)
    Styled.TouchableNativeFeedback = StyledComponent(TouchableNativeFeedback)
    Styled.TouchableOpacity = StyledComponent(TouchableOpacity)
    Styled.TouchableWithoutFeedback = StyledComponent(TouchableWithoutFeedback)

    export default Styled