Który element ma się pokazywać jako pierwszy w FlatList?

Cześć,

używam FlatList w react native i potrzebuje określić przy renderowaniu widoku który element ma się pokazywać jako pierwszy.

Korzystam z wariantu horyzontalnego gdzie jeden element zajmuje całą szerokość ekranu.

Dowiedziałem się, że żeby to zrobić potrzebuje ustawić getItemLayout oraz initialScrollIndex.

Wszystko mi działa jeżeli robię to na liście która domyślnie ma już w sobie elementy (czyli bez żadnego API).

Problem pojawia się jak te elementy wyciągam z API i dopiero trafiają do tej listy po jakimś czasie.

Próbowałem np. robić ifa, że jak są pobrane elementy z API, to dopiero wtedy renderuj listę, ale nie działa.

Generalnie brak mi już pomysłów. Może ktoś robił coś podobnego albo widzi gdzie robie błąd ?

const items: MyItem[] = [];

export const MyScreen = () => {


useFocusEffect(
  React.useCallback(() => {

    getData();
    
  }
);

const getData = () => {

  axios.get('/getMyItems').then(response => {

      response.data.items.map(x => {
        items.push({ name: x.name})
      }
  }

}

const getItemLayout = (_, index) => {
  return {
    length: windowWidth - 20 + ITEM_MARGIN_RIGHT,
    offset: (windowWidth - 20 + ITEM_MARGIN_RIGHT) * (index - 1),
    index,
  };
}

const renderItem = ({item}: any) => {
  <View>
    <Text>{item.name}</Text>
  </View>
}

return (
  <FlatList
    data={items}
    horizontal={true}
    initialScrollIndex={1}
    renderItem={renderItem}
    getItemLayout={getItemLayout}
  />
)
}

https://react.dev/reference/react/useState

Twój przykład powinien wykorzystywać useState do przechowywania danych z API.

 const items: MyItem[] = [];

Tak się nie trzyma danych w komponentach React, ponieważ tym sposobem przy każdym renderingu będziesz mieć nową czystą tablicę, jeśli robisz to w komponencie. Chociaż z tego co widzę, to robisz tutaj zmienną globalną. Więc ona tam po prostu będzie. No ale to nie znaczy, że React będzie umiał w jakikolwiek sposób wychwycić zmiany w niej.

    items.push({ name: x.name})

Bezpośrednie działanie na tablicach spowoduje, że React nie będzie wiedział, kiedy uaktualnić komponent. Weź sobie to włóż np. w stan i zmieniaj stan. Jak potrzebujesz tej samej "zmiennej" w wielu komponentach, to możesz wynieść stan do górnego komponentu albo np. użyć kontekstu.

Próbowałem np. robić ifa, że jak są pobrane elementy z API, to dopiero wtedy renderuj listę, ale nie działa.
Generalnie brak mi już pomysłów. Może ktoś robił coś podobnego albo widzi gdzie robie błąd ?

Zamiast próbować, wróciłbym do fundamentów, poczytał dokumentację, przeszedł choćby jeden tutorial z Reacta (nie to, żeby coś, tylko to serio wygląda, jakbyś próbował coś na siłę zrobić i wyważać otwarte drzwi).