Tengo un scrollView que contiene un tableView que muestra una celda personalizada. Usé imageBackground para mostrar imágenes para el fondo de la celda personalizada. Sin embargo, cuando se muestra la celda, tiene dos espacios a los lados aunque configuré la vista para que se flexione al ancho de la celda.

No parece ser un problema con imageBackground, ya que al eliminar imageBackground y establecer un color de fondo para View, también se muestran los espacios a un lado. ¿Cómo hago para que la vista cubra todo el espacio para que no haya espacios adicionales al costado de la celda?

 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> ); }