React Native Styled

React Native lightweight styled components

Installation

Npm:

$ npm install --save @nbottarini/react-native-styled

Yarn:

$ yarn add @nbottarini/react-native-styled

Usage

import { styledPressable } from './index'

const MyApp = () => (
    <Container>
        <TextField/>
        <PrimaryButton title="Login"/>
    </Container>
)

const Container = styled(View, {
    padding: 10,
    backgroundColor: '#FEFEFE'
})

const TextField = styled(TextInput, (props) => ({
    fontSize: 10,
    backgroundColor: props.editable ? '#FFFFFF' : '#CCCCCC',
}))

const PrimaryButton = (props) => {
    return (
        <Pressable onPress={props.onPress}>
            {({ pressed }) => (
                <ButtonContainer pressed={pressed} disabled={props.isDisabled}>
                    <Text>{props.title}</Text>
                </ButtonContainer>
            )}
        </Pressable>
    );
};

// styledPressable allows to override some styles when the prop pressed is true
const ButtonContainer = styledPressable(View, (props) => ({
    backgroundColor: props.disabled ? '#CCCCCC' : '#FFFFFF',
}), {
    backgroundColor: "#F0F0F0"
})