Codecademy Logo

Styling Components

StyleSheet

StyleSheet is an abstraction that replaces CSS by accepting CSS styling rules using a two-dimensional JavaScript object.

import { StyleSheet } from 'react-native';


const styles = StyleSheet.create({
  paragraph: {
    fontSize: 16,
  },
  label: {
    fontSize: 11,   
    textTransform: 'uppercase'
  }
});


<Text style={styles.paragraph}>My paragraph</Text>
<Text style={styles.label}>My label</Text>

style Property

Components can be styled using the style={} property, which accepts objects as inline-styling, style definitions created by StyleSheet, or an array of objects/definitions to compose styling.

<Text style={styles.paragraph} />
<Text style={{ fontSize: 16 }} />
<Text style={[styles.paragraph, { color: 'red' }]} />

Using StyleSheet Definitions

Splitting styling properties from the render method using StyleSheet definitions makes the rendering method more readable.

// Using inline styling
const AwesomeBox = () => (
  <View style={{ width: 100, height: 100, backgroundColor: 'red' }} />
);


// Using the StyleSheet API
const AwesomeBox = () => (
  <View style={styles.box} />
);
 
const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'red'
  },
});

Dynamic Styling

You can make component styling dynamic by adding JavaScript logic for the style={} prop or providing inline styles to override single properties.

// Applies the `selected` style on top of the `paragraph` style if props.isActive is truthy


function Item(props) {
  return (
    <Text style={[styles.paragraph, props.isActive && styles.selected]} />
  );
}

Flex in React Native

Layouts are defined with Flex-like rules to account for a wide variety of screen sizes. The major difference between Flex on web and Flex in React Native is that a parent element with display: flex is not required.

<View style={{ flexDirection: 'row' }}>
  <View style={{ flex: 1 }} />
  <View style={{ flex: 1 }} />
  <View style={{ flex: 1 }} />
</View>

flexDirection

The flexDirection style property determines the direction and order in which child elements are laid out, which could be row, row-reverse, column, or column-reverse.

<View style={{ flexDirection: 'row' }}>
  <View style={{ flex: 1 }} />
  <View style={{ flex: 1 }} />
  <View style={{ flex: 1 }} />
</View>

justifyContent

The justifyContent style property determines how child elements are positioned in the parent container, which could be center, flex-start, flex-end, space-around, space-between, or space-evenly.

<View style={{ flexDirection: 'row' , justifyContent: 'flex-start' }}>
  <View style={{ flex: 1 }} />
  <View style={{ flex: 1 }} />
  <View style={{ flex: 1 }} />
</View>

Dimensions in React Native

All dimensions are unitless by default, and represent density-independent pixels.

<View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
Previous
Next

Learn more on Codecademy