Here is a thing, I'am struggling about using RN .
I would like to use flatlist to generate my content.
the flatlist contents can be pressed so It makes to go another page open.
I need animation freedom so the content can be pop up anywhere such as from the bottom, left, right.
I would like to use one layout which I was already built.
such a concept are, using renderingItem into view, than generating data in my component. here is concept I tried to do
<View style={styles.flatList}>
<FlatList
data={newsFeedData}
horizontal={false}
showsVerticalScrollIndicator={false}
renderItem={({item, index})=>{ return
<View>
<TouchableOpacity
activeOpacity={1}
onPress={this.newsFeedCards.bind(this)}>
<View style={styles.mgView}>
<ListItem item={item} image={item} index={index}/>
</View>
</TouchableOpacity>
</View>
}}/>
</Animated.View>
<View data={newsFeedData}
style={styles.pageDetail}
renderItem={(item, idex)=>{
return <PageDetail
item={item} image={item} image={item}></PageDetail>
}}>
</View>
Please help me anyone know the trick of this concept. I really appreciate your help!
Related
return(
<View style={styles.container}>
<View style={styles.searchbarContainer}>
<TouchableOpacity style={styles.ThreeLineButton} onPress={returnHome}>
<Text style={{color: 'white', fontSize: 20,}}>Done</Text>
</TouchableOpacity>
{/* <Text style={{color: 'white', fontSize: 50, marginLeft: 50}}>UStudy</Text> */}
{/* <TextInput style={styles.searchbarStyle} placeholder="Search Ustudy" placeholderTextColor='#FFF' onChangeText={setSearchText} value={searchText} onChange={refreshSearch} /> */}
</View>
<ScrollView
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
/>
}
>
<FlatList
ref={(ref) => { this.commentListRef = ref; }}
data={allComments}
renderItem={({item}) => <CommentCard item={item} />}
keyExtractor={item=>item.docID}
showsVerticalScrollIndicator={false}
style={{
width: '110%',
}}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={onRefresh}
/>
}
/>
</ScrollView>
</View>
);
};
export default DynamicPostScreen
here is the code of my UI and how the TextInput is embeded. Whenever I type a character in my TextInput it refreshes the whole page and unfocuses from the TextInput. How do I stop this from happening?
Unfortunately, you didn't provide the full code of the component. I recommend you refactor the component and give it proper formatting, especially the indentation.
Also, you usually don't want a FlatList inside a ScrollView, there is probably an issue there.
About the question itself, I can't be 100% sure without the full code.
But it's possible that your setSearchText is triggering a useState change and therefore rerendering the component (that's what a state does).
This is a state management problem and you could move the TextInput to a separate component and manage the state from there so the parent component won't rerender.
Another possibility is that by using onChangeText and onChange you are triggering the render, probably with the refreshSearch function.
If this didn't help, please follow my instructions at the beginning and I'm happy to look at it again.
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
I'm trying to use a Scrollview to scroll horizontally a mapped array and also a Flatlist to scroll vertically a list of items from another array but the combination of the 2 don't seem to work.
This is not a case on wrapping a Flatlist inside a Scrollview which causes a well known problem, I'm not getting the VirtualizedLists warning here.
Here's my code in the rendering section:
return (
<View style={styles.screen}>
<Scrollview style={styles.containerRow}>
{selectedGenres.map((item) => {
return (
<TouchableOpacity
onPress={() => {
genreHandler(item.id, item.name);
}}
style={styles.containerRow}
key={item.id}
>
<View style={styles.filterGenderLayout}>
<Text style={styles.genderButton}>{item.name}</Text>
</View>
</TouchableOpacity>
);
})}
</Scrollview>
<View style={styles.container}>
<View style={styles.containerRow}>
<FlatList
numColumns={3}
data={result}
keyExtractor={(item) => item.id.toString()}
onEndReached={loadMoreCommit}
onEndReachedThreshold={0.5}
renderItem={(itemData) => (
<StarsItem
id={itemData.item.id}
poster={itemData.item.poster_path}
title={itemData.item.title}
onStarsSelection={fetchMovieHandler}
showtitle={false}
/>
)}
/>
</View>
</View>
</View>
As you can see the Scrollview and Flatlist are not nested but I get an error as invalid element. If I use a normal View tag instead of Scrollview, everything looks fine except that I cannot scroll my first list horizontally.
Any suggestion on how to fix this?
I tried to use Flatlist on both however I need the first to scroll horizontally and the second vertically with numColumns={3} meaning I get a different error.
I need to put two components at two ends of the screen. Following is my code.
<View style = {{flexDirection:"row"}}>
<Text>cancel</Text>
<Text style={{justifyContent:"flex-end",alignItems:"flex-end"}}>cancel</Text>
The two buttons are near to each other and I want to push the second button to the extreme right end of the screen without margin, how to do it by properties? It is not working currently. Thank you.
You need to do something like this
<View style={{flex:1,flexDirection:"row",justifyContent:"space-between"}}>
<View style={{flex:0.5}}>
<Text>Cancel 1</Text>
</View>
<View style={{flex:0.5,alignItems:"flex-end"}}>
<Text>Cancel 2</Text>
</View>
</View>
I built a view that is populated dynamically using array mapping. After doing this, I realized that the View would be too large to contain all the array items on one screen.
Here is my code.
<View style={[styles.flexColumn]}>
{Characters.map((character, i) =>
<View key={i} style={[styles.flexRow]}>
<View>
<Text>
{character.Name}
</Text>
</View>
</View>
)}
</View>
So I tried adding a scroll view as the parent like this:
<ScrollView>
<View style={[styles.flexColumn]}>
{Characters.map((character, i) =>
<View key={i} style={[styles.flexRow]}>
<View>
<Text>
{character.Name}
</Text>
</View>
</View>
)}
</View>
</ScrollView>
This does add some scrollability to the view, but it's still cutting off a portion of the last object in the array.
Is there a way to fix this?
Thanks!
ScrollView is intended for showing scrollable content at once. Since you are populating content dynamically, you should be using FlatList. Something similar to the following would work:
...
_keyExtractor = character => character.Name
_renderItem = ({character}) => (
<Text>
{character.Name}
</Text>
)
render() {
return (
<FlatList
data={Characters}
keyExtractor={this._keyExtractor}
renderItem={this._renderItem}
/>
)
}
...
Detailed explanation is available in the docs.
If you are by any reason still forced to stick to Scrollview, the problem is probably related to the styling. I suppose styles.flexColumn should be applied to the ScrollView itself via contentContainerStyle, rather than to its' child View.