I am hoping someone can point what I am misunderstanding. I have placed console.log around the code but feel like I am missing something important. The way it is done is:
1 - Grab a collection of items
2 - Pass items data down to the model that support to open
3 - When open model it should show that specific item click info
PROBLEM: I am seeing the same data for every modal I keep clicking to open. Is there a reason why the data seems to be the same even though I am iterating using a FlatList
<FlatList<any>
numColumns={2}
contentContainerStyle={{
alignItems: "center",
}}
data={items}
keyExtractor={(item) => item.id}
renderItem={renderImages}
/>
return (
<View key={item.id}>
<MiniProfileModal
id={item.id}
url={item.imageURL}
userName={item.title}
showModal={showModal}
setShowModal={setShowModal}
/>
</View>
);
In most cases, Modals are not rendered on the same component tree as other components. This has more benefits as modal can overlay other components and state changes in other components will not affect modal rerender which improves performance.
To solve this problem, you need to force the modal to rerender when new items are selected to keep up with those changes.
Related
I've been using the Swipeable component from react-native-gesture-handler to handle my swipeable list items, but Swipeable is causing lag on the JS thread during the initial render, according to my profilers. So I've decided to switch to ListItem.Swipeable from React Native Elements. The initial render lag is gone, which is great, but it requires too much drag to swipe from left to right and vice versa. I've looked through the documentation of Listem.Swipeable, but I don't see any way to manipulate the drag.
Is there a way to change the drag value?
Relevant ListItemSwipeable component:
<ListItem.Swipeable
rightWidth={ScreenWidth / 2}
rightContent={() => <Buttons />}
>
<KeyboardAvoidingView style={{ flex: 1 }}>
<AccordionListItem item={item} />
</KeyboardAvoidingView>
</ListItem.Swipeable>
I've got following layout setup:
<ScrollView>
<MyCustomView />
<FlatList />
</ScrollView>
At the moment it is working as I intended it to work i.e. user scrolls past a custom view and then hits flat list with many items in it and can continue scrolling down.
My concern is that such layout is not what FlatList is intended for i.e. will it still only render items as they are needed?
Yep, I don't think it would create much of problem here.
As Flatlist too is an kind of scrollview so it won't cause much issue over here.
Also it would be a better approach if you keep that under flatlist and fix the view you have to hit using stickyIndices which you can get in flatlist and without comprising any rendering issues or performance hitches.
<FlatList
data={ this.state.FlatListItems }
ItemSeparatorComponent={ this.FlatListItemSeparator}
renderItem={ ({item}) => (
<Text
style={styles.FlatList_Item}
onPress={this.GetItem.bind(this, item.key)}> {item.key}
</Text>
)}
ListHeaderComponent={this.Render_FlatList_Sticky_header}
stickyHeaderIndices={[0]}
/>
Flat list inside scroll view create some kind of performance issue so for solving this you need to take care of some things for more info refer to link below
https://medium.com/sanjagh/how-to-optimize-your-react-native-flatlist-946490c8c49b
I want to render FlatList's footer at the bottom of the page even if there is not enough content to fill the whole screen.
In order to do this, you need to take a look at react-native sources.
Here there is a code which shows adding footer internally.
As you can see it wraps into additional View which can be styled using ListFooterComponentStyle prop. It's not described for some reason in docs.
So here is the solution:
<FlatList
data={someData}
keyExtractor={item => item.id}
contentContainerStyle={{flexGrow: 1}}
ListFooterComponentStyle={{flex:1, justifyContent: 'flex-end'}}
ListFooterComponent={<Footer/>}
...
/>
UPD: Update answer using AtlasRider's comment.
I am creating an androidTV application and trying to get the current FlatList focused item using TouchableNativeFeedback.
I have tried using "onFocus" to change a state when the FlatList item has focus but when the application rendered it seemed to focus on every item as it was loaded into the FlatList resulting in an error for to many SetState updates. I tried using "()=>" in the onfocus to stop it running at render but this seemed to stop it working completly
<View style={styles.containerItemNow}>
<TouchableNativeFeedback background={TouchableNativeFeedback.Ripple('#f14621', true)} onFocus={this.UpdateStatus(item.status)} onPress={() => this.downloadfile(item.url)}>
<View style={styles.containerItemNowSelected}>
<Text style={{color: 'white'}}>{item.title}</Text>
</View>
</TouchableNativeFeedback>
</View>
I was hoping when the users move using there d-pad the item highlights with the ripple effect and runs the onfocus and updates the needed state but this does not happen even when the items ripple effect shows the onfocus does not run
I'm having some problems with zIndex and position whilst styling a drop down list (react-native-menu). I want to make the drop down list appear on top of all other components on this scene when it's clicked. I'm trying to use zIndex and position but maybe not doing it correctly?
In my code (below), I'm rendering a hierarchy where Card > CardSection > various subcomponents of each. The drop down list consists of the components MenuContext (config) and TopNavigation (main drop down list).
return (
<Card>
<CardSection style={{zIndex: 2}}>
<View style={thumbnailContainerStyle}>
<Image style={thumbnailStyle}
source={{ uri: "" }}
/>
</View>
<View style={headerContentStyle}>
<Text style={headerTextStyle}>Tam</Text>
<Text>tam#tam</Text>
</View>
<MenuContext style={{ flex:1, zIndex:6, position:'absolute', flexDirection: 'column', alignItems: 'flex-end' }} >
<TopNavigation/> //this is
</MenuContext>
</CardSection>
<CardSection style={{zIndex: 1}}>
<Text style={{zIndex: 2}}>{props.post.body}</Text>
</CardSection>
</Card>
)
So the drop down is a child of the first CardSection. I've got it to appear over it's own parent CardSection but I can't get it to appear on top of the second CardSection that renders after. So I can't get it to show on top of it's parent's sibling.
I'm reluctant to use some plugin or workaround.
Any ideas? Thanks!!
So what was making it so hard to render the popup menu above things on the z-axis was the sibling of it's parent. So what helped me get the results I needed was looking more macro and moving <ContextMenu/> higher in the component hierarchy, out of this component altogether and into it's parent.
I should have inferred this since the docs for the original package I used had ContextMenu in the entry point to the app and comments such as:
// You need to place a MenuContext somewhere in your application,usually at the root.
// Menus will open within the context, and only one menu can open at a time per context.
My mistake was getting lost in the micro world of zIndex and position and assuming that what looked like a styling problem should be solved with a styling solution. I forgot about the bigger picture.