I am currently working with react-native and I am trying to create a layout similar to the image provided below. I want the two divs to be equal in size until the right one ends, at which point the left one should take up the entire container. I initially thought I could achieve this using grid, but unfortunately react-native does not support grid. Is there an alternative method I can use to achieve this layout? (please excuse my lack of drawing skills)https://i.sstatic.net/s2ED8.png
Below is the code I am working with. I want the english view to take up the full width once the hebrew view is complete.
<ScrollView>
<View style={styles.textContainer}>
<View style={{flex: 1}}>
<Text>
{props.english}
</Text>
</View>
<View style={{flex: 1}}>
<Text>
{props.hebrew}
</Text>
</View>
</View>
</ScrollView>