Fill Flex Container Space with Style

[alex.chmelka]

I'm looking to create a flex container for a side view navigation. The image below is a mockup of the sidebar, with each rectangle being a button. Text was redacted with the black squares for security.

I have created the flex container and have created a style that matches the coloring of the mockup. The issue I'm having is filling the background that the container stretches with a color. Here is my current page with redacted pieces:

My page configuration is the image below. Note that my flex view is set to the left side of the page and header view to the topstrong text:

My problem: I would like the extra space on the left that the flex container view stretches to the size of the page to be filled a custom color. It currently has the default gray that a view uses without a set background color.

My flex view contains just a menu tree component and I have the following setup on the container.

I feel like I'm missing some basic setup option, but I have been going in circles trying to find a solution to this on the forums or the docs. Any help would be appreciated. Thanks.

[cmallonee]

Consider the tall rectangle which is your Docked View.

The root node of your View will span that entire space at all times. The component will only span the space it needs and/or you have defined. So instead of styling the component, you need to style the root node to have the appearance you expect. this could be as simple as setting root.props.style.backgroundColor to have a value of "#000000" if you want a black background.