Lines with two items according to screen size, is it possible?

Question

My intention is to have lines with two items, and these items should have a width according to the screen size, ie screen 500 , I calculate 500/2 - espaços.

It would be something like this.

My code:

const columns = 2;
const margin = vw(1);
const spacing = (columns + 1) / columns * margin;
function vw(percentageWidth) {
  return Dimensions.get('window').width * (percentageWidth / 100);
}

export default class SearchPesquisa extends Component {
  cards () {
    return this.props.produtos.map((item, indice) => {
      return(
        <View key={i} style={styles.cell}>
            <Card>
              <CardItem style={{ height: 280, borderRadius: 4 }}>
              </CardItem>
            </Card>
        </View>
      )
      })
  }
  render() {
    return (
      <View style={styles.container}>
        <ScrollView>
          { this.cards() }
        </ScrollView>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'flex-start'
  },
  cell: {
    width: vw(100) / columns - spacing
  }
});

Explaining:

• flexDirection:'row' display direction of my items.
• columns number of columns to be displayed.
• vw margin percentage calculation, in the example vw(1) will be 1 percent
• spacing only one space.

My example is: Viewport: ~411, Margin: ~4.11, Spacing: ~6.17, Widcard:199.54

Problem: Each card is staying in a row.

Answer 1

My problem is related in this part:

     <View style={styles.container}>
        <ScrollView>
          { this.cards() }
        </ScrollView>
      </View>

I modified it to:

      <ScrollView>
        <View style={styles.container}>
          { this.cards() }
        </View>
      </ScrollView>

See that in the first code the direct son of container is a ScroolView and only has it, if another element were added, this would stand aside due to the direction of alignment defined as row.

Already the second element I have several View dynamically made according to the items in my array. As I have a fixed value for each View, the next View would not fit on the same Row, thus forcing a break.

Answer 2

class Teste extends Component {
....
<View style={{ flex: 1 }}>
    <ScrollView style={{
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignContent: 'center'
    }}>
    {_renderExample()}
    </ScrollView>

</View>
}

Answer 3

Testing using 50%:

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'flex-start'
  },
  cell: {
    width: 50%
  }
});