Codecademy Logo

Styling Components

Related learning

  • Free course

    Learn React Native

    Build mobile apps with TypeScript and React, using Expo and React Native
    • Intermediate.
      12 hours

Flexbox’s alignItems in React Native

In Flexbox, the alignItems property determines the alignment of items along the cross axis (which runs perpendicular to the main axis set by flexDirection. You’ll often see this used in layout design to center items vertically or align them to one side.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';


const App = () => (
  <View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center'}}>
    <Text>Item 1</Text>
    <Text>Item 2</Text>
    <Text>Item 3</Text>
  </View>
);


export default App;

React Native Styling

In React Native, the style prop provides styling to core components. Its names and properties tend to match how CSS typically works, with the exception that names are written in camel case.

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


const App = () => {
  return (
    <View style={{backgroundColor: 'lightblue', padding: 20}}>
      <Text style={{fontSize: 18, textAlign: 'center'}}>Hello, styled world!</Text>
    </View>
  );
};


export default App;

The StyleSheet API

The StyleSheet API in React Native creates a styling object separate from our components. This allows for cleaner code as stylings become more complex.

Styles are created using StyleSheet.create() and can be applied using the style prop.

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';


const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, World!</Text>
    </View>
  );
};


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});


export default App;

The StyleSheets.create() Method

In React Native, the StyleSheets.create() method sets up styling for components. It allows you to define a JavaScript object that holds multiple styling rules. Components can reference these styles to ensure consistent design and modularity.

import React from 'react';
import { StyleSheet, View, Text } from 'react-native';


const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.header}>BIG TEXT</Text>
      <Text style={styles.body}>small text 1</Text>
      <Text style={styles.body}>small text 2</Text>
    </View>
  );
};


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  header: {
    fontSize: 32,
    fontWeight: 'bold',
    color: '#333333',
    marginBottom: 10,
  },
  body: {
    fontSize: 16,
    color: '#666666',
    marginBottom: 5,
  },
});


export default App;

Arrays and the style prop

The style prop in React Native can take an array, enabling you to combine multiple style objects for a single component.

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


const App = () => {
  return (
    <View style={[styles.dimensions, styles.color]}>
      {/* Our Components Here */}
    </View>
  );
};


const styles = StyleSheet.create({
  dimensions: {
    width: 100,
    height: 100,
  },
  color: {
    backgroundColor: 'red'
  },
});


export default App;

Style Precedence in React Native

In React Native, style precedence plays an important role in styling components. When multiple style objects define the same style property, the rightmost style takes priority and overrides the others. This provides flexibility in styling components by layering styles and modifying only the properties that need to differ from the defaults.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';


export default function App() {
  return (
    <View>
      <Text style={[styles.baseText, styles.overrideText]}>Hello, World!</Text>
    </View>
  );
}


const styles = StyleSheet.create({
  baseText: {
    fontSize: 20,
    color: 'blue',
  },
  overrideText: {
    color: 'red',  // This will override the blue color
  },
});

Dynamic Styles in React Native

In React Native, styles can be applied dynamically using conditional arrays and ternary operators. This technique leverages states or props to conditionally apply style classes, offering flexibility and enhancing user experience.

const DynamicStyleComponent = ({ isActive }) => {
  const [toggle, setToggle] = React.useState(false);


  const styles = StyleSheet.create({
    container: {
      padding: 20,
      backgroundColor: 'lightgray'
    },
    active: {
      backgroundColor: 'blue'
    },
    toggled: {
      borderWidth: 3,
      borderColor: 'red'
    }
  });


  return (
    <View
      style={[
        styles.container,
        isActive && styles.active,
        toggle && styles.toggled
      ]}
      onTouchStart={() => setToggle(!toggle)}
    >
      <Text>Tap to Toggle</Text>
    </View>
  );
};

Flexbox in React Native

React Native’s Flexbox layout system enables developers to create flexible interfaces that can adapt to different screen sizes and orientations. Flexbox automatically distributes space and aligns elements within containers, making it easier to build responsive layouts compared to fixed positioning.

Flexbox’s flexDirection in React Native

In React Native, flexDirection determines how child components are arranged within a Flexbox container. The options are row (horizontal), column (vertical), row-reverse (horizontal, reversed), and column-reverse (vertical, reversed). This property is essential for creating organized and adaptable layouts.

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


export default function FlexDirectionExample() {
  return (
    <View style={{ flex: 1, flexDirection: 'row' }}>
      <View style={{ width: 50, height: 50, backgroundColor: 'powderblue' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'skyblue' }} />
      <View style={{ width: 50, height: 50, backgroundColor: 'steelblue' }} />
    </View>
  );
}

Flexbox’s justifyContent in React Native

The justifyContent property in Flexbox helps arrange items along the main axis. In React Native, it determines the distribution of empty space between and around elements, enhancing layout control.

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';


export default function FlexboxExample() {
  return (
    <View style={styles.container}>
      <Text style={styles.item}>Item 1</Text>
      <Text style={styles.item}>Item 2</Text>
      <Text style={styles.item}>Item 3</Text>
    </View>
  );
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-around', // distribute space equally around items
    alignItems: 'center',
  },
  item: {
    fontSize: 18,
  },
});

Learn more on Codecademy

  • Free course

    Learn React Native

    Build mobile apps with TypeScript and React, using Expo and React Native
    • Intermediate.
      12 hours
Previous
Next