React Native (Relative and Absolute Positioning)

import { StatusBar } from 'expo-status-bar';
import { Dimensions, useWindowDimensions, StyleSheet, Text, View, TouchableWithoutFeedback, TouchableOpacity, TouchableHighlight, Alert, Image, SafeAreaView, Button  } from 'react-native';
import { useDeviceOrientation } from '@react-native-community/hooks';

export default function App() {

  return (
    <View
      style={{
        backgroundColor: "#fff",
        flex: 1,
        flexDirection: "row", // horizontal
        justifyContent: "center", // primary axis
        alignItems: "center", // secondary axis
        alignContent: "center",

        /**
         * Press Ctrl + Space to see for example what values flexDirection can be assigned
         */
    }}
    >

      <View
        style={{
          backgroundColor: "dodgerblue",
          width: 100,
          height: 100,
      }}
      />

      <View
        style={{
          backgroundColor: "gold",
          width: 100,
          height: 100,
          top: 20, //or do bottom: -20
          left: 20, //or do right: -20 basically using top or left etc.. you can move components without effecting other components position because by default position is "relative"
          position: "absolute", // but you can change to "absolute" so components move around relative to its parent view and the layout around it will be affected
      }}
      />

      <View
        style={{
          backgroundColor: "tomato",
          width: 100,
          height: 100
      }}
      />

    </View>
  );
}

const containerStyle = {backgroundColor: "orange"};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'orange'
  },
});