How can I not have have background color extend the full container?

Question

As you can see in the image below there is a header component that has a back arrow along with a name. I've applied flex: 1 to the arrow container and flex-start & flex-end to the arrow and name containers respectively.

This does what I want it to. The the arrow is on the left side, while the name is on the right side, but when I try to give the arrow container a background it stretches the whole width (I think because I have it a property of flex: 1).

Is there anyway to retain this setup (arrow on the left, name on the right), while only restricting the background around the arrow and not the whole width?

Image:

Code:

import React from "react";
import {
  StyleSheet,
  SafeAreaView,
  View,
  Dimensions,
  ImageBackground,
  TouchableOpacity,
  Text,
} from "react-native";
import Status from "./Status";
import { AntDesign } from "@expo/vector-icons";

const ImageContainer = ({ locationName, imgUrl, status, navigation }) => {
  return (
    <ImageBackground source={{ uri: imgUrl }} style={styles.image}>
      <SafeAreaView style={styles.headerContainer}>
        <View style={styles.arrowContainer}>
          <TouchableOpacity onPress={() => navigation.navigate("HomeScreen")}>
            <AntDesign name="arrowleft" size={35} color="white" />
          </TouchableOpacity>
        </View>

        <View style={styles.nameContainer}>
          <Text style={styles.text}>{locationName}</Text>
        </View>
      </SafeAreaView>

      <Status status={status} />
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  image: {
    height: Dimensions.get("window").height / 3,
    width: "100%",
  },

  headerContainer: {
    flexDirection: "row",
    alignItems: "center",
  },

  arrowContainer: {
    flex: 1,
    marginLeft: 10,
    padding: 2,
    justifyContent: "flex-start",
    backgroundColor: "rgba(0, 0, 0, 0.8)",
    borderRadius: 20,
  },

  nameContainer: {
    marginRight: 10,
    paddingTop: 5,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 5,
    justifyContent: "flex-end",
    backgroundColor: "rgba(0, 0, 0, 0.8)",
    borderRadius: 20,
  },

  text: {
    color: "white",
    fontSize: 25,
  },
});

export default ImageContainer;

Answer 1

TL;DR: See the working codesandbox I have created for this example

You can achieve the same effect by changing to justify-content: space-between and you don't need to declare the arrow containers as flex. You need one container div just like:

<div class="container">
  <div class="lefty">
     left input
  </div>
  <div class="righty">
    right input
  </div>
</div>

and you need to give the container a display:flex; justify-content:space-between;

Answer 2

I would suggest giving the following properties to the wrapping container flex: 1; + justifyContent: 'space-between'; + flexDirection: 'row';

So I believe this would give you the desired look:

import React from "react";
import {
  StyleSheet,
  SafeAreaView,
  View,
  Dimensions,
  ImageBackground,
  TouchableOpacity,
  Text,
} from "react-native";
import Status from "./Status";
import { AntDesign } from "@expo/vector-icons";

const ImageContainer = ({ locationName, imgUrl, status, navigation }) => {
  return (
    <ImageBackground source={{ uri: imgUrl }} style={styles.image}>
      <SafeAreaView style={styles.headerContainer}>
        <View style={styles.arrowContainer}>
          <TouchableOpacity onPress={() => navigation.navigate("HomeScreen")}>
            <AntDesign name="arrowleft" size={35} color="white" />
          </TouchableOpacity>
        </View>

        <View style={styles.nameContainer}>
          <Text style={styles.text}>{locationName}</Text>
        </View>
      </SafeAreaView>

      <Status status={status} />
    </ImageBackground>
  );
};

const styles = StyleSheet.create({
  image: {
    height: Dimensions.get("window").height / 3,
    width: "100%",
  },

  headerContainer: {
    flex: 1,
    justifyContent: "space-between",
    flexDirection: "row",
    alignItems: "center",
  },
  
  arrowContainer: {
    marginLeft: 10,
    padding: 2,
    backgroundColor: "rgba(0, 0, 0, 0.8)",
    borderRadius: 20,
  },

  nameContainer: {
    marginRight: 10,
    paddingTop: 5,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 5,
    backgroundColor: "rgba(0, 0, 0, 0.8)",
    borderRadius: 20,
  },

  text: {
    color: "white",
    fontSize: 25,
  },
});

export default ImageContainer;