Hello guys i have been working on the ubereats clone and while using scrollView it doesnt work ,
i used it on other components the same way and it worked fine but here it doesnt !! ?
const MenuItem=()=>{
return(
<ScrollView showsVerticalScrollIndicator={false}>
<View style={{paddingHorizontal:10}} >
{Menu.map((food,index)=>(
<View style={{paddingLeft:20,flexDirection:"row",marginTop:30,borderTopWidth:1,borderTopColor:"lightgray",paddingTop:10}} key={index} >
<View style={{justifyContent:"center"}}><BouncyCheckbox
iconStyle={{borderColor: "gray",borderRadius:0}}
fillColor='green'
/></View>
<View style={{width:220,marginLeft:10}}>
<Text style={{fontSize:20,fontWeight:"700"}}>{food.title}</Text>
<Text > {food.description}</Text>
<View style={{marginTop:8}}>
<Text style={{fontSize:17,fontWeight:"500"}}>{food.price}</Text></View>
</View>
<View style={{marginLeft:18}}>
<Image source={{uri:food.image}} style={{width:80,height:80,borderRadius:30}}/>
</View>
</View>
))}
</View>
</ScrollView>
)
}```
i used flex 1 on the view outside the map function and it didnt fix it
Remove the View above the ScrollView.
You try to set one child for the scrollView it’s the View component and the View component have array map.
Remove the View component to keep array map child for ScrollView
A part of my react native application currently looks like this:
Where the graph and picture are next to each other. My current code is:
<View style={{flexDirection:"row", backgroundColor:'#FFFFFF', borderRadius:10}}>
<View style={{flex:1, padding:10}}>
<Card.Cover source={{uri: props.url}}/>
</View>
<View style={{flex:1, padding:10}}>
<BarChartExample></BarChartExample>
</View>
</View>
I was wondering if anyone could help me fix what is wrong in my code to get my image looking like the example image.
You can try setting the resizeMode props on the component to contain.
More information here: https://reactnative.dev/docs/image#resizemode
As the title suggests, <Image src={require('...')} /> does not appear when attempting to view while offline and disconnected from react native packager.
It turns out that either because of the <TouchableOpacity> or the lack thereof <View> wrapping the <Image/>, it causes the image to not appear.
So the first example doesn't work:
<TouchableOpacity>
<Image src={require('...')} />
</TouchableOpacity>
whereas this does:
<TouchableOpacity>
<View>
<Image src={require('...')} />
</View>
</TouchableOpacity>
I have a image in my component and I am trying to place an image on top of that. But only the first image shows, the one I am trying to place on top of it doesn't.
React Native supports zIndex. You can give your second image a style like this { zIndex: 1, position: 'absolute', ... // other position style } to put it on top of other view.
See https://facebook.github.io/react-native/docs/layout-props.html#zindex for reference.
Put the second Image inside the first one:
<View style={Styles.container}>
<View style={Styles.viewStyle}>
<Image
style={Styles.imageStyle}
source={require('./Bakgrundsbild.png')} >
<View style={Styles.logoViewStyle}>
<Image
style={Styles.logoStyle}
source={require('./Logo.png')}
/>
</View>
</Image>
</View>
</View>
You need to give ImageBackground & then give Image
<ImageBackground>
<Image></Image>
</ImageBackground>
like this
If I try to scroll to the bottom of my ScrollView, it bounces back to its default position and won't let me view the entirety of its content.
My ( truncated ) setup is fairly simple :
<View>
<View>
<ABunchOfStuff />
</View>
<View style={styles.sectionNode} >
<ABunchOfStuff />
</View>
<ScrollView> <------ My broken ScrollView :(
<View>
<ABunchOfStuff />
</View>
</ScrollView>
</View>
This is a simplified version of my actual code. But I'm reaching the conclusion that there's some kind of "unbounded height" going on as in this reference.
I did try making sure everything and all parents have flex: 1 all the way to the child <View> of my <ScrollView> and up to its parents. But that didn't seem to do the trick.
Any idea on how to debug this? I know ReactNative's website recommends this and says it would be easy to do in the inspector ( but with no instructions on how to do it ). If my assumption that there's an "unbounded height" issue, how would one go about and find this rascal unbounded node? Or is it something else?
Try taking flex out of the ScrollView entirely and just put flex: 1 on the parent. That did the trick for me.
For me the problem was setting a paddingVertical, paddingTop or paddingBottom on the ScrollView. Just don't do that. it influences the height of the content of the ScrollView, without the ScrollView adjusting to it appropriately.
The parent view must have style={{flex: 1}} then the scrollview can have style={{flex: 1}} 🥇
The bounded height thingy means the ScrollView itself must be bound.
If the ScrollView has unbounded height, it will stretch with your content and won't scroll.
You can just add height to the ScrollView and see how this works, from there on you can use absolute height or use flex in a way that will limit the ScrollView height to what you want.
This worked for me:
<View style={{flex: 1}}>
<ScrollView>
<View style={{paddingTop: 16, paddingBottom: 16}}>
<SearchBar />
<ItemsContainer />
</View>
</ScrollView>
</View>
You must make sure that ScrollView has fixed height, either by setting it for parents or for itself.
I use flex to set its height instead of specifying it directly so it works on all screen size. So for your code something like
<View style={{flex: 1}}>
<View>
<ABunchOfStuff />
</View>
<View style={styles.sectionNode} >
<ABunchOfStuff />
</View>
<ScrollView style={{flex:0.8}}>
<View>
<ABunchOfStuff />
</View>
</ScrollView>
</View>
More information in react native docs
This works for me
<ScrollView>
<View style={{height:2000}}>
</View>
<ScrollView>
The important thing is to put a defined height for the elements that are inside the ScrollView
<ScrollView style={{flex: 1, marginBottom: 30}} />
items
</ScrollView>
What worked for me was to wrap the ScrollView in View. Then giving the View a height and setting flex : 1 on ScrollView.
Something like this:
<View style={{ height: "60%" }}>
<ScrollView style={{ flex: 1 }}>
<List/>
</ScrollView>
</View>
The suggested answers above with parent flex: 1 and child flex: 1 work, but this thing was causing my bug.
I had <Image> with percentage height and once I replaced the percentage with a number, it fixed the issue.
this will solve your problem
<ScrollView
contentContainerStyle={{flexGrow:1,justifyContent:'space-
between'}}
>
<The Other Components or Lists/>
</ScrollView>
add <Text></Text>
at the bottom inside scrollview. it will give some space