In my current App I have a List of items. If the user clicks on one of these items details should appear. This details should be dispayed in a swiper. So the user can navigate to the details of the next item by swiping left.
Showing the list, the swiper (Modal) and closing the modal swiper is no problem.
But how to "navigate" the swiper to the item, which the user clicks? The data is the same (redux). I don't think, that it's a good idea to set the data of the swiper each time a user clicks on a list item?
Another questions: How to trigger the "navigateToXandShowModal()"-function of the custom component wrapping the swiper? By saving the ref in the parent component? Is this the correct way?
Related
I have a flatList with 3columns in a row in screenA and also there is screenB with a flatList that also shows screenA data in different way. Once user click an item in screenA it navigate to screenB and scrolls to item's index. I am using react-query for fetching data. My question is how can I handle fetchNextPage in true way. Because if user scrolls in screenB next page data should be loaded in both screens. Is it correct to pass all {data, fetchNextPage, hasNextPage, refetch} returned from useInfiniteQuery to screenB? or there is another solution?
Briefly something like instagram's profile screen. As you can see in main profile screen under a tab user click on item and it's navigate to second image. All the data loaded in second screen when user scrolls also loaded in main profile tab.
thanks for any help
I want to do this layout:
Currently I do the layout by this way:
menu is belong to the below part and i marginTop: -30 for it to above the image
FlatList is absolute view and have zIndex bigger than Menu. FlatList have dynamic data and each item of FlatList have textInput to search data ( look at this pic )
I have tried 2 ways:
First way:
I used for the list filtered data, it is limited by the Flatlist area so that my filtered list cannot display fully, just 2 rows visible, the rest of filtered data is invisible. I have tried increase the height of the Flatlist and now I can see the filtered list fully but I cannot click the menu button because menu is overived by the Flatlist,
Second way
I use Modal and tried with this library: react-native-modal-dropdown, I can reach my expertation UI but because it use Modal so when Modal is appearing, my textInput in Item is loss focus, so that I cannot continually input to TextInput until I close the Modal.
Do you guys have any solution for it? Thanks in advance
The modal component use the native Modal, you won't be able to interact with elements outside it while it is still visible.
I am not sure to understand why you cannot use View to display the results, but maybe you could try with FlatList ?
How to open a view top of a another view on the button click in react native? I tried use redux but i didn't find the right way to do it.
You mean "How to open a popup type screen on a button click"?
If so, then you need to use Modal component.
Here's the link to the docs of modal component -
https://facebook.github.io/react-native/docs/modal
We are using startSingleScreenApp to start the application. We need to hide/show some of the menu option based on screen in the application.
We tried to create two different Drawer with different items but in that case drawer items not getting rendered.
You can set custom component for your drawerMenu instead of default provided menu styling and properties. Create a custom component, and for the menu items, map through an array of menu items provided by redux. Then whenever you need to change the menu items, change the array state in redux and your drawer menu items will re-render and update accordingly.
I have two screens:
Screen A(Parent screen): Using ListView to show the list of post. Each row has a Like button to like or dislike the post.
Screen B(PostDetail): When tap on a ListView item, I will navigate to this screen. It also has a Like button to like or dislike the post.
Problem: When I update like state on the detail screen and I also want this is updated to that post on the parent screen when tap on Back button(The button generated from Stack Navigation). How to do that?