Публикация сообщений в нижнем плоском списке

Question

пример

Мне нужно расположить сообщения снизу вверх, но FlatList не поддерживает позицию

<FlatList
 ListEmptyComponent={<ActivityIndicator style={{marginTop: 20}} size="large" color="gray" />}
 data={DATA}
 renderItem={({ item, index }) => (
   <Message
     key={index}
     text={item.title}
     uri={item.uri}
     name={item.name}
     time={item.time}
     sticker={item.sticker}
     anim={item.anim}
     audio={item.audio}
     link={item.link}
   />
 )}
 keyExtractor={item => item.id}
/>

Answer 1

можно выполнить с помощью CSS в FlatList

style={{flex:1, position: 'absolute', bottom: 0, width:"100%" }}

Отредактировано

 style={{width:"100%", height: "100%", justifyContent:"flex-end"}}

https://snack.expo.io/@jsfit / a130ed

Answer 2

Вы можете обернуть плоский список внутри View и переместить нижнюю часть, как показано ниже. Я поставил условие для стиля, чтобы индикатор активности отображался в центре.

  <View style={DATA.length ? { marginTop: 'auto' } : null}>
      <FlatList
        ListEmptyComponent={
          <ActivityIndicator
            style={{ marginTop: 20 }}
            size="large"
            color="gray"
          />
        }
        data={DATA}
        renderItem={({ item, index }) => (
          <Message
            key={index}
            text={item.title}
            uri={item.uri}
            name={item.name}
            time={item.time}
            sticker={item.sticker}
            anim={item.anim}
            audio={item.audio}
            link={item.link}
          />
        )}
        keyExtractor={(item) => item.id}
      />
    </View>