Can you create a cascading dropdown in React Native? - react-native

I'm trying to make a cascading dropdown in my project where the user will first select a car brand with one dropdown, then car model from that brand, then the version and then the model year. I've been searching for it for a long time but I keep finding stuff about React JS and not react native. The documentation of react-native-dropdown-picker doesn't tell anything about something like that as well.
If anyone can help me out here, that would be great. Thanks.

Related

How to make a dropdown filter like Amazon App in React Native?

So I'm trying to build a filter button that shows a screen below to let users customize the filter. I've searched for everything but couldn't find it. Does anyone have an example or suggestions? Ideally, It's supposed to work like Amazon App's filter. Something like this.

How to detect when there's a new data from API using flat list in React Native?

I am building a react native apps using crna where there's flat list that showing data from API. It's quite like twitter or facebook's status feeds. And I would like to show some badge like this
When there's a new post and to make user aware of new post so they will refresh it.
Could anyone tell me what should I do to make this happen?
Thank you so much.
Not sure if you're using some kind of state management tool like redux, but it would just be a matter of calling the API every so-often and updating the state from there. I'm going to use redux as an example since it's quite popular
You'd prob want state that has the following info:
currentPosts: [] //array of posts that the user already sees
newPosts: [] // array of new posts user can't see until they hit "new posts" button
With redux, you can have a function that gets called every 5 or 10 seconds that checks the API to show where you get new post data from. If there is a new post, add it to the newPosts array. This would update state, and if your component is connected to state, it would update props.
With this logic, you'd be able to determine whether or not you should show the "new posts" button with a simple boolean. If the array is empty, hide it, if it isn't, show the button.
Once the button is clicked, you could update the state so that the newPosts data goes into the currentPosts array and those items will get rendered from there.
Hope this makes sense! There may be quite a lot I'm missing but that's the idea of how it could work. Lemme know if you have any questions

Showing Ads GridView React Native

I am working with GridView in which i have to show two items in GridLayout row count of 2 in React-native IOS.
The problem is that i have to show Ads after four items (i.e. 2 rows) that will cover width of mobile.But due to Span count the ads are also coming in Grid layout.Any help would be appreciated !!.
Want Output like this:-
I am using this react native library GridView but not able to implement logic for random data to show one ad after 4 items using DataSource.
Here is the Snack for the same created from the example given by the author in GitHub. It is doing what exactly you asked for.
A while loop can be used in _createRandomData function to splitting the layout and putting ad in between.
Snack Preview

Howto navigate to "anchors" in lists using React Native?

I have an app where the user answers a lot of questions. E.g he clicks "I have a car", then I give him some new questions like "which color" and "which brand". The list is dynamic so I never know exactly how far it is from the top to the next question.
Is it possible to do something like Flatlist.scrollToLocation('#second_question')?
Well, I know scrollToLocation does not support scroll to id, but does React Native have any other lists that I can use to achieve this?
To me it looks like scrollToLocation requires that one need the exact length. Is there a list in React Native that support "scroll to anchor / id"?

How do I organize a sign in page for a react-native app?

I'm super new to react-native and I had more of a general question. I hope this isn't in the wrong spot.
Let's say I have a sign-in screen for my app.
I created a SignInScreen.js file. Now in this file, I have a couple of options:
I could just render out two text fields (for email and password)
or
I could create a separate SignIn component. I would render that in the SignInScreen and then in the SignIn component, I would render the two text fields for email and password.
I'm not sure what is considered best practices. Am I over-thinking this? Would I be over engineering if I created the separate SignIn component?
Thanks so much.
I think this is a personal question and you are going to get mixed answers.
I would think long term. Are you going to make this only for this app? Or are you planning on re using that? If the first one, then just add the TextInput and that's it.
If you think that you might re use the code in other apps you could create a SignIn component like you said and create a module to import.
But if you are very new to RN don't complicate yourself right now.