I try to implement a picker and make him visible only in an certain area of an box. I added an style with width and height to my picker and I expected the picker will appear in this box. The picker gets rendered completely different. How can I render the picker inside of the box which I define in my style attribute for the picker?

Here is my implementation:

Imports

import React, { useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import { Picker } from "@react-native-picker/picker";

Function

const LandingPage = () => {
  const [selectedValue, setSelectedValue] = useState("10 rounds");
  return (
    <View style={[styles.styleGeneral, {}]}>
      <View style={[styles.styleStandardOne]}>...Some view...</View>
      <View style={[styles.styleForPicker]}>
        <Text style={{ fontSize: 30 }}>Rounds</Text>
        <Picker
          selectedValue={selectedValue}
          style={{ height: 100, width: 100, backgroundColor: "blue" }}
          onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
        >
          <Picker.Item label="red" value="0"></Picker.Item>
          <Picker.Item label="blue" value="1"></Picker.Item>
        </Picker>
      </View>
      <View style={[styles.styleStandardTwo]}>...Some view...</View>
      <View style={[styles.styleStandardTwo]}>...Some view...</View>
      <View style={[styles.styleStandardTwo]}>...Some view...</View>
    </View>
  );
};

Styles

const styles = StyleSheet.create({
  styleGeneral: {
    flex: 1,
    padding: 20,
    flexDirection: "column",
    margin: 0,
    padding: 0,
  },

  styleForPicker: {
    backgroundColor: "yellow",
    flex: 3,
  },

  styleStandardOne: {
    backgroundColor: "red",
    flex: 1.5,
    justifyContent: "center",
  },

  styleStandardTwo: {
    backgroundColor: "red",
    justifyContent: "center",
    alignItems: "center",
    flex: 3,
  },
});