How to align my buttons to the right in react native flexbox

Question

I come from the SwiftUI world and as a beginner to React Native I'm trying to learn flexbox. The current problem that I'm facing is that I don't know how to align/place my two buttons 'on/off' to the right of my yellow rectangle. I want my app to look like this: How it looks right now: I will show my whole code just in case you need it:

import { Button, StyleSheet, Text, View } from "react-native"
import { Image } from "react-native"

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.houseAndHeaderView}>
        <Image
          source={require("../lab3/assets/house.png")}
          style={styles.imgHouse}
        />
        <Text style={styles.txtSmartHome}>SmartHome</Text>
      </View>
      <Text style={styles.txtRooms}>Rooms</Text>
      <View style={styles.imagesView}>
        <View style={styles.rectangleView}>
          <Image
            source={require("../lab3/assets/living-room.png")}
            style={styles.imgLivingRoom}
          />
          <Text style={styles.txtImage}>Living Room</Text>
        </View>
        <View style={styles.rectangleView}>
          <Image
            source={require("../lab3/assets/bed.png")}
            style={styles.imgBed}
          />
          <Text style={styles.txtImage}>Bedroom</Text>
        </View>

        <View style={styles.rectangleView}>
          <Image
            source={require("../lab3/assets/kitchen.png")}
            style={styles.imgKitchen}
          />
          <Text style={styles.txtImage}>Kitchen</Text>
        </View>
      </View>
      <Text style={styles.txtDevices}>Devices</Text>
      <View style={styles.threeYellowBoxesView}>
        <View style={styles.yellowBoxView}>
          <View style={styles.smallRectangle} />
          <Text style={styles.txtNextToSmallRectangle}>Living Room Lamp</Text>
          <View style={styles.onOrOffButtonsView}> // These are the buttons I wanna place to the right side
            <Button title="On" />
            <Button title="Off" />
          </View>
        </View>
        <View style={styles.yellowBoxView}>
          <View style={styles.smallRectangle} />
          <Text style={styles.txtNextToSmallRectangle}>Heater</Text>
          <View style={styles.onOrOffButtonsView}>
            <Button title="On" />
            <Button title="Off" />
          </View>
        </View>
        <View style={styles.yellowBoxView}>
          <View style={styles.smallRectangle} />
          <Text style={styles.txtNextToSmallRectangle}>TV</Text>
          <View style={styles.onOrOffButtonsView}>
            <Button title="On" />
            <Button title="Off" />
          </View>
        </View>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  houseAndHeaderView: {
    justifyContent: "flex-start",
    flexDirection: "row",
    marginTop: 40,
    marginLeft: 20,
  },
  imgHouse: {
    height: 60,
    width: 60,
  },
  txtSmartHome: {
    textAlign: "center",
    alignSelf: "center",
    paddingLeft: 25,
    color: "#28a183",
    fontWeight: "800",
    fontSize: 18,
  },
  txtRooms: {
    fontWeight: "bold",
    fontSize: 24,
    paddingLeft: 20,
    marginTop: 20,
  },
  imagesView: {
    flexDirection: "row",
    justifyContent: "space-evenly",
    marginTop: 10,
  },
  imgLivingRoom: {
    height: 80,
    width: 80,
    alignSelf: "center",
    marginTop: 10,
  },
  imgBed: {
    height: 80,
    width: 80,
    alignSelf: "center",
    marginTop: 10,
  },
  imgKitchen: {
    height: 80,
    width: 80,
    alignSelf: "center",
    marginTop: 10,
  },
  txtImage: {
    textAlign: "center",
    paddingTop: 10,
    fontWeight: "600",
  },
  rectangleView: {
    backgroundColor: "#28a183",
    width: 110,
    height: 120,
  },
  txtDevices: {
    fontWeight: "bold",
    fontSize: 24,
    paddingLeft: 20,
    marginTop: 20,
  },
  threeYellowBoxesView: {
    flexDirection: "column",
    justifyContent: "center",
  },
  yellowBoxView: {
    backgroundColor: "#e6e650",
    height: 80,
    width: "80%",
    marginTop: 10,
    alignSelf: "center",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "flex-start",
  },
  smallRectangle: {
    height: 20,
    width: 20,
    backgroundColor: "red",
    marginLeft: 10,
  },
  txtNextToSmallRectangle: {
    fontWeight: "500",
    marginLeft: 10,
  },
  onOrOffButtonsView: {
    backgroundColor: "white",
    justifyContent: "flex-end",
  },
})

Sorry if it looks like a mess, and also, sorry for any bad name choices.

What I did to solve my problem is that I basically tried all different flexbox properties for my onOrOffButtonsView like this:

 onOrOffButtonsView: {
    backgroundColor: "white",
    justifyContent: "flex-end",
  //  alignContent: 'flex-end',
   // alignItems: 'flex-end',
   // alignSelf: 'flex-end',
  
  },

None of these didn't really do anything. I know that I can use margin or padding but is it recommended to do so? From what I've learned it is only optional to use margin/padding only for small margins if I want to keep my layout responsive. Please, wether if you can solve the problem or not, feel free to give me more tips!

Answer 1

For your use case, I think setting the left margin to auto might be the best fit here:

onOrOffButtonsView: {
  backgroundColor: "white",
  marginLeft: 'auto'
}

This question/answer gives a great breakdown of all of the possible ways to accomplish this effect in React Native