So this week I have started on my first pet project to get hands on learning experience with RN. So far so good I think. But now I have hit a bit of a road block, so I was hoping someone would help me out. So I have got a View of images (coming from an api). I am able to place the images in a grid view like so:
But once I place this view in a Flatlist, the whole layout gets messed up. Looks like this:
I have tried playing around with flex but to no avail. Any help would be much appreciated
Code can be found here:
UPDATED:
https://gist.github.com/anonymous/c565d8f9d7dfa65646b7a3a81bf6330f
FlatList has a numColumns attribute.
Try:
<FlatList style={styles.FlatlistStyles} data={this.state.moviesTrending}
numColumns={4}
renderItem={({item}) => this.renderMoviesTrending(item)}
keyExtractor={this._keyExtractor}
/>
and add width style={{ width: 200 }} or any appropriate width to the child element (rendered by the renderMoviesTrending function).
You have to use contentContainerStyle instead of just style and set some flex props for it to work. For example:
justifyContent: 'flex-start'
flexDirection: 'column'
Related
I have a problem with ScrollView in React-Natives. I've already looked for it in the react-native docs, but still unable to find it. Because of this I need to include an image since I don't even know how to call it.
Is it possible to change the "purple" color in this picture? How? And what is this "purple" thing called?
Here's my code to give a clue.
The ScrollView:
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
style={style.scrollContainer}
endFillColor="#000"
>
The styles
scrollContainer: {
marginTop: 20,
marginHorizontal: 10,
color: "#fff",
},
Thank you
This is the overScroll glow effect on android devices and can be disabled using the overScrollMode prop. You need to set it to never as follows.
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
style={style.scrollContainer}
endFillColor="#000"
overScrollMode="never"
>
I have created a little snack that showcases this prop. Notice that I have disabled this for the horizontal scrollview and enabled it for the vertical scrollview.
Changing the color is only possible by adding <item name="android:colorEdgeEffect">#E53644</item> to your styles.xml as discussed here, whereby #E53644 is the hexcode of the color of choice.
In my React Native Project, I am trying to make some kind of lists using Flatlist or sometimes using map method, for executing JSX Element. I am getting the result correctly, But there is a bit of a problem in separate.
Let's take chatting app example, When we open WhatsApp there are a lot of people showing up, but there is also a tiny separator after each item, That looks great, Now exactly when I try to put that separator in my React Native application using ItemSeparatorComponent attribute in Flatlist, It's working but still in some places, meaning in some items that separator not showing up, its looks missing, it feels that there is no border/separator. And actually what's going on is that, the below item from that separator which is hidden or which height looks smaller than others, that below View go a little bit towards the upside, so the separator gets to hide, That's the main problem, Why is that happening, I tried everything but still, I am getting that UI problem.
Here is code example:
<FlatList
data={actionSheet._data}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
keyExtractor={(_, index) => index}
renderItem={({item, index}) => <ActionSheetClickableItem data={item} index={index}/> }
ItemSeparatorComponent={() => (
<View
style={{
height: 1,
width: '100%',
backgroundColor: 'red'
}}
/>
)}
/>
OR
<ScrollView>
{
actionSheet._data.map((item, index) => (
<>
<ActionSheetClickableItem data={item} index={index} key={index}/>
<View
style={{
height: 1,
width: '100%',
backgroundColor: 'red'
}}
/>
</>
))
}
</ScrollView>
So according to the above code, I know for sure, that everything is correct, But why is that separator get hidden, If we look at this picture in the area of the green rectangles, there is no border showing up, Why... I want to show it here, I tried to put zIndex property, that trick working correctly but that isn't the solution, It have to correct view as we expecting, why its behave like this, any solution??????
I was facing the same issue.
That might be with Emulator or Your screen.
You can use also increase the height of itemSeparater or make the background color more darker.
If you check it in real device then it displays all the separaters.
I want to render FlatList's footer at the bottom of the page even if there is not enough content to fill the whole screen.
In order to do this, you need to take a look at react-native sources.
Here there is a code which shows adding footer internally.
As you can see it wraps into additional View which can be styled using ListFooterComponentStyle prop. It's not described for some reason in docs.
So here is the solution:
<FlatList
data={someData}
keyExtractor={item => item.id}
contentContainerStyle={{flexGrow: 1}}
ListFooterComponentStyle={{flex:1, justifyContent: 'flex-end'}}
ListFooterComponent={<Footer/>}
...
/>
UPD: Update answer using AtlasRider's comment.
I am trying to create a tablet application, and I want my layout to have a sidebar and then content inside but I'm not able to do that I tried searching for how to create a nested navigator that will work independently of its parent and render inside its parent but wasn't able to find any help about it anyone knows how to do that or if its possible to define a fixed component for all navigator children.
I tried working on react-native-navigation, react-navigation and react-native-router-flux but none of them till now have helped me with my problem, anyone got any solution?
sorry if it wasn't clear, please ask questions in the comment if you didn't understand what I'm trying to reach
I found the solution by using React Navigation by Facebook where you can create a navigator and a view but either one that is preceeding the other won't show if you don't give it height and width
<View>
<View style={{ height: "100%", width: 150 }}>
<SideBar navigation={navigation} />
</View>
<View>
<ContentNavigator />
</View>
</View>
I really do not have a ton of code for this so this might not be the perfect place to ask this.. but I need help trying to figure out some sort of a solution..
I have an array of URL's stored in the state.
<TouchableHighlight style={ styles.container } onPress={this.screenTap.bind(this)}>
<Image source={{uri: this.state.picCollection[this.state.counter].Picture }} style={styles.backgroundImage} >
<View style={ styles.loginForm }>
<Button onPress={this.screenTap.bind(this)} style={{ alignSelf: 'center', marginTop: 20, marginBottom: 20 }}>Create</Button>
<Text style={ styles.text }>Some text</Text>
</View>
</Image>
</TouchableHighlight>
This screenTap function that is the onPress just incriments, changing which url we are loading from this.state.picCollection
How this code above works is everytime its pressed it is intended to switch the image show. However, when I do that instead of seamlessly transitioning it shows this white screen before loading.
I am guessing this is because everytime I do this I am reloading the state. However I am not really sure how I would approach something like this.
Any advice would be amazing!
When you change one of the props or state variables in React, the affected components re-render. From the browser's point of view, one image disappears and another one appears in it's place.
What this means for you is that each time you change the URL, an image that wasn't there before now is, and it needs to be loaded anew. I'm very certain that's what the white flash is - the browser loading the new image.
Fortunately, you can load images without showing them. This page offers some good techniques, but the most basic is to just have N image tags with each of the images you want to load. Create a CSS class that consists of display: none and apply it to those images. Ta-da! The images are loaded and cached, but the uses doesn't see any of it.
Then, when your Image component changes its src tag to one of the Images you prepared earlier, the browser already has the image in memory, so it should load immediately. (Just make sure that it is exactly the same URL!)