React Native StyleSheet

This writing provides an overview of React Native StyleSheet and styling. 

1. StyleSheet

• The StyleSheet in React Native abstracts CSS styling by using JavaScript objects to define styles.
• Example with Inline Styling:

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

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

• Example using StyleSheet:

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

const AwesomeBox = () => (
  <View style={styles.box} />
);

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

 

2. Dynamic Styling

• Dynamic styling allows the style of a component to change based on state or props.
• Example with Dynamic Styling: Red box becomes blue when being pressed.

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

const App = () => (
  <View style={styles.layout}>
    <Pressable>
      {({ pressed }) => <Box pressed={pressed} />}
    </Pressable>
  </View>
);

const Box = ({ pressed }) => (
  <View style={[styles.box, pressed && { backgroundColor: 'blue' }]} />
);

const styles = StyleSheet.create({
  layout: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'red'
  },
});

3. Flexbox in React Native

• React Native uses a flexbox layout system similar to CSS, but with differences in default behavior and implementation.
• Example using Flexbox:

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

const App = () => (
  <View style={styles.layout}>
    <View style={[styles.box, { backgroundColor: 'red' }]} />
    <View style={[styles.box, { backgroundColor: 'green' }]} />
    <View style={[styles.box, { backgroundColor: 'blue' }]} />
  </View>
);

const MAX_WIDTH = Dimensions.get('window').width;
const MAX_HEIGHT = Dimensions.get('window').height;

const styles = StyleSheet.create({
  layout: {
    flex: 1,
    backgroundColor: '#e5e5e5',
  },
  box: {
    flex: 1,
    backgroundColor: 'black'
  },
});

4. Flex Direction

• The default flex direction in React Native is column, meaning elements are arranged vertically.

1. row renders child elements from left to right, or horizontally.
2. row-reverse renders from right to left, or reversed horizontally.
3. column renders from top to bottom, or vertical.
4. column-reverse renders from bottom to top, or reversed vertically.

• Example with Different Flex Directions:

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

const App = () => (
  <View style={styles.layout}>
    <View style={[styles.box, { backgroundColor: 'red' }]} />
    <View style={[styles.box, { backgroundColor: 'green' }]} />
    <View style={[styles.box, { backgroundColor: 'blue' }]} />
  </View>
);

const styles = StyleSheet.create({
  layout: {
    flexDirection: 'row-reverse',
    flex: 1,
    backgroundColor: '#e5e5e5',
  },
  box: {
    flex: 1,
    backgroundColor: 'black',
  },
});

5. Justify Content

• The justifyContent property manages the distribution of space between and around child elements along the main axis of the container.

1. center renders child elements within the center of our parent flexbox.
2. flex-start renders at the start of our parent flexbox.
3. flex-end renders at the end.
4. space-around renders child elements with remaining space around these elements.
5. space-between renders child elements with remaining space between the elements, without space at the start or end.
6. space-evenly renders child elements with remaining space evenly divided, including space at the start and end.

• Example using Justify Content:

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

const App = () => (
  <View style={styles.layout}>
    <View style={[styles.box, { backgroundColor: 'red' }]} />
    <View style={[styles.box, { backgroundColor: 'green' }]} />
    <View style={[styles.box, { backgroundColor: 'blue' }]} />
  </View>
);

const styles = StyleSheet.create({
  layout: {
    flex: 1,
    justifyContent: 'space-evenly',
    backgroundColor: '#e5e5e5',
  },
  box: {
    backgroundColor: 'black',
    height: 100
  },
});

6. Dimensions in React Native

• In React Native, dimensions are typically specified in density-independent pixels (dp) to ensure consistency across devices with different screen densities.
• A dp is equal to one physical pixel on a screen with a density of 160.
• 100dp is equal to about 1.5cm
• For detail, refer to: https://m2.material.io/design/layout/pixel-density.html#pixel-density-on-android
• Example specifying Dimensions:

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