React Native CLI - Creating a button in a ScrollView - react-native

Hey I'm just starting out with React Native CLI.
I want to have a button which will add an item in the ScrollView. And the new Item should lead to a new Screen when you press it. But I don't have an idea how to make this nor do I know how to google that xD. Does anyone know how I can make this?
I just have a button which leads to another screen when pressing it.
I hope someone can help me :)

First you have to clear few things and make the logic.
1)Either you want to save that item datathen show it in scroll view, make it Pressable and then u can navigate to a different screen.
Or
You just want to show the data in the scroll view. Once you reload, the data is gone. So that's my bro (In my opinion) is of no use.
For the first step .
You need to store the data in a storage and then fetch it in a scroll view,
make it Pressable and navigate to a different screen.
(hint: If you want to make it Pressable then you can fetch the data into a card component and then call that component in a scroll view).
Now grab your keyboard and start searching on it.

Related

how can i enable swipe action on react native?

Please can someone help me on how to make my react native app detect when a user swipes left or right? I already researched randomly but seem not to have a positive answer.
So any function or package that can help?
I am mapping through a list of objects and I want the user to view next object in array whenever he swipes ( just like on click ).
It works with onClick but I need it with swipes.
It depends on what you want to do, you can create a carousel using a horizontal Flatlist and use pagination to swipe elements. Please add more details
Try PanResponder from the docs here

(iOS) Is it possible to move loading spinner in FlatList refreshing prop?

I am trying to use pull to refresh from FlatList. Is it possible to move the spinner to where the data actually starts rendering instead of the top of the screen? I found the progressViewOffset that works on Android but I am trying to find how I can implement this behaviour on iOS too. I feel like my solution is to watch scroll interactions and go on from there.
Any idea is appreciated. Thanks in advance.

How can you make a movable frame over the content with React Native, while making it possible to click the content around it?

I'm looking for a solution, if possible a library or a custom component, for React Native, without Expo.
I need to create a video frame that is movable in the screen, up and down, and cover the content. I also need to make it possible to click on the content behind it.
Another difficulty is that I need it to stay up on all screens during navigation.
I first tried to use reanimated-bottom-sheet with some increments, but the content behind the bottom is not clickable. Also, to make it available on all screens I needed to put in at the same level as React Navigation's BottomTabNavigator and it covers the tab bar too even with a zIndex.
I also tried to use modals, but I'm relatively new to React Native and couldn't find how to make the background touchable as well as making it movable.
I guess I need to make a view with absolute positionning and learn Reanimated, unless you have a simpler idea?
Thanks

Realizing Facebook friends request like slider

I am developing my first React Native + Redux app. In my app I want to develop something similar to the friends requests slider of facebook:
There is a slider (left/right) where you can see the current content in a box and a little bit of the next and preview item. When swiping up or tap the content should be come to "full screen". Swiping left or right is disabled in full screen.
Only the current and maybe the two next and the two previous slides should be loaded but I think thanks to redux this is not a big deal.
Which components should I use for this?
A simple way to approach this might be to use a library like react-native-swiper for the swiping component and then use LayoutAnimation to animate the subview into the full screen view, taking care to remove the name in the header/etc.

Navigation to Different "Versions" of the Same Screen React Native

I recently implemented navigation in my app using NavigatorIOS in React Native. However, I think I've encountered a problem. Say I have 10 nav buttons on my home screen. Correct me if I'm wrong but I'm assuming (since I haven't done the backend yet) that if I use the first button to navigate to the next screen (let's call it Second.js), wrote/saved some data, and then went back and navigated to Second.js with the second button, that data from before would still be there? If so, is there a way for each button to navigate to a different "version" of the same screen? For example, could each button go to its own version of Second.js so that each button has its own local data in its Second screen, or would I have to make Second1.js, Second2.js, Second3.js, etc.? If the former isn't possible, I'd need a fixed number of nav buttons, plus a lot of memory is wasted with all these new classes that are basically replicas of each other. Thank you!