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%',
}
})
Related
In my containerTop, I am rendering a list inside TripOptionsSelectorthat hides towards the end.
I have tried adding marginBottom/paddingBottom to containerOptionsSelectorbut it makes no difference. I don't want to add a height to my because it can vary according to different phones.
How else can I simply extend the View such that the text doesn't hide?
export const MapScreen: React.FunctionComponent = () => {
return (
<SafeAreaView style={styles.safeAreaViewContainer}>
<View style={styles.container}>
<View style={styles.containerTop}>
<BackArrow />
<JourneyLocationsTextContainer />
<View style={styles.containerOptionsSelector}>
<TripOptionsSelector />
</View>
</View>
<View style={styles.containerMap}>
<MapContainer />
<ButtonsContainer />
</View>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
safeAreaViewContainer: { flex: 1 },
container: { flex: 1, backgroundColor: 'white'},
containerTop: { flex: 1, backgroundColor: '#323443' },
containerOptionsSelector: {
marginTop: moderateScale(15),
marginLeft: moderateScale(20),
},
containerMap: {
flex: 2
},
});
export const TripOptionsSelector: React.FunctionComponent = () => {
return (
<View style={styles.offerContainer}>
<Text style={styles.offerText}>Jetzt</Text>
<Text style={styles.offerText}>1 Person</Text>
<Text style={styles.offerText} >Filter</Text>
</View>
);
};
const styles = StyleSheet.create({
offerContainer: {
flexDirection: 'row',
},
You just remove flex from styles.containerTop - so it's sized based purely on its content.
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}
/>)}
I have some data in my firestore. The structure is :
User -> DocId(Some id)-> name(String), number(String), friends (array)
I got the friends array and i append to my local array data. Now when i render in the flat list. Its not showing. But same temp data which i created locally its working fine. I check my array data count after i fetch from firestore. Its showing correct count. But not able to display the data in flat list.
My code :
import firebase from '#react-native-firebase/app';
import firestore from '#react-native-firebase/firestore';
UserArray =[]
export default class HomeScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
UserArray: [],
}
}
componentWillMount() {
firebase.firestore().doc(`User/${'beQVEcfLsXV8JhA8L2SDDq03bmD3'}`)
.get()
.then(doc => {
this.setState({UserArray: doc.data().friends})
})
}
renderPost = post => {
return (
<View style={styles.feedItem}>
<Feather name="book" style={styles.avatar} size={30}/>
<View style={{ flex: 1 }}>
<View style={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}>
<View>
<Text style={styles.name}>{post.name}</Text>
<Text style={styles.timestamp}>{post.name} | {post.name}</Text>
</View>
</View>
</View>
<Feather name="chevron-right" style={{color: "#808080", alignSelf: 'center'}} size={20}/>
</View>
);
};
render() {
return (
<View style={styles.container}>
{
UserArray.length ?
(<FlatList
style={styles.feed}
data={UserArray}
keyExtractor={(index) => index.toString()}
renderItem={({ item }) => this.renderPost(item)}
// keyExtractor={item => item.id}
showsVerticalScrollIndicator={false}
></FlatList>) :
(
<View style={{ width: '70%', alignSelf: 'center',justifyContent: 'center' , alignItems: 'center', marginTop: '20%'}}>
<Feather name="smile" color="#009387" size={40}/>
<Text style={{paddingTop: 20, textAlign: 'center', fontSize: 15, fontWeight: 'bold', color: '#A9A9A9'}}>Hey folk, You dont' have any friends list</Text>
</View>
)
}
</View>
);
}
}
In my screen i am always getting. You don't have any data.
But in componentDidMount() after i fetch data from firestore. Inside my then :
.then(doc => {
alert(UserArray.length);
})
Its showing correct array count. Here is my friends array :
{
"name": "quaroe",
"number": "3940904",
friends: [
{
"name": "alber"
},
{
"name": "romea"
},
{
"name": "basea"
}
]
}
my doubt is that render is called before componentDidMount. But i tried componentWillMount. And i added alert. Always render called first and then only componentWillMount or componentDidMount is getting called
Put your UseArray in the state instead. I believe the flatlist is not showing anything because when it is rendered your firebase function is not yet completed so UseArray is empty. And render cant detect changes of your constant UseArray that why it's not showing any list even if your fetch is succesful.
try this
import firestore from '#react-native-firebase/firestore';
export default class HomeScreen extends React.Component {
constructor(props) {
super(props);
this.state = {
userArray: [],
};
}
componentDidMount() {
firebase
.firestore()
.doc(`User/${'beQVEcfLsXV8JhA8L2SDDq03bmD3'}`)
.get()
.then(doc => {
this.setState({userArray: doc.data().friends});
});
}
renderPost = post => {
return (
<View style={styles.feedItem}>
<Feather name="book" style={styles.avatar} size={30} />
<View style={{flex: 1}}>
<View
style={{
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
}}>
<View>
<Text style={styles.name}>{post.name}</Text>
<Text style={styles.timestamp}>
{post.name} | {post.name}
</Text>
</View>
</View>
</View>
<Feather
name="chevron-right"
style={{color: '#808080', alignSelf: 'center'}}
size={20}
/>
</View>
);
};
render() {
return (
<View style={styles.container}>
{this.state.userArray && this.state.userArray.length > 0 ? (
<FlatList
style={styles.feed}
data={this.state.userArray}
keyExtractor={index => index.toString()}
renderItem={({item}) => this.renderPost(item)}
// keyExtractor={item => item.id}
showsVerticalScrollIndicator={false}
/>
) : (
<View
style={{
width: '70%',
alignSelf: 'center',
justifyContent: 'center',
alignItems: 'center',
marginTop: '20%',
}}>
<Feather name="smile" color="#009387" size={40} />
<Text
style={{
paddingTop: 20,
textAlign: 'center',
fontSize: 15,
fontWeight: 'bold',
color: '#A9A9A9',
}}>
Hey folk, You dont' have any friends list
</Text>
</View>
)}
</View>
);
}
}
The problem is that the last result from the search is hidden by the bottomTabNavigaor and I can't scroll the last result above it.
I need to see the bottomTabNavigaor not to hide it.
return (
<View>
<ScrollView style={{ backgroundColor: '#DEFEFC'}}>
{musicList.map(songObj => {
return (
<View key={songObj.Song_ID} >
<TouchableOpacity style={styles.resultsContainer}
onPress={this.GetListViewItem.bind(this, songObj.Song_ID)}
>
<Text style={{ fontSize: 16, flex:1}} key={songObj.Song_ID}>
{songObj.Song_Name}
</Text>
<Image source={{ uri: songObj.Image }} style={styles.img} />
</TouchableOpacity>
</View>
);
})}
</ScrollView>
</View>
);
my bottomTabNavigator:
const HomeStack = createStackNavigator({
Home: HomeScreen
});
HomeStack.navigationOptions = {
tabBarLabel: "Home",
tabBarIcon: (
<Image
style={{ width: 27, height: 27 }}
source={{uri: bottomImage+ "/home.png"}}
/>
)
};
const SearchStack = createStackNavigator({
Search: SearchScreen
});
SearchStack.navigationOptions = {
tabBarLabel: "Search Music",
tabBarIcon: (
<Image
style={{ width: 27, height: 27 }}
source={{uri: bottomImage +"/search_1.jpg"}}
/>
)
};
/////----{ I shorten it you can guess the others} ---
export default createBottomTabNavigator({
HomeStack,
ArtistsStack,
SearchStack,
PlaylistStack,
ShowDataStack
});
if any additional code is needed please tell me and I'll put it here.
This issue is not due to the navigator we had the same issue with the Scroll view the easiest way to sort it will be using a padding at the bottom for the scroll view.
<ScrollView style={{ backgroundColor: '#DEFEFC',paddingBottom: 50}}>
</ScrollView>
Update the padding value based on the height of your item.
I am creating list of items on react native app. I want to make swipe to left and right every item of this list. So when I swipe to left I want to hide Views that was rendered and show new elements. Also when I swipe to right I want to display other elements that will be different from that element that will be rendered when I swipe left. I found this library called "react-native-swipe-gestures" but I can't figure out how to display and hide elements with it. I declared some items but when I try to display it i got an error that "can't find variable 'item'" maybe you will have some explain to me how I should use it to actually get working swipe left and right.
import React, {Component} from 'react';
import {
ScrollView,
Text,
View,
Image,
Button
} from 'react-native';
import GestureRecognizer, {swipeDirections} from 'react-native-swipe-gestures';
import {List, ListItem} from "react-native-elements";
class Offers extends Component {
constructor(props) {
super(props);
this.state = {
myText: '',
gestureName: 'none',
icons: '',
guardian: '',
area: '',
rooms: '',
floor: '',
market: '',
year: '',
pricePerMeter: '',
};
}
onSwipeRight(gestureState) {
this.setState({myText: 'You swiped right!'});
}
onSwipe(gestureName, gestureState) {
const {SWIPE_LEFT, SWIPE_RIGHT} = swipeDirections;
this.setState({gestureName: gestureName});
switch (gestureName) {
case SWIPE_LEFT:
this.setState({backgroundColor: 'blue'});
break;
case SWIPE_RIGHT:
this.setState({backgroundColor: 'yellow'});
break;
}
}
onSwipeLeft(gestureState) {
this.setState({
guardian: item.offerGuardian, //items from const offers
area: item.offerArea,
floor: item.offerFloor,
rooms: item.offerRooms,
market: item.offerMarket,
year: item.offerYear,
pricePerMeter: item.offerPricePerMeter,
})
}
render() {
const config = {
velocityThreshold: 0.3,
directionalOffsetThreshold: 80
};
const offers = [
{
offerNumber: 'TEST912697',
offerLocation: 'Warszawa Białołęka',
offerStreet: 'ul. Bruszewska',
offerType: 'Mieszkanie',
offerStatus: 'Akt. Wewnętrzna',
offerStatusColor: '#0FBEB2',
offerAddDate: '2017-09-20 12:08:06',
offerPrice: '2 450 000',
photo: 'https://static.pexels.com/photos/164516/pexels-photo-164516.jpeg',
offerGuardian: 'Adam Borek',
offerTransactionType: 'sprzedaż',
offerArea: '50 m2',
offerRooms: '2 pokoje',
offerFloor: '1 z 2',
offerYear: '2005 rok',
offerMarket: 'rynek pierwotny',
offerPricePerMeter: '5000 zł/m2'
},
];
return (
<ScrollView>
<View style={{
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'flex-end'
}}>
<View style={{marginRight: 20, marginTop: 10}}>
<Button title="akcje"/>
</View>
</View>
{offers.map((item, i) => (
<View key={i}>
<List>
<GestureRecognizer
onSwipe={(direction, state) => this.onSwipe(direction, state)}
onSwipeLeft={(state) => this.onSwipeLeft(state)}
onSwipeRight={(state) => this.onSwipeRight(state)}
config={config}
style={{
flex: 1,
backgroundColor: this.state.backgroundColor
}}
>
<ListItem
roundAvatar
subtitle={
<View style={{flexDirection: 'row'}}>
<View>
<Text>{this.state.myText}</Text>
<Text>{this.state.guardian}</Text>
<Text>{this.state.area}</Text>
<Text>{this.state.floor}</Text>
<Text>{this.state.market}</Text>
<Text>{this.state.year}</Text>
<Text>{this.state.pricePerMeter}</Text>
<Image source={require('../../gfx/lel.jpg')}
style={{
height: 100,
width: 150
}}/>
</View>
<View style={{
marginLeft: 5,
flexDirection: 'row',
flexWrap: 'wrap'
}}>
<View style={{width: 140}}>
<Text>
{item.offerLocation}
{"\n"}
{item.offerStreet}
{"\n"}
{item.offerType} na {item.offerTransactionType}
{"\n"}
{item.offerNumber}
</Text>
</View>
<View>
<View style={{
justifyContent: 'flex-end',
width: 95,
height: 30,
backgroundColor: item.offerStatusColor
}}>
<Text style={{color: '#fff', textAlign: 'center'}}>
{item.offerStatus}
</Text>
</View>
<View style={{
flexDirection: 'column',
alignItems: 'flex-end',
flexWrap: 'wrap'
}}>
<Text style={{fontSize: 20}}>
{"\n"}
{"\n"}
{item.offerPrice}
</Text>
</View>
</View>
</View>
</View>
}
onPress={() => this.props.navigation.navigate('OffersDetails')}
/>
</GestureRecognizer>
</List>
</View>
))}
</ScrollView>
)
}
}
export default Offers;
I would recommend trying out this libray react-native-swipe-list-view. It is well documented and easy to use for any type of swipable row. https://github.com/jemise111/react-native-swipe-list-view
The basic concept is that you have one element in front of a hidden element. When you swipe it just reveals the hidden element below.