FlatList initialScrollIndex not working as expected

I am using a horizontal FlatList as menu bar for my application. The FlatList must scroll to the clicked item and I am using initialScrollIndex for this.
But the problem is that it scrolls but the content is not visible many times.
My code

 <FlatList
      ref={listRef}
      data={headerMenuChannels}
      style={{
        backgroundColor: applicationTopBar.buttonBarColor,
        width: Dimensions.get('window').width,
      }}
      showsHorizontalScrollIndicator={false}
      horizontal={true}
      onScrollToIndexFailed={error => console.log('scroll failed', error)}
      initialScrollIndex={screenNumber}
      renderItem={v => (
        <View
          key={v.index}
          onLayout={ref => onMenuLayout(ref, v.index)}>
          <Text
            onPress={() => {
              setScreenNumber(v.index);
            }}>
            {v.item}
          </Text>
        </View>
      )}
    />

Video of the problem
here