I am relatively new to using Flexbox, Exponent, and React Native, so I'm not entirely sure if I am implementing this correctly. Any assistance you can offer would be greatly appreciated, and I have included a snack below that could serve as a starting point.
On my screen, there is a header at the top that measures 40px in height, and a tab bar at the bottom also measuring 40px tall.
What I envision is a full-width, full-height column between them with rows of content containing charts on the left, and a header (Billing, Budget, Labor) positioned to the right of the chart with varying numbers of data rows below it. These rows consist of a key aligned to the left (Invoiced, Not Invoiced, Total, etc.) and a value aligned to the right (500.00, 250.00, 750.00, etc.).
Since the number of data rows varies (3, 4, 3, etc.), I do not want to manually set the heights of each row for the charts. Additionally, I do not want these rows to expand to the height of the central column but instead provide white space beneath them.
Is there a way to construct this layout so that: 1. Rows do not occupy the full height of the center column and align at the top, leaving empty space below. 2. Charts are aligned to the left next to their respective data. 3. Data values (e.g., 500.00) are right-aligned next to their keys (e.g., Invoiced).
https://i.sstatic.net/9VLbg.png https://i.sstatic.net/BGQ0u.png
Your guidance would be immensely helpful. If possible, including an example using snack.expo.io would be fantastic! The current representation demonstrates how the rows stretch to match the height, resulting in considerable wasted space and no room at the bottom. Moreover, the alignment between the key and values within the data is not ideal, where the key appears on the left while the value is right-aligned.