I have a scrollView containing a tableView that displays a custom cell. I used imageBackground to display images for the background of the custom cell. However, when the cell displays, it has two spaces at the sides even though I have set the View to flex to the width of the cell.

It doesn't seem to be an issue with the imageBackground since removing the imageBackground and setting a background color for the View also displays the spaces at the side. How do I get the View to cover up all the space so there won't be any extra spaces at the side of the cell?

const data = [
  { title: "Joe's Gelato",
    imgUri: { uri:"https://images.unsplash.com/photo-1572307230741-453859592dce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=800" }
  },
  { title: "Joe's Diner",
    imgUri: { uri:"https://images.unsplash.com/photo-1540853986208-a3e8f4ab197a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" }
  }
];
      
function HomeScreen({ navigation }) {
    
  const HomescreenCell = (props) => (
    <Cell backgroundColor="black"
      {...props}

      onPress={() => navigation.navigate('Menu')}
    
      cellContentView={
        <View style={{ flex: 1, height: 0.3 * dim.height }}>
          <ImageBackground style={{ flex: 1, height: 0.3 * dim.height }} source={props.imgUri} resizeMode="cover">
            <Text style={{
              fontWeight: "bold",
              fontSize: dim.height/30,
              fontFamily: "Trebuchet MS",
              color: "#FFC613",
              marginTop: dim.height/50,
              marginLeft: dim.height/50
            }}>
            {props.title}
            </Text>
          </ImageBackground>
        </View>
      }
    />
  )
  return (
    <ScrollView>
       {
         <View>
           <TableView>
              <Section header="HomeScreen" hideSeparator="true" separatorTintColor="#ccc" >
                {data.map((item, index) =>
                    <HomescreenCell key = {item.title}
                      title= {item.title}
                      imgUri= {item.imgUri}
                    />
                )}
              </Section>
           </TableView>
         </View>
       }
    </ScrollView>
  );
}