enter image description hereThe structure of my code looks like the following:
<View style={{backgroundColor:'#FFF',flex:1,}}>
<ScrollView
showsVerticalScrollIndicator={false}
contentContainerStyle={{paddingBottom:120}} stickyHeaderIndices={[6]}
>
...some content...
<ScrollView horizontal showsHorizontalScrollIndicator={false}
bounces={false}
scrollEventThrottle={16}
pagingEnabled={...}
decelerationRate={...}
snapToInterval={...}
disableIntervalMomentum={true}
snapToAlignment={"center"}
snapToOffsets={screens}
contentContainerStyle={{flexGrow:1}}
>
{horizontalContent}
</ScrollView>
</ScrollView>
but the content inside the horizontal scroll has different heights and all items become the same height as the largest, which creates a huge scroll space. How can fix this? Help pls
If you can see in my sample
Pink, red and blue bar have a specific height, they don’t grow to the containers max.
The turkey bar has a flex:1 which cause the container grow to the max, to prevent this behavior you could wrap the elements container with an view and pass the flex:0 style as i did for the black bar.
Related
I am using react navigation bottom tabs and I customized them.
one problem I have is that, I have a flatlist which is hidden the edge of the list because of the bottom tabs.
I tried to add margin bottom but, since I have rounded tabs it blocks rounded tabs..
when I add margin bottom it goes like this
(flat list has flex:1 by the way)
what should I do ?
current situation..
I want my list to show fully
Simply add marginBottom in your FlatList's containerStyle prop to manage the margin as per your requirement.
For Ex.
<FlatList
data={data}
renderItem={renderItemHandler}
style={{
flex: 1
}}
contentContainerStyle={{
marginBottom: 20
}}
/>
I have a FlatList with a ListHeaderComponent which is a number of buttons in a horizontal scroll. I have made these buttons sticky so that it stays at the top during scroll but is there a way to prevent the scrolled items from showing beneath the buttons as I scroll up? I have tried adding a marginBottom to ListHeaderComponentStyle but it does not work. I want the items to start disappearing just beneath the ListHeaderComponent how do I do this?
<FlatList
style={{marginTop: 50}}
data={data}
ListHeaderComponent={
<FilterOptionButtons/>
}
ListHeaderComponentStyle={{ marginBottom: 50 }} // does not add m
stickyHeaderIndices={[0]}
keyExtractor={(item) => item.id}
renderItem={renderItems}
contentContainerStyle={styles.flatListContainer}
/>
You can add a backgroundColor style to the ListHeaderComponent. Currently it is transparent that's why the items are showing beneath it.
Also, I think it would be better if you just add style to the container of <FilterOptionButtons /> instead of using ListHeaderComponentStyle.
I have Question is i want to disable scroll of one item from inside two scroll view like as
<ScrollView horizontal={true}> ////Horizontal ScrollView
<ScrollView> ////Vertical ScrollView
<View /> //// View 1
<View /> //// View 2
</ScrollView>
</ScrollView>
i just want to apply only Vertical scrollView on view 1 not Horizontal
Any one help me how i can achieve this.
please use this for disable scrolling
scrollEnabled={false}
i have found an answer, we can handle it with ref , check for demo link
https://snack.expo.dev/#mirza009/table
This results in a screen that is half blue and half yellow, should it not be 2/3 yellow?
<View style={{flex:1,flexDirection:'column'}}>
<View style={{flex:1,backgroundColor: 'blue'}}></View>
<ScrollView style={{flex:2}} contentContainerStyle={{flex:1,backgroundColor: 'yellow'}}></ScrollView>
</View>
In general you are right, but react native's ScrollView behaves a little bit differently. As you can read in the docs:
Keep in mind that ScrollViews must have a bounded height in order to
work, since they contain unbounded-height children into a bounded
container (via a scroll interaction). In order to bound the height of
a ScrollView, either set the height of the view directly (discouraged)
or make sure all parent views have bounded height. Forgetting to
transfer {flex: 1} down the view stack can lead to errors here, which
the element inspector makes easy to debug.
In order to achieve your wanted behavior, you can do the following:
<View style={{flex:1,flexDirection:'column'}}>
<View style={{flex:1,backgroundColor: 'blue'}}></View>
<View style={{flex:2}}> // surround scrollview with flex 2
<ScrollView contentContainerStyle={{flex:1,backgroundColor: 'yellow'}}></ScrollView>
</View>
</View>
I'm new to React-native and I've a very simple(at least i think so) problem.
I've an ImageBackground with resizeMode='contain', now I would like to have the background positioned to the top of the container...
<ImageBackground style={styles.imageBackground} source={backgroundImage} resizeMode='contain'>
... some content
</ImageBackground>
The image is rendered in the right way, but the problem is that it is vertically centered, instead I would like to have it top aligned...
This is an example of the result of my ImageBackground
This is an example of the result with the bottom added to ImageStyle
In the ImageBackground component, the image isn't vertically centered, rather it is positioned absolutely to fill the container. You can check the source here. The reason it's appearing vertically centered is probably because of the resizeMode contain. To top align it, you can make user of the prop imageStyle that you can set to something like this:
<ImageBackground
imageStyle={{
bottom: 40 // Whatever offset you want from the bottom
}}
/>