snapToAlignment center not working in first render

Question

I'm working on something like instagram snap scrolling. The User Card should be centered (One card on each scroll).

  <FlatList
    data={items}
    renderItem={({item}) => <UserCardComponent name={item.name} />}
    keyExtractor={item => item.id}
    snapToAlignment="center"
    decelerationRate={'fast'}
    snapToInterval={Dimensions.get('window').height}
    showsVerticalScrollIndicator={false}
  />

This is working fine after scrolling from the second item onwards or when we touch it, it is adjusting to center but when it is rendered first time its not in the center.

User Card Component looks like this on first render

Second Item After scrolling

Second item is perfectly centered, I want first item to be centered.

I tried to move the card upwards using useEffect with these functions scrollToOffset,scrollToItem, scrollToIndex etc. but they needed flatlist reference which is not available while rendering first time.

Thanks in advance. Any help will be appreciated

Answer 1

Any IP address of your machine you can find by using the os module - and that's native to Node.js:

const os = require('os');

const networkInterfaces = os.networkInterfaces();
const ip = networkInterfaces['eth0'][0]['address']

console.log(networkInterfaces);