react native - @shopifyflash-list breaks when using a contentContainerStyle with percentage horizontal padding with an useInfini

When using a list with infinite scrolling using useInfiniteQuery that has a contentContainerStyle with a percentage value for paddingHorizontal the list is not rendered at all.

Here is the List Component :

import React from 'react';
import { View, Text, ActivityIndicator, StyleSheet, TouchableOpacity, FlatList } from 'react-native';
import { FlashList } from '@shopify/flash-list';
import { useInfiniteQuery } from 'react-query';
import axios from 'axios';

const fetchPosts = async ({ pageParam = 1 }) => {
  const { data } = await axios.get(`;_page=${pageParam}`);
  return { data, nextPage: pageParam + 1, hasNextPage: data.length > 0 };
};

const DataList = () => {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    isLoading,
    error,
  } = useInfiniteQuery('posts', fetchPosts, {
    getNextPageParam: (lastPage) => lastPage.hasNextPage ? lastPage.nextPage : undefined,
  });

  if (isLoading) {
    return <ActivityIndicator size="large" style={styles.loader} />;
  }

  if (error) {
    return <Text style={styles.error}>Error fetching data</Text>;
  }

  const posts = data?.pages.flatMap(page => page.data) || [];

  return (
    <FlashList
      data={posts}
      estimatedItemSize={50}
      contentContainerStyle={{paddingHorizontal: '30%' }}
      keyExtractor={(item) => item.id.toString()}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text style={styles.title}>{item.title}</Text>
          <Text style={styles.body}>{item.body}</Text>
        </View>
      )}
      onEndReached={() => {
        if (hasNextPage) fetchNextPage();
      }}
      onEndReachedThreshold={0.5}
      ListFooterComponent={
        isFetchingNextPage ? <ActivityIndicator size="small" style={styles.loader} /> : null
      }
    />
  );
};

const styles = StyleSheet.create({
  loader: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 },
  error: { textAlign: 'center', color: 'red', marginTop: 20 },
  item: { padding: 15, borderBottomWidth: 1, borderBottomColor: '#ddd' },
  title: { fontSize: 16, fontWeight: 'bold' },
  body: { fontSize: 14, color: '#555' },
});

export default DataList;

Here is a link to a snack example : /@samuelbouchard/flashlist-infinitequery-bug

Changing from contentContainerStyle={{paddingHorizontal: '30%' }} to contentContainerStyle={{paddingHorizontal: '30' }} fixes the problem.

Also using FlatList instead of FlashList solved the problem.

Either way, using a percentage value for paddingHorizontal should not break the list

An issue has been raised on the Shopify's GitHub :