Code Quiz

Flexbox Row Layout Bug

Spot why two boxes stack vertically instead of sitting side by side in React Native.

Codejavascript

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

export default function Row() {
  return (
    <View style={styles.container}>
      <View style={styles.box}><Text>A</Text></View>
      <View style={styles.box}><Text>B</Text></View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'space-between',
  },
  box: {
    width: 80,
    height: 80,
    backgroundColor: 'tomato',
  },
});

The developer wants boxes A and B side by side horizontally, but they stack vertically. What is the bug?

Next →Default Flex Direction in React Native