i have an array of posts , and when i click on one of them i want it to take me to a screen containing all the posts but i want it to auto focus on the one that i clicked on before , then after that i can scroll like i want ! is that possible on ScrollView or maybe Flatlist ?
<ScrollView contentContainerStyle={{}}>
{posts?.map((post, index) => (
<View key={index} style={{ flex: 1 }}>
<Post item={{ ...post, user: item.user }} navigation={navigation} />
</View>
))}
</ScrollView>
Related
I want parent Screen to be fixed and Child Screen to be scrollable. using scroll doesn't provide me that functionality so what should I do ?
The ScrollView component does exactly what you want. The order of your components is the only important factor here.
In general, everything that is nested inside a ScrollView is scrollable, and everything outside is not. Hence,
<View>
<View>
// not scrollable
</View>
<ScrollView>
// scrollable
</ScrollView>
<View>
// not scrollable
</View>
</View>
Here is an example of a scrollable container using ScrollView that is nested inside a parent View which is fixed, meaning not scrollable.
<SafeAreaView style={{ margin: 5 }}>
<View>
{Array(5)
.fill(0)
.map((_) => {
return (
<View style={{ margin: 10 }}>
<Text>Not scrollable</Text>
</View>
)
})}
</View>
<ScrollView>
{Array(5)
.fill(0)
.map((_) => {
return (
<View style={{ margin: 10 }}>
<Text>Scrollable</Text>
</View>
)
})}
</ScrollView>
<View>
{Array(5)
.fill(0)
.map((_) => {
return (
<View style={{ margin: 10 }}>
<Text>Also not scrollable</Text>
</View>
)
})}
</View>
</SafeAreaView>
which yields five text components at that top which are not scrollable, followed by five text components that are scrollable, followed by five text components that aren't scrollable.
I am new to React native and implementing FlatList where I am facing some issues with dynamic data. I have a list of total seats and booked seats.
this.state = {
seats: props.route.params.seats,
reservedSeats: props.route.params.Reserved,
date: new Date()
}
Following is the FlatList i have implemented
<FlatList style={styles.flatListArea1}
contentContainerStyle={{margin:0}}
data={this.state.seats}
numColumns={4}
showsHorizontalScrollIndicator={false}
renderItem={({item}) =>
<View style={styles.containerIcons} key={item}>
<TouchableOpacity style={this.state.selectedItem === item ? styles.menuSelected : styles.menuTop } onPress={ () => this.selectSeat(item)}>
<View style={styles.buttons}>
<Text style={styles.HallsText} key={item.key}>{item.Id}</Text>
</View>
</TouchableOpacity>
</View>}
/>
On Click event, I am able to change the color. I appreciate if someone can help to understand, How we can re-render FlatList based on dynamic data presented in reserved state. For example. for today, out of 5 seats 3 are booked. Those should be gray and others should be red.
I appreciate your help on this.
Regards,
You firstly need a method that tells if a seat is available or not.
isReserved = (item) => {
return this.state.reservedSeats.filter(seat => seat.Id ==item.Id).length > 0;
}
Then you change the appearance of your list like this
<FlatList
style={styles.flatListArea1}
contentContainerStyle={{ margin: 0 }}
data={this.state.seats}
numColumns={4}
showsHorizontalScrollIndicator={false}
renderItem={({ item, index }) => (
<View style={[styles.containerIcons, { backgroundColor: isReserved(item) ? "#FAFAFA" : "white" }]} key={index}>
<TouchableOpacity
style={this.state.selectedItem === item ? styles.menuSelected : styles.menuTop}
onPress={() => this.selectSeat(item)}
disabled={isReserved(item)}
>
<View style={styles.buttons}>
<Text
style={[styles.HallsText, { backgroundColor: isReserved(item) ? "#CCC" : "white" }]}
key={item.key}
>
{item.Id}
</Text>
</View>
</TouchableOpacity>
</View>
)}
/>;
Pay attention to the key attribute
In my code I did swiper with the "react-native-swiper" directory.
There is a problem that when the swiper screen is displayed then the last page jumps to the first page and stop there. (for example if I have 4 points in the swiper view then the leftmost point jumps to the rightmost)
I would love direction in solving my problem.
<Swiper
scrollsToTop={true}
showsVerticalScrollIndicator={true}
bounces={true}
dotStyle={styles.NonActiveDot}
activeDotStyle={styles.activeDot}
>
{Object.keys(groupFacilities).map((key) => (
<SafeAreaView key={key} style={styles.safeArea}>
<View key={key}>
<View style={styles.secondaryTitleView}>
<Text style={styles.secondaryTitleText}>{`${selectedEpicenter[0]?.EpicenterName} - ${key}`}</Text>
</View>
<FlatList
data={groupFacilities[key]}
renderItem={renderItem}
keyExtractor={item => item.ID}
/>
</View>
</SafeAreaView>
))}
</Swiper>
I have a Flatlist on react native by which its working perfectly, recently saw an UI which has a custom designed compoenent in between the list, kindly check the below reference image
Check this image, a new design named "Safety+" has been added inside an list, How to do this ?
Need to add custom design like below randomly inside and already rendered flatlist ! How to achieve this , as i couldn't find or understand where to start
Please check the image and help in achieving this:
<FlatList
contentContainerStyle={{ paddingBottom: 50 }}
data={this.state.availableBusList}
keyExtractor={item => item.id}
renderItem={({item}) => {
return(
<TouchableOpacity style={styles.busCardContainer}
onPress={() => {
console.log(item);
//this.props.navigation.navigate('SeatLayout')
}}
<Text>{item.name}</Text>
>)}}
/>
This is my flatlist code
You can return a fragment with your component and a randomly included component. The condition for inclusion is up to you, i.e. complete chance, every 5th element, etc.
<FlatList
contentContainerStyle={{ paddingBottom: 50 }}
data={this.state.availableBusList}
keyExtractor={item => item.id}
renderItem={({item}) => {
return(
<Fragment>
<TouchableOpacity style={styles.busCardContainer}
onPress={() => {
console.log(item);
//this.props.navigation.navigate('SeatLayout')
}}
>
<Text>{item.name}</Text>
</TouchableOpacity>
{Math.random() < 0.5 && ( // example 50% chance to include random component
<RandomComponent>...</RandomComponent>
)}
</Fragment>
)}}
/>
You can render conditionally in your renderItem function: https://reactjs.org/docs/conditional-rendering.html
Additionally, if you want to render your custom component at specific indexes, you can also put index parameter into renderItem. Here is my example:
<FlatList
contentContainerStyle={{ paddingBottom: 50 }}
data={this.state.availableBusList}
keyExtractor={item => item.id}
renderItem={({ item, index }) => {
return index % 5 === 0 ? <CustomComponent /> : <NormalComponent />;
}}
/>
I want to make sure that the selected item is always in the middle of the flatlist. The middle item is selected. The style of the chosen one is different than the others.
<FlatList data={items}
style={styles.listStyle}
ref={(ref) => {
this.flatListRef = ref;
}}
snapToAlignment={'center'}
horizontal
onPress={this.onPressButton}
showsHorizontalScrollIndicator={false}
renderItem={({item, index}) => (
<TouchableWithoutFeedback style={{justifyContent: 'center'}}
onPress={this.onPressButton}>
<View style={{justifyContent: 'center'}}>
<View style={styles.containerView}>
<View
style={[styles.circlesBack, (this.state.selectedId === index) ? styles.circles : styles.circlesBack]}>
{this.state.selectedId === index ?
<FontAwesome size={24} name={item.icon} color="white"/> :
<FontAwesome size={24} name={item.icon} color="#BEBEBE"/>}
</View>
{this.state.selectedId === index ? <Text
style={[styles.itemText, (this.state.selectedId === index) ? styles.itemText : styles.itemTextBack]}>{item.title}</Text> :
<Text> </Text>}
</View>
</View>
</TouchableWithoutFeedback>
)}
keyExtractor={item => item.id}/>
this is what it looks like now
it should look like this
How to do it?
Thank you
You should use like this:
this.flatListRef.scrollToIndex({animated: true, index: 30, viewPosition:0.5})
Valid params keys are:
'animated' (boolean) - Whether the list should do an animation while scrolling. Defaults to true.
'viewPosition' (number) - A value of 0 places the item specified by index at the top, 1 at the bottom, and 0.5 centered in the middle.
Here is someone's code for example, you can instead the line
this.flatListRef.scrollToIndex({animated: true, index: 30,viewPosition:0.5});
of
this.flatListRef.scrollToIndex({animated: true, index: randomIndex});
then you can see it works(at right choose android or ios to run will be better)
docs
But the several begins item seems can't go to middle because of there are no data before. Or you can use react-native-infinite-looping-scroll to let other data at bottom connect back to first. Maybe can achieve this problem.