Flatlist absolute positioning row

Question

I am trying to essentially create a 'stack' of rows, where instead of scrolling through items by vertically or horiztonally, it will render all the components on top of one another

My solution was to use absolute positioning, and stacking each component on top of another

only issue is, absolute positioning does not seem to work with FlatList. Here is what I have tried so far, as soon as you use anything with absolute positioning, it renders what seems like nothing..

<FlatList
  data={[
    {key: 'a', color: 'red'},
    {key: 'b', color: 'green'}
  ]}
  renderItem={({item, index}) => (
  <View style={{backgroundColor: item.color,
   position: 'absolute', top: 0, left: 0
  }}>
  <Text>{item.key}</Text>
  </View>
    )}
/>

Answer 1

This may be closer to what you want:

<FlatList
            style={{height:50, position: 'absolute', width: '100%'}}
            data={[
              {key: 'a', color: 'red'},
              {key: 'b', color: 'green'}
            ]}
            renderItem={({item, index}) => (
            <View style={{backgroundColor: item.color,
                height: 50,
                alignItems: 'center',
                justifyContent: 'center'
            }}>
            <Text style={{height: 50}}>{item.key}</Text>
            </View>
              )}
          />