Incorrect Padding | Nested FlatList Inside SectionList

Question

I have a SectionList where I have the first and second sections as horizontally scrollable. I've done this by nesting a FlatList inside these sections. However, adding horizontal padding to the FlatList so it starts 16px from the left it also cuts off 16px from the right.

I have tried changing horizontalPadding: 16 to paddingLeft: 16 & paddingStart: 16 however this has the same outcome.

Illustration below or expected vs actual

Code

  <SectionList
    sections={sections}
    renderSectionHeader={({ section }) => {
      const type = section.type;
      switch (type) {
        case "one":
          return (
            <FlatList
              style={{
                paddingHorizontal: 16,
                marginBottom: 16,
              }}
              data={section.data}
              horizontal
              renderItem={({ item }) => <Card1 item={item} />}
              ItemSeparatorComponent={() => (
                <View style={{ width: 8 }}></View>
              )}
              showsHorizontalScrollIndicator={false}
            />
          );
        case "two":
          return (
            <FlatList
              style={{ flex: 1, paddingLeft: 16, marginBottom: 24 }}
              data={section.data}
              horizontal
              renderItem={({ item }) => (
                <Card2 item={item} onPress={offerDetails} />
              )}
              ItemSeparatorComponent={() => (
                <View style={{ width: 16 }}></View>
              )}
              showsHorizontalScrollIndicator={false}
            />
          );
        case "three":
          return (
            <Text
              style={{
                fontSize: 21,
                fontWeight: "bold",
                paddingHorizontal: 16,
                marginBottom: 12,
              }}
            >
              {section.title}
            </Text>
          );
      }
    }}
    renderItem={({ item, section }) => {
      if (section.horizontal) {
        return null;
      }
      return <Card3 item={item} onPress={offerDetails} />;
    }}
    stickySectionHeadersEnabled={false}
    showsVerticalScrollIndicator={false}
  />

Answer 1

When utilizing the FlatList component, it is possible to apply styles to the scroll view content container by making use of the contentContainerStyles property. This property allows you to specify styles that will be applied to the container that wraps all of the child views.