React Native (flexBasis, flexGrow, flexShrink)

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",
          //flexBasis: 100, // can be equivalent to width or height
          flexShrink: 1,
          width: 300,
          height: 100,
      }}
      />

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

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

    </View>
  );
}

const containerStyle = {backgroundColor: "orange"};

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