Двухколоночный макет с flexBox на React Native

Я пытаюсь сделать макет из двух столбцов в React Native из списка элементов. Кажется, что это работает, только если я определяю ширину элементов, я хотел бы определить только процент от родительской ширины (0,5 сделает макет из 2 столбцов, но 0,25 сделает один из 4 столбцов). Можно ли это сделать?

export default class App extends Component {
  render() {
    return (
      <View style = {[styles.container, {width:width}]}>
        <View style = {styles.item}><Text>{'item1'}</Text></View>
        <View style = {styles.item}><Text>{'item2'}</Text></View>
        <View style = {styles.item}><Text>{'item3'}</Text></View>
        <View style = {styles.item}><Text>{'item4'}</Text></View>
        <View style = {styles.item}><Text>{'item4'}</Text></View>
        <View style = {styles.item}><Text>{'item5'}</Text></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  item :{
    flex: 0.5, //why this doesnt work???
    // width: 150, //using fixed item width instead of flex: 0.5 works
    height: 100,
    padding: 10,
    backgroundColor: 'red',
    // flexGrow: 1,
    // flexShrink: 0,
  }
});

Вы можете поиграть с ним здесь: https://snack.expo.io/SyBjQuRxm

Рабочий эквивалент CSS: https://codepen.io/klamping/pen/WvvgBX?editors=110

Очевидно, я мог бы сделать что-то вроде создания контейнера для каждого столбца, но дело не в этом:

render() {
    return (
      <View style = {[styles.container, {width:width}]}>
        <View style = {styles.column1}>
             <View style = {styles.item}><Text>{'item1'}</Text></View>
             <View style = {styles.item}><Text>{'item2'}</Text></View>
             <View style = {styles.item}><Text>{'item3'}</Text></View>
        </View>
        <View style = {styles.column2}>
             <View style = {styles.item}><Text>{'item4'}</Text></View>
             <View style = {styles.item}><Text>{'item4'}</Text></View>
             <View style = {styles.item}><Text>{'item5'}</Text></View>
        </View>
      </View>
    );
  }