There have been a lot of posts regarding z index and layer ordering but none with much of a solution. Its easy enough to layer things as you need, but if you need dynamic layer re-ordering it becomes a problem. Like for example I have four moveable elements, when one is selected it should move above the others but they are already in set order so each moves under the other.
If they are layered in render order than how can the active item move to the front and move above the other three?
You may solve this by changing the rendering order of your components. Lets say you have some items you want to render in an array and an index of the selected item, so your render method may look like this:
render() {
const items = ....;
const selectedIndex = ...;
return (
<View>
{items.filter((item, index) => index != selectedIndex)}
{items[selectedIndex]}
</View>
);
}
This way your selected item would always render last and be on top of the others.
Related
I have a Swiper implemented in my react native project (react-native-swiper), which I plan to show data along with pagination guides. While the swiper is working, I'm having an issue creating a consistent key - right now if one of the objects in the swiper list updates it may offset the index. While I've been able to prevent such glitches by adding a unique key on the objects, the Swiper pagination however is not in sync. The former key gets its data from mapping the list, but the Swiper object is on the outer scope so it's not able to use that identifier. I've attached the code for reference. Please let me know if I can set a key that ensures stable changes and correct pagination. Thank you.
<Swiper
key={data.length} //This is the key that enables correct pagination currently
paginationStyle={{bottom: -20}}
height={330}
dot={<View style={styles.Dot} />}
activeDot={<View style={styles.ActiveDot} />}
>
{data.map((dataX, index) => {
return (
<View key={dataX.uniqueToken}> //This (or the index) is the key I'd like to use on the Swiper element
... stuff to show images, etc.
</View>
)
})}
</Swiper>
You can try use index as a key value, I always using index and no problem
My problem is I'm using Flatlist component to render items that are not pure components. they have a bunch of states, hooks, and many functions to handle logic. Moreover, my list also has many items, at least 28 items because I want to render some information in a month. the number of items may be bigger when I fetch more data for other months.
As a result, my app's performance is really slow. Are there any solutions out there?
I think you have to use pagination to increase the performance. If you want the best possible performance with Flatlist you should do pre and post pagination. Like you have to add and remove equal amount of items from data array passed to Flatlist simultaneously.
i.e
let suppose you want to maintain the 50 items count in the array.
const [data,setData]=useState([])
const useEffect(()=>{
//fetch initial 50 items from api
setData([...50item...])
},[])
//when scrolling down the Flatlist
onFlatlistScrollDownEndReached = ()=>{
//fetch let suppose 10 more post items from api page# wise
let prevData= data.splice(10,data.length) //remove first 10 items
let new10Items = [...10 fetched from api...]
setData([...prevData,... new10Items])
}
//when scrolling up the Flatlist
onFlatlistScrollUpEndReached = ()=>{
//fetch let suppose 10 pre items from api page# wise
let prevData= data.splice(data.length-10,data.length) //remove last 10 items
let new10Items = [...10 fetched from api...]
setData([... new10Items,... prevData])
}
Try these alternatives
FlashList : Fast & Performant React Native List by Shopify
FlashList Documentation
RecyclerListView : High performance ListView for React Native and Web by Flipkart
Medium Documentation
So a carouselview is awesome for showing multiple elements. But once ther eis only one element in the view and the element isnt as large as the whole screen is, the result is:
Result
So I would need to make sure that if only one element is inside the view, it isnt repeated.
How can I set this or work around this issue without making two layouts and making only one visible, depending on how many items there are in the view?
Its quite simple. If the list contains only 1 item, just set the peek area to 0, otherwise to whatever value you wanT:
if (contentOfListView.Count == 1)
carousel_myAds.PeekAreaInsets = 0;
else if (contentOfListView.Count == 2)
carousel_mySales.PeekAreaInsets = Constants.PEEKAREINSETSHALF;
else
carousel_myAds.PeekAreaInsets = Constants.PEEKAREINSETS;
I have a v-list-item-group with some v-list-item's inside with an associated value. The problem is that when I change the value of the selected v-list-item it doesn't react. I want it to be selected only when the new value matches the v-list-item-group's model and be unselected otherwise. What is the best way to achieve such a behaviour?
Example. When you edit the list item value, for example, by changing the lower left field from "Bluetooth" to "Bluetooth1", I want the list item to get deselected automatically because its value isn't longer matching v-list-item-group's model ("Bluetooth1" != "Bluetooth"). And when you change it back to "Bluetooth" I want it to get selected again.
The one on the right modifies the v-list-item-group's model and this works as expected.
My actual use case is rendering lists of thousands of elements quickly without rendering them all. To achieve it I use a recycle-scroller component inside my v-list-item-group to manage its items. It creates a few dozens of v-list-items and as user scrolls it reuses them by moving them around and replacing their value, icon and text with corresponding data from my array. The problem is that when user selects some list item then scrolls the list, the selected item gets reused. Despite the fact that it now has a different value, text and icon it still looks as selected. So they see it as if some different item was selected.
I hope this works for you:
<v-list-item-group v-model="model" :color="color">
// other html
Then add a computed property:
computed: {
color(){
if (this.model == this.items[1].text) {
return 'indigo'
} else {
return 'black'
}
}
}
JSON Structure:
sectionItems={key: ..., name: .., title: ..listOf 20 nested data }
data =
{
"sections": [...sectionItems of 50 items]
}
When displaying in the FlatList its rendering too slow,
<FlatList
renderItem={({item}) => <Section item={item} />}
initialNumToRender={lastSelectedItemIndex}
/>
Prior to FlatList have used SectionList to render the data but it was too slow to render the data, the requirement is to show all the content in one shot, but FlatList takes too much time to load the items in the viewport, showing more whitespace.
What can be best solution the render a nested list, SectionList or FlatList, the list should have selected item highlighted, so i need to connect to store too.
I just do this by nesting flat lists and taking care of proper rendering within list items. For example I had a list of days, and per each day there were 'entries'. Instead of section list I have a flat list which holds "days list". The day list displays the list header for new day, say 14th January. the rest of this list item is a flat list, containing all the entries for this list. You can highlight easily by making the specific list item wrapped in a touchable. I must render 1000 elements at time and have never had performance issues besides massive updates coming after syncing process. I think this approach might work best for you.