-2

I'm using react-native and want to make a layout that looks like the image below, where the two divs are equal size until the right one ends, where then the left takes up te whole container. I thought I may be able to do this in grid, but react-native doesn't support grid so I can't use that. Is there another way I can accomplish this?(sorry for the sloppy drawing skills)enter image description here

Here is the code in question, I want the english view to take up the whole width once the hebrew view is finished.

<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>
BFP
  • 124
  • 1
  • 9

1 Answers1

0

An option would be to use flexbox.

import * as React from 'react';
import { Text, View } from 'react-native';

export default function App() {
  return (
    <View style={{flex: 1}}>
    <View style={{ flexDirection: 'row'}}>
      <View style={{flex:1, backgroundColor: 'red'}}>
      </View>
      <View style={{flex:1, backgroundColor: 'blue'}}>
        <Text>Suspendisse sed consequat mi. Ut commodo felis nec venenatis consectetur. Integer fringilla ipsum at magna iaculis, nec sollicitudin nunc mollis. Fusce eu vehicula nunc. Sed lorem est, viverra quis condimentum vel, volutpat vitae diam. </Text>
      </View>
    </View>
    <View style={{ flexDirection: 'row', flex: 1}}>
      <View style={{flex:1, backgroundColor: 'red'}}>
      </View>
    </View>
    </View>
  );
}

Snack

ksav
  • 20,015
  • 6
  • 46
  • 66
  • This won't work, since they are three different views. I need two views, but one takes up the full width after the other finishs – BFP Apr 12 '21 at 03:09