React Native - keep the middle child centered with variable-width children on either side?

Question

This is my desired outcome:

I want the green and blue boxes to always be the same length, such that the red box is always centered. The purple box is variable width, based on it's children. The yellow box always stays the same.

At the same time, I would like the red box to grow as big as possible. The centered text may need truncation, and I'd like to use as much space as I can to fit the text the best it can.

I've tried about a million combinations of flex, flexGrow, flexShrink, flexBasis - unfortunately nothing is working. I reached out to a long-time programmer friend of mine, he seems to think this is impossible with pure flexboxes.

Here's my code:

import React from "react";
import { StyleSheet, View } from "react-native";


function App() {
  return (
    <View style={styles.app}>
      <View style={styles.container}>

        <View style={styles.leftControlWrapper}>
          <View style={styles.leftChild} />
        </View>

        <View style={styles.middle} />

        <View style={styles.rightControlWrapper}>
          <View style={styles.rightChild} />
        </View>
        
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  app: {
    marginHorizontal: "auto",
    maxWidth: 500
  },
  container: {
    display: "flex",
    flexDirection: "row",
    width: 500,
    height: 100,
    backgroundColor: "red",
  },
  leftControlWrapper: {
    display: "flex",
    justifyContent: "center",
    flexShrink: 1,
    alignItems: "flex-start",
    backgroundColor: "green",
  },
  leftChild: {
    width: 150,
    height: 75,
    marginHorizontal: 10,
    backgroundColor: "purple",
  },
  middle: {
    backgroundColor: "red",
    flexGrow: 1,
    flexShrink: 1,
  },
  rightControlWrapper: {
    display: "flex",
    justifyContent: "center",
    flexShrink: 1,
    alignItems: "flex-end",
    backgroundColor: "blue",
  },
  rightChild: {
    width: 100,
    height: 75,
    marginHorizontal: 10,
    backgroundColor: "yellow",
  },
});

export default App;

Here is the result. What I need is some combination of flexGrow/flexShrink to ensure the green and blue boxes are the same size. Like I said, I'm not even sure if this is possible.

Thanks so much in advance to anyone that knows the solution to this!