We Keep Coding

React Native ScrollView fetch data from page

I am making an application, which brings wordpress data, more specifically I export post from a news page.
When I bring the list of posts, everything is fine, but when I put the ScrollView on it so that the screen can scroll. the screen returns to the original position.
I do not know if I explain myself well, but when I try to slide the screen down, the screen returns up
This is my code
...
{({loading, error, data}) => {
if (loading){
return(
<View style={styles.container}>
<Text>loading...</Text>
</View>
)
}
console.log(data);
return (
<View style={styles.container}>
<ScrollView>
{data.posts.edges.map((post, key) => {
return(
<View style={styles.vcontainer} key={key}>
<TouchableOpacity onPress={() => {
navigation.navigate('Post', {id: post.node.id});
}}>
<Image style={styles.postimg} source={require('../../img/imgnotfound.jpeg')} resizeMode = 'cover'/>
<Text style={styles.title}>{post.node.title}</Text>
</TouchableOpacity>
</View>
)
}
)}
</ScrollView>
</View>
)
}}
</Query>
...
this is a short video of my case: https://drive.google.com/file/d/1oc0yYTbhQkz0lrRgNon_vNrUM1U8lZ3W/view?usp=sharing
my styles code:
const styles = StyleSheet.create({
container:
{
flex: 1,
padding:20
},
postimg:
{
width: '100%',
height: '20%',
borderRadius: 20,
marginBottom: '1%'
},
titulo:
{
fontSize: 18,
fontWeight: 'bold',
marginBottom: '1%',
}
})

React-Native render a Card Component using FlatList not working

I'm new to React-Native I want to render the Card Component with different json data from an external file. My problem which i don't see is that the card component image is not showing and the card components are not stacking on top of each other. This is what i have so far. The card Component is being rendered through it's parent component which is Recipie.
Below is the Parent Component Recipie
import RecipieData from '../Data/Data'
const Recipies = () => {
return (
<View style={styles.background}>
<View style={styles.cards}>
<FlatList
style={{height: '100%'},{width:"100%"}}
data={RecipieData}
keyExtractor={item => item.id}
renderItem={({ item }) =>
<Card
image={item.photo}
title={item.name}
time={item.time}
/>
}
/>
</View>
</View>
)
}
export default Recipies
const styles = StyleSheet.create({
background:{
backgroundColor:'#F2F2F2',
height: "100%",
flex: 1,
},
cards:{
marginHorizontal:20,
marginVertical:30,
}
})
`
Here is the Child Component Card
const Card = (props) => {
return (
<View style={styles.card}>
<LikeButton/>
<Image style={styles.image} source={{uri: props.image}}/>
<Text style={styles.title}>{props.title}</Text>
<Text style={styles.time}>{props.time}</Text>
</View>
)
}
export default Card
const styles = StyleSheet.create({
card:{
marginVertical:15,
width:'100%',
borderRadius:35,
backgroundColor:'black',
},
image:{
marginLeft:0,
padding:0,
width:'100%',
height:'100%',
borderRadius:30,
position:'relative',
opacity:0.65
},
title:{
position:'absolute',
marginTop:65,
marginBottom:0,
marginHorizontal:20,
fontSize: 30,
color:'white',
fontWeight:'bold'
}, time:{
width:'20%',
textAlign:'center',
marginVertical: 20,
position:'absolute',
backgroundColor: Colors.green,
color:'white',
fontSize: 25,
fontWeight:'bold',
bottom:0,
borderRadius:20,
marginLeft: 20
}
})
I've tried everything . I'm really trying to get the card components stacked in a column view with the props from the external json file called RecipieData. Please can someone help me it will be much appreciated!!!!

you can try this cards:{ marginHorizontal:20, marginVertical:30, flex : 1 }

renderItem should return a component.Use this
renderItem={({ item }) =>
return(<Card
image={item.photo}
title={item.name}
time={item.time}
/>)}

Is there a way to make a sized and functional FlatList inside a Modal?

Good evening!
I have been trying to create a modal with a scrollable FlatList inside, but such FlatList should have its height size reduced. The modal is going to search a wide list of airports, so basically a lot data might be shown, hence why FlatList is the best tool for this occasion. Basically, the modal screen would look like this picture below:
However, I can't make the scroll inside FlatList work no matter what. Here is the code, with the FlatList that is somewhat functional, but it has a warning:
const styles = StyleSheet.create({
modalContainer: {
backgroundColor: 'rgba(50,50,50,0.6)',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
modalActivityContainer: {
backgroundColor: colors.colorWhite,
borderColor: colors.colorLightBlack,
borderWidth: 2,
borderRadius: 20,
padding: props.padding ? Number(props.padding) : 10,
maxWidth: '85%',
},
modalHeader: {
flexDirection: 'row',
justifyContent: 'center',
},
headerAirportModal: {
backgroundColor: colors.colorGrey,
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
paddingHorizontal: 5,
paddingVertical: 10,
width: '100%',
justifyContent: 'center',
},
searchAirportBarContainer: {
backgroundColor: colors.colorWhite,
height: 40,
},
...
<Modal
onRequestClose={() => props.onRequestClose()}
animationType="fade"
transparent
visible={props.showModal}>
<TouchableWithoutFeedback
onPress={() => {
props.onRequestClose();
}}>
<View style={styles.modalContainer}>
<TouchableWithoutFeedback>
<View style={styles.modalActivityContainer}>
<View style={styles.modalHeader}>
<View style={styles.headerAirportModal}>
<Item style={styles.searchAirportBarContainer} rounded>
<Icon
style={styles.iconSearchAirport}
type="FontAwesome5"
name="search"
/>
<Input
style={styles.searchAirportBarText}
placeholderTextColor={colors.colorLightBlack}
placeholder="Search by Airport, Country or City"
/>
</Item>
</View>
</View>
<View>
<View style={styles.modalHeader}>
<Grid style={styles.headerAirportModalBackground}>
<Text style={styles.headerAirportModalText}>Latest Searches</Text>
<TouchableOpacity style={styles.clearButtonLatestContainer}>
<View>
<Text style={styles.clearButtonAirport}>Clear</Text>
</View>
</TouchableOpacity>
</Grid>
</View>
</View>
<View style={{maxHeight: 250}}>
<ScrollView>
<View onStartShouldSetResponder={() => true}>
<FlatList
data={airportElements}
renderItem={renderAirportItem}
keyExtractor={(item) => item.id}
/>
</View>
</ScrollView>
</View>
<Button
backgroundColor={colors.colorRed}
alignSelf="stretch"
buttonStyle={styles.finishButton}
onPress={() => {
setModalSelectAirport(false);
}}>
Cancel
</Button>
</View>
</TouchableWithoutFeedback>
</View>
</TouchableWithoutFeedback>
</Modal>
If I use the FlatList inside the ScrollView like shown above, the code works as intended. However, I got this warning:
VirtualizedLists should never be nested inside plain ScrollViews
with the same orientation - use another VirtualizedList-backed
container instead.
Because of that, I can't use FlatList properly. Also, I have managed to make it work with .map, but it was advised to not use it as I am going to load a list with a lot of elements and that might cause lag.
I have managed to implement FlatList in another way like this:
<View
style={styles.airportLatestSearchListContainer}>
<FlatList
contentContainerStyle={styles.airportLatestSearchlist}
data={airportElements}
renderItem={renderAirportItem}
keyExtractor={(item) => item.id}
/>
</View>
This, however, prevents the user to scroll. The list remains static and the user can't scroll at all.
I have tried using {flex: 1, flexGrow: 1} in the parent View and FlatList itself, both don't work at all, even inside the FlatList container or the style.
Can someone please help me with this one? I really appreciate the time and effort! Thanks!

React Native - How to set width of Views inside ScrollView to fit?

I have multiple Views inside my horizontal ScrollView. How can I set them such that each of those views has the exact dimensions as that of the ScrollView?
I want to use paging and go to my next View inside the ScrollView on swiping. I have tried to use width : "100%" but it does not work as ScrollView does not have fixed dimensions, but that is basically what I want to do with the views inside it. Here is my code:
export default class HorizontalScrollView extends Component {
render () {
screenWidth = "100%"
return (
<ScrollView
contentContainerStyle={styles.scrollable}
horizontal={true}
snapToInterval={screenWidth}
decelerationRate={"fast"}
>
<View style={StyleSheet.compose(styles.insideContainer, {"width" : screenWidth, "backgroundColor" : "red"})}>
<Text>Screen 1</Text>
</View>
<View style={StyleSheet.compose(styles.insideContainer, {"width" : screenWidth, "backgroundColor" : "blue"})}>
<Text>Screen 3</Text>
</View>
<View style={StyleSheet.compose(styles.insideContainer, {"width" : screenWidth, "backgroundColor" : "green"})}>
<Text>Screen 2</Text>
</View>
</
StyleSheet:
styles = StyleSheet.create({
"scrollable" : {
"backgroundColor" : "black",
"height" : "100%"
},
"insideContainer" : {
"alignItems" : "center",
"justifyContent" : "center",
"flex" : 1,
}
})
P.S. - I am using an Android Samsung Galaxy M30 to test this.
Any help or explanation would be appreciated.
Thank you.

Based on your code use these styles to accomplish what you want
<ScrollView horizontal={true} snapToInterval={Dimensions.get('screen').width} contentContainerStyle={{minHeight: '100%'}}>
<View style={{flexDirection: 'row'}}>
<View style={{width: Dimensions.get('screen').width, height: Dimensions.get('screen').height, backgroundColor: 'green'}}>
<Text>Screen 1</Text>
</View>
<View style={{width: Dimensions.get('screen').width, height: Dimensions.get('screen').height, backgroundColor: 'red'}}>
<Text>Screen 2</Text>
</View>
<View style={{width: Dimensions.get('screen').width, height: Dimensions.get('screen').height, backgroundColor: 'yellow'}}>
<Text>Screen 3</Text>
</View>
</View>
</ScrollView>

If your scroll view is the width of the screen, you can set each view inside to have a width of
Dimensions.get(“screen”).width
Then set the pagingEnabled prop of the ScrollView to true and you should have a paging scroller with full width sub views.

React Native - Parent View to wrap the child view

I have a view having text inside it. The component looks like this:
MyComponent = () => {
return (
<View style={styles.viewStyle}>
<Text style={styles.textStyle}>My Text</Text>
</View>
);
}
const styles = {
viewStyle: {
backgroundColor: '#006699',
height: 40,
justifyContent: 'center',
alignItems: 'center',
},
textStyle: {
color: '#000000',
fontSize: 16,
}
}
When this component gets used, I want my View to have a custom width such that it just wraps my text. Here's the visual clue:

It's about the original design of Layout with Flexbox.
You can make it work by either add flexDirection: 'row' to it's parent view (so it will stretch automatically related to <Text /> width),
<View style={{flex: 1, flexDirection: 'row'}}>
<View style={styles.viewStyle}>
<Text style={styles.textStyle}>My Text</Text>
</View>
</View>
or give width to it directly.
<View style=[{styles.viewStyle}, {width: 50}]>
<Text style={styles.textStyle}>My Text</Text>
</View>
Result of option 1: