We Keep Coding

react native ImageBackground not using full width

I have a Screen:
return (
<SafeAreaView style={styles.container}>
<ImageBackground source={require('../../../../assets/start.png')} resizeMode="cover" style={styles.image}>
<Text>Some Text</Text>
</ImageBackground>
</SafeAreaView>
);
And these are the styles I'm using:
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
image: {
flex: 1,
justifyContent: 'center',
},
})
The problem is my background Image has white space around it.
From the above image you can see that the image has a gap at the top and the left side, it also has the same gap on the bottom and right.
Im trying to get this image edge to edge. Any idea?
iv tried adding 100% width and height and applying resize properties to the image, but its not working?

React Native Mapped Image grid

I'm hoping to get help building an Image Grid in React Native.
I'm trying to create an image grid with mapped data from an array. The mapping part is working fine but the images are not being place the way I want.
This is what I'm looking for (images placed where red squares are):
This is my code so far:
<ScrollView style={{flex: 1, backgroundColor: 'yellow',
}} >
{data.map(image => (
<View style={styles.viewpic}>
<Image style={styles.image} source={{uri:image.url }}/>
</View>
))}
</ScrollView>
</SafeAreaView>
This is my CSS:
viewpic: {
flex: 1,
flexWrap:'wrap',
justifyContent: 'center',
flexDirection: 'row',
backgroundColor: 'blue',
},
image: {
justifyContent: 'center',
height: 115,
width: 115,
margin:6,
backgroundColor: 'red',
}
This is what I'm currently getting:
So far I tried every single CSS combo I could think but nothing has worked so far.
I also tried FLATLIST but to be honest I wasn't able to properly convert my current code to "fit" the requirements of Flatlists.
Thanks everyone for your help!
Cheers!

it's an HTML mistake.
In fact, you put the flex-wrap style for each element, that's why you have one element per line.
You have to put all the elements inside the flex-wrap div and it will works. I hope it will help you
<View style={styles.viewpic}>
{data.map(image => (
<Image style={styles.image} source={{uri:image.url }}/>
))}
</View>

I was able to find the answer!
I combined 2 tutorials + a few tricks and got it done!
First I built my image grid using "FlatList". I found a great tutorial with the step by step here(not my page, not affiliated):Youtube Tutorial
At the beginning I was getting the same result until I added "numColumns={ }"
Here's the code:
...
const numberOfCols = 3
...
return(
.
<View>
<FlatList
data={data}
keyExtractor={(item, index)=>{return item.date}}
numColumns={numberOfCols}
renderItem={({item, index})=>(
<View style={styles.viewpic}>
<Image style={styles.image} source={{uri:item.url}}/>
</View>
)}
/>
Then I used a bit of the strategy from this tutorial (not my page, not affiliated) :
Youtube Tutorial
I still need to adjust the css so it looks better but I'm happy with it so far.
Here is the final result:

Why my ScrollView hide my image in React Native?

I want to add a scrollView in my screen after text and image.
return (
<View>
<Text>Name</Text>
<Image source = {{uri : 'myUri' }} style = {styles.image}/>
<ScrollView>
<View>
<Text>City</Text>
<Text>Tokyo</Text>
</View>
<View>
<Text>Language</Text>
<Text>Japanese</Text>
</View>
</ScrollView>
</View>
);
Here is the style of my image:
image: {
flex: 1,
width: null,
height: null,
resizeMode: 'contain',
marginTop: 3,
marginBottom: 3,
},
The image never shows up with the scrollView.

Did you specify a length for your ScrollView?
Because you make the image's width and height null, the image tries to fill the empty spaces of the page. If you don't give your ScrollView a specific height, it wil fill the screen, so your image cannot find an empty space for itself.
You may need to change the height of the image with a specific value, or you can combine your text and image in a different view and give that view a specific height.
<View style = {styles.customStyle}> // change your style here
<Text>Name</Text>
<Image source = {{uri : 'myUri' }} style = {styles.image}/>
</View>

Scroll area too small with SectionList React Native

I am currently trying to use a <SectionList> inside a classic <View>, all my datas are formatted, the list displays correctly and my item's actions are working.
The issue is that when I am on the top of my SectionList, the area available to trigger the scroll is actually really small ( roughly 100 pixels from the top of the list ). However, once i scroll down a bit from that area, the whole list becomes scrollable and works as intended until I scroll back to the top.
My parent View has flex: 1 as well as my SectionList
Environment
Working environment : MacOS Sierra 10.13.3
Expo version : 23.0
React Native version : 0.50
React : 16.0
Using an IPhone 8 simulation
There's no issue on Android
Steps to Reproduce
Classic creation of a SectionList inside of a View
Expected Behavior
The scroll must be triggered from everywhere in the SectionList
Actual Behavior
When the SectionList is at the top, the scroll only triggers inside a small area ( around 100px from the top of the list )
The code of my SectionList :
<View style={{ flex: 1 }}>
<SectionList
style={styles.openSectionList} // flex: 1
scrollEnabled
stickySectionHeadersEnabled
sections={this.sections}
keyExtractor={item => item["#id"]}
removeClippedSubviews
renderSectionHeader={({ section }) => (
<TouchableHighlight
onPress={() => this.onSectionHeaderPressRef(section.index)}
activeOpacity={0.65}
underlayColor="rgba(0, 0, 0, 0.2)"
style={styles.sectionHeader}
>
<View style={styles.categoryContentContainer}>
<View style={styles.firstPartContent}>
<Text style={styles.categoryHeaderText}>
{section.title === "Autres"
? "Mes produits"
: section.title}{" "}
</Text>
{section.nbItems - section.nbItemsSelected === 0 ? (
<CheckBox
label=""
checked
checkboxStyle={styles.checkbox}
checkboxContainer={styles.checkboxContainer}
/>
) : (
<Text
style={[
styles.categoryHeaderText,
{ color: Colors.contrastColor },
]}
>
({section.nbItems - section.nbItemsSelected})
</Text>
)}
</View>
<Image
source={require("../../../assets/common/chevron.png")}
style={
section.index === this.state.currentCategoryOpen
? styles.categoryChevronOpen
: styles.categoryChevronClosed
}
/>
</View>
</TouchableHighlight>
)}
renderItem={({ item }) =>
this.state.currentCategoryOpen === item.categoryIndex ? (
<ShoppingListProduct
key={item["#id"]}
ingredient={item}
updateIngredient={this.updateIngredientListRef}
onLongPress={this.itemLongPressedRef}
/>
) : null}
/>
</View>
A GIF of the actual behavior ( I'm trying to scroll everytime the cursor is moving ) where we can see that the scroll only triggers when I am above a certain height.
GIF
Any help would be appreciated as I don't know if that's a bug and/or me implementing the component wrong.
Thank you by advance.

someone asked me the solution for this via email so I might as well add it here, from what i remember it was a position/imbrication problem with the components.
I can't remember exactly but I ended up with this code ( my page content changes so that's why it is set as a variable )
// render method
component = ( <SectionList
style={styles.openSectionList} // flex: 1, height: "100%"
scrollEnabled
stickySectionHeadersEnabled
sections={this.sections}
bounces={false}
keyExtractor={item =>
item["#id"] === undefined ? item.userIngredient : item["#id"]
}
getItemLayout={this.getItemLayout}
renderSectionHeader={this.renderSectionListHeaderRef}
renderItem={this.renderSectionListItemRef}
/> )
return (
<View style={{ flex: 1 }}>
{component}
</View>
)
So yeah watch out where your SectionList is defined and how many parents it has, I think it required only one
Hope this helps.

I was able to fix mine by adding this prop to the section list
stickySectionHeadersEnabled={false}

I added a marginBottom to the SectionList of equal amount of space consumed by the View on top to equalise the area.

Arrange 3 images in a row in React Native

I have just started working on a React Native project and I got stuck. I need to display a listof images from an API. The API only gives image urls that I can use like this:
<Image
style={{width: 50, height: 50}}
source={{uri: 'https://avatars0.githubusercontent.com/u/13102253?s=460&v=4'}}
/>
The image count is dynamic but I want to display only 3 images per row. How can I achieve this?

You can use ListView in which you can style it by wrapping it into row like this
and page size will take care of arranging into row
<ListView
contentContainerStyle={styles.list}
dataSource={this.props.yourData} //datasource either props/state only
pageSize={3}
renderRow={(data, rowID, sectionID) => (
<Image
style={{width: 50, height: 50}}
source={{uri: data.path}}/>)} //path here is url that you receive
const styles = StyleSheet.create({
list: {
flexDirection: "row",
flexWrap: "wrap"
}})

The React-Native FlatList is exactly what you need. It accepts a numColumns prop which in your case should be 3.
<FlatList
numColumns={3}
data={yourImagesArray}
renderItem={<YourImageComponent >}
/>
Each iteration of the data array (which I called here yourImagesArray) is passed to the renderItem (which I called here YourImageComponent) as a data prop. So the render function of YourImageComponent should be something like this:
render() {
const { data } = this.props;
return (
<Image source={{ uri: data.uri }} style={{ width: 50, height: 50 }} />
);
}