picture

Harpreet Singh

React Native Component Styling

30 Sep 2017

Unlike web apps React Native doesn’t have universal styling that is specified via a css. React solves it by asking developers to marry the styling within the component file. As a developer, I found this very convenient to work with - I knew exactly what styling I had to bring into my component. That said, I would expect this to be a challenge working with a designer requiring a constant back and forth. Here is an example of a component that I put together.

Pre-Styling

React-Native-Component-Style-1

Post-Styling

React-Native-Component-Style-2

Code

import React from 'react';
import { View } from 'react-native';

const Card = (props) => {
    return (
        <View style={styles.containerStyle}>
            {props.children}
        </View>
    );
};

const styles = {
    containerStyle: {
        borderWidth: 1,
        borderRadius: 2,
        borderColor: '#ddd',
        borderBottomWidth: 0,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.1,
        shadowRadius: 2,
        elevation: 1,
        marginLeft: 5,
        marginRight: 5,
        marginTop: 10

    }
};

export default Card;