I have a horizontal flatlist inside a vertical flatlist and I want data on the inside flatlist to be provided based on which item of the outer flatlist is being rendered
This is what I have currently:
<FlatList
style={styles.outerFlatlist}
data={this.state.catagories}
renderItem={({item, index})=>{
return (
<View>
<View>
<Text style={styles.catagoryName}>
{item.CategoryName}
</Text>
</View>
<View style={styles.innerFlatlist}>
<FlatList
horizontal={true}
data={this.state.product1}
renderItem={({item, index})=>{
return (
<View
style={styles.productsContainer}>
<View
style={styles.productImage}>
<Image
source={{uri:item.productImage}}
style={styles.image}
resizeMode='contain'>
</Image>
</View>
<View style={styles.productDETAILS}>
<Text
style={styles.productPrice}>R{item.productPrice}
</Text>
<Text
style={styles.productDescription}>
{item.productDecription}
</Text>
</View>
</View>
);
}}/>
</View>
</View>
);
}}/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
With the above code, everything works well except that each category displays the same data (this.state.product1), how can I make the data of the inner flatlist be dependant on the which item on the outer flatlist is displayed?
When you are inside the .map you already are inside the this.state.catagories , but since you always use this.state.product1 for the flatlist2 you will always get the same result because this.state.product1 stays the same.
At flatlist2 change the data to item.products or item.whateverYouNeedHereButArray
<View style={styles.innerFlatlist}>
<FlatList
horizontal={true}
data={item}
We have a FilterComponent which renders a Modal, but on iPhone X it's Header is in the Statusbar.
I tried to render it with SafeAreaView but seems like this is not working:
return (
<SafeAreaView>
<Modal
{ ...defaultModalProps }
onRequestClose={ close }
style={ styles.container }
visible={ visible }
>
<ModalNavbar close={ close }>
Filter
</ModalNavbar>
<View style={ styles.content }>
...
</View>
</Modal>
</SafeAreaView>
);
When FilterModal is openend on iPhoneX it still is in the Statusbar and you cant click on anything.
Any idea how to solve this?
thanks.
Put SafeAreaView inside the Modal component
return (
<Modal
{...defaultModalProps}
onRequestClose={close}
style={styles.container}
visible={visible}
>
<SafeAreaView style={{ flex: 1, backgroundColor: "transparent" }}>
<ModalNavbar close={close}>Filter</ModalNavbar>
<View style={styles.content}>...</View>
</SafeAreaView>
</Modal>
);
if you use react-native-safe-area-context and you have a problem with modal then
<Modal>
<SafeAreaProvider>
<SafeAreaView>
// your modal content
</SafeAreaView>
</SafeAreaProvider>
</Modal>
A Modal fill the entire screen, so you need to provide extra spacing inside the Modal. Margin / Padding will not effect on Modal if applied on parent of Modal.
<Modal {...}>
<TouchableWithoutFeedback onPress={closeModal}>
<SafeAreaView {...}>
{...}
</SafeAreaView>
</TouchableWithoutFeedback>
</Modal>
I am using "react-native": "^0.50.4", and this is how componentrender looks like:
render(){
return(
<View style={{flex: 1}}>
<View>
....
</View>
<FlatlistComponent />
</View>
);
}
The above FlatlistComponent renders a list, except the last item is partially shown/pushed down, this is because the View above the flatlist, how do I go about this ?
If the FlatList disappears when you add a style of flex: 1, you must continue moving up the hierarchy of elements, adding flex, until the FlatList finally appears.
I guess the View component other then the flat list is taking up the whole space of the flex 1. Flatlist being scrollable it is supposed to go down.
Try assigning separate flex values to the child components.
render(){
return(
<View style={{flex: 1}}>
<View style={{flex: 1}>
<View>
....
</View>
</View>
<View style={{flex: 3}>
<FlatlistComponent />
</View>
</View>
);
}
I built a view that is populated dynamically using array mapping. After doing this, I realized that the View would be too large to contain all the array items on one screen.
Here is my code.
<View style={[styles.flexColumn]}>
{Characters.map((character, i) =>
<View key={i} style={[styles.flexRow]}>
<View>
<Text>
{character.Name}
</Text>
</View>
</View>
)}
</View>
So I tried adding a scroll view as the parent like this:
<ScrollView>
<View style={[styles.flexColumn]}>
{Characters.map((character, i) =>
<View key={i} style={[styles.flexRow]}>
<View>
<Text>
{character.Name}
</Text>
</View>
</View>
)}
</View>
</ScrollView>
This does add some scrollability to the view, but it's still cutting off a portion of the last object in the array.
Is there a way to fix this?
Thanks!
ScrollView is intended for showing scrollable content at once. Since you are populating content dynamically, you should be using FlatList. Something similar to the following would work:
...
_keyExtractor = character => character.Name
_renderItem = ({character}) => (
<Text>
{character.Name}
</Text>
)
render() {
return (
<FlatList
data={Characters}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
)
}
...
Detailed explanation is available in the docs.
If you are by any reason still forced to stick to Scrollview, the problem is probably related to the styling. I suppose styles.flexColumn should be applied to the ScrollView itself via contentContainerStyle, rather than to its' child View.
When I wrap content like this example below, it scrolls Perfectly..
return(
<ScrollView>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
...
</ScrollView>
);
However, whenever I wrap it in another View, It will not scroll.
return(
<View>
<ScrollView>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
...
</SCrollView>
</View>
);
Is there some sort of fix to this. I am trying to put a nav bar header above all of the content, couldn't really figure it out though.
It's a typo:
Your closing ScrollView tag is: </SCrollView> rather than </ScrollView>.
You also need to add a style to the View container, here's an example of what it should look like:
return(
<View style={{flex: 1}}>
<ScrollView>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
...
</ScrollView>
</View>
);
Try next code:
<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
</ScrollView>
If your ScrollView is within something that handles touch (Pressable, TouchableWithoutFeedback etc) then you either need to stop the touch event propagating up to that parent handler or else the ScrollView won't handle the touch event and therefore won't scroll.
This can be done either with onStartShouldSetResponder={() => true} or by wrapping the children in an element which itself handles the touch event (e.g. Pressable):
return (
<ScrollView>
<Pressable>
<Text>This is scrollable</Text>
<Pressable>
<Pressable>
<Text>As is this</Text>
<Pressable>
</ScrollView>
);
Try adding style={{flex:1}} to <View> and <ScrollView> components. You also have a typo on your code: </SCrollView> in line 9. An example code will look like this:
<View style={{backgroundColor:'white', flex:1}}>
<NavigationBar title="Title" />
<ScrollView style={{flex:1, backgroundColor:'white'}}>
<View style={{flex:1,justifyContent:'center'}}>
<RegisterForm />
</View>
</ScrollView>
</View>
Another solution is to add a height property to the parent View container. This sometimes works well when calculating the height against the screen height.
render () {
const screenHeight = Dimensions.get('window').height
return(
<View style={{height: screenHeight}}>
<ScrollView>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
...
</ScrollView>
</View>
)
}
I have tried all of these solutions and none were working. Then I just fully restarted the app and the metro server and everything worked fine.
As #Evan Siroky has answered above it's working well I'm just adding on thing for a auto height in case you don't want to reserve the space
render () {
const screenHeight = Dimensions.get('window').height
return(
<View style={{ Height: "auto", maxHeight: screenHeight}}>
<ScrollView>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
<Text> TEST </Text>
...
</ScrollView>
</View>
)
}
I had a similar issues, it got solved by removing height/width if set to '100%'.
Just adding here if someone faces the same issues. :D
Set nestedScrollEnabled as true for Hybrid Android + react app as it might be issue with gesture/click for scrolling issue.
Just if anyone is as desperate as I was:
My view was inside a StackNavigator. In the StackNavigator you can assign a default cardStyle. This card style needs height: "100%".
For me this was the case but I had overwritten it within the cardStyle of the Stack.Screen definition.
See this working example:
// This is the stack navigator
<ModalStack.Navigator screenOptions={() => ({
cardStyle: {height: "100%"}
});}}>
<ModalStack.Screen name={ScreenItemDetail} options={{
// cardStyle: {} be sure to not override card style again!
}} component={ItemDetailScreen} />
// ...
</ModalStack.Navigator>
removing contentContainerStyle prop from the ScrollView has fixed the issue for me
Just add ScrollView as parent View if it's still not working for you...just restart your app or server and your ScrollView will work fine. Because sometimes our app freezes for no reason.
I think the best way of doing this is to put all requires inside an array and map this array.
const images = [
require('../your/path/here'),
require('../other/image/here'),
...
];
return ( {images.map((image) => <Image ... source={image} />)
note that if you want it as a background image with other elements above the image, you may use BackgroundImage and either render elements for each image or position absolute the image map and zIndex it behind all things