React Native Flatlist height dynamic - react-native

I am using react native 0.59, for layout I am using native base and react-native-easy-grid.
Because of different size of mobile device, I need to put flatlist height dynamic. it is starting almost middle of the screen, and I would like to show it until the footer bar.
here is my code
<Container>
<ImageBackground source={require(imagePath+"bg-default.png")}
style={{width: screenWidth, height: screenHeight, resizeMode: 'cover'}} >
<Content scrollEnabled={false}>
<Grid>
<Row style={{ height: screenHeight*0.36, alignItems:'center',justifyContent:'center' }}>
<Image style={styles.iconImage} source={{ uri: this.state.image_url.displayImage}}/>
</Row>
<Row style={{ backgroundColor: "#1a0568", height:screenHeight*0.058, textAlignVertical: 'center', alignItems: 'center'}}>
<Text style={styles.titleStyle}>{"Information list"}</Text>
</Row>
<Row style={{ backgroundColor: 'none',height:screenHeight*0.38}}>
<FlatList
style={[styles.listContainer]}
data={this.state.informationList}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
</Row>
</Grid>
</Content>
</ImageBackground>
</Container>
As you can see, I set flatlist height screenHeight*0.38, therefore, in some mobile its perfect, but in some mobile there is some empty space. (See the attached picture)
I have tried to make it dynamic with different example to fill rest of the space like
How to set the style attribution to fill the rest space?
(though I need to fill until footer bar), This example works well with normal component But it didnt work with flatlist. Flatlist doesnt scroll anymore. Because it loads all rows which goes out of the screen. what is the right way of setting dynamic height with flatlist?

I could solve it by playing around with different options and taking help from How to set the style attribution to fill the rest space?
Unfortunately Grid, Row did not work with this.
Here is the demo (Don't forget to select iOS or android tab to view the app)
https://snack.expo.io/#shaondebnath/layouttest

Related

ScrollView won't Scroll at all

I have a React page that needs a Scrollview, there's no way around it. The content goes off the bottom of the screen, and it is encapsulated in the ScrollView. I have a red border on the ScrollView element so I can see that it goes past the bottom of the screen where the rest of my content it. However, it just does not want to scroll. I even put an 'onScroll' prop inside with console.log('hit') at one point to see if the ScrollView was even registering my attempts, it was not. This is happening in a couple of similar components, their structure is very similar. The smallest of them looks like this...
<ScrollView style={{borderColor: 'red', borderWidth: 3}}>
<View style={QualityStyles.container}>
<View style={{width: '100%'}}>
<Text style={QualityStyles.leadersTitle}>Top Three Leaders</Text>
</View>
<View style={QualityStyles.topThree}>
{renderTopThree(topThree)}
</View>
<View style={{width: '100%'}}>
<Text style={QualityStyles.leadersTitle}>Employees</Text>
</View>
<View style={QualityStyles.remainders}>
{renderOthers(others)}
</View>
</View>
</ScrollView>
The code's pretty straightforward, with renderTopThree returning 3 components that will take up about 90% of the screen, and renderOthers will fit maybe one component on the screen, and the rest (while rendered and existent) can't be seen since I can't scroll. Anyone see what could be wrong?
I resolved the issue, I had a TouchableWithoutFeedback wrappping the entire Application, and it was blocking out any ability to scroll

Expo react native, how to make a responsive clickable list with columns

I have recently been learning react native and I am using expo. I want to make a responsive grid of clickable items. Similar to how an iphones main screen has a bunch of apps on it in a grid. My attemps so far have gotten me this:
For what you see in the image I am using a flat list with a fixed number of columns (hence one of the columns being cut off). The items in the list do not respond to clicks.
How should I go about making this into a responsive grid that adjusts to different phones screen sizes, have it scrollable (which it currently is) and have each item in the list respond to being pressed?
I appreciate anything pointing me in the right direction
you can do it in two ways.
1. by using ant rn design use "GRID COMPONENT"
<Grid
data={data}
columnNum={3}
isCarousel
onPress={(_el, index) => alert(index)}
/>
**Sample** : [Vist][1]
for more [visit here][1] .
By Using "FlatList"
<FlatList
data={[{},{}]} //array of objects
renderItem={({item}) => (
<TouchableOpacity
style={style.GridViewBlockStyle}
onPress={this._handleClick.bind(this, item.link, item.text)}
>
<View
style={{
height: 100,
justifyContent: 'center',
alignItems: 'center',
}}
>
{item.icon}
<Text style={style.GridViewInsideTextItemStyle}> {item.text}
</Text>
)}
</View>
</TouchableOpacity>
)}
numColumns={3}
keyExtractor={item => item.id.toString()}
style={{}}
/>
Sample Visit.

How to separate 2 images in react native

Here in my application I have added 2 images side by side in a scrollView but they are joined each other I want them to be saperated by spaces.
here is the image of how it looks
Here is the code:
<View style={{ height: 230, marginTop: 20, justifyContent:'space-around' }}>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false} >
<Image source={require('../assets/images/restaurant.jpg')} />
<Image source={require('../assets/images/experiences.jpg')} />
</ScrollView>
</View>
Add margin to each image and resize the images accordingly. If you dont want extra margin around every side of the images provide the first image marginRight and the second image marginLeft.

Converting portrait video to landscape React-Native Android

My issue right now is when videos that were recorded in portrait mode get cut off or zoomed in when watching them in landscape. What is happening is the user has to scroll down to see the length of the video because the width is set to 100%. I am able to add 35% left and right padding to the view styling to make the video fit the screen but it doesn't seem very robust as it still gets slightly cut off on different devices. Is there any styling advice for this situation? I am new to this so if you want any more information regarding the problem let me know.
You can try wrapping up the <Video /> component inside a parent <View /> with flex: 1. Something like this will work -
<View style={{flex: 1}}>
<View style={{flex: 1}}/>
<Video style={{flex: 1}} resizeMode="contain" />
<View style={{flex: 1}}/>
</View>
resizeMode="contain" will maintain the aspect ration of the video and the other two <View />s will occupy equal space causing the portrait video to render in landscape.

Flexbox align images with different size to fill the area

I am using React Native's flexbox (not css flexbox). I am creating an image gallery and the first image has to be double the size, and the rest of the images smaller. Works good, but I have a problem that the third image is displayed in new row, instead where the blank space is.
Is it possible to achieve such behaviour with flex-box, so that the third image would be below the first small image?
I tried all combinations with aligning items, self aligning, flex directions, but no success. If needed I can provide a small example of the code which I already have.
I don't have a fully responsive answer, but this may be helpful here:
<View style={{ flexDirection: 'column' }}>
<View style={{ flexDirection: 'row' }}>
{this.renderPhoto(0)}
<View>
{this.renderPhoto(1)}
{this.renderPhoto(2)}
</View>
</View>
<View style={{ flexDirection: 'row' }}>
{render rest...}
</View>
</View>
Try this component. Maybe it will help you
https://xudafeng.github.io/autoresponsive-react/