No Applied Safe Area

[Owen Donckers]

Currently when using the project as follows, I've run into some issues with the safe area not applying to the cells properly. Instead of accounting for the safe area supported on iOS, the cells are just adding a padding around the sides that pushes the data off screen from the left to right.

In addition I've wanted to have a different padding for the outside of the grid, with a smaller spacing for the inside cells. I've been trying to do this with the included style prop but it has the same effect as the safe area, only pushing the cells of screen.

Below is my code:

const insets = useSafeArea()

const styles = StyleSheet.create({
  gridView: {
    flex: 1,
    paddingLeft: insets.left + platformInset,
    paddingRight: insets.right + platformInset,
  },
})

 <SectionGrid
   contentInsetAdjustmentBehavior="scrollableAxes"
   itemDimension={150}
   spacing={5}
   style={styles.gridView}
   sections={[
     {
       title: "Territories",
       data: homeStore.territories.slice(),
       renderItem: renderTerritoryItem,
     },
     {
       title: "House-to-House Records",
       data: homeStore.h2HRecords.slice(),
       renderItem: renderH2HRecordItem,
     },
   ]}
   renderSectionHeader={renderSectionHeader}
   keyExtractor={(item) => `${item.id}`}
/>

As you'll notice I set the contentInsetAdjustmentBehavior to scrollableAxes instead of something like always. When I've set it to that it simply allows me to scroll vertically and horizontally instead of pushing the cells into the space I want.

Am I missing a prop or does the package not account for safe area?

[saleel]

This library does not consider safe area. I believe wrapping SectionGrid inside a SafeAreaView would solve the problem.

On spacing, the library use one value for both outer and inner padding. But you can achieve what you want by passing the in-between padding value to the Grid and use style prop to add more padding your need.