How to create a Horizontal Recycle View in React-Native? - javascript

I have a list of questions that I have to get from an API, and I want to render each question one at a time so when I press one of the three buttons (yes, no, maybe) the next question renders.
Ex. 1st question pops up -> You answer it -> 2nd question comes -> You answer it -> Process repeats until the last question.
Recycle View
This is how I want it to kinda look, I tried using the react-native-recycler-view-list but it didn't work.
How do I make this kind of list?

If you wish to have an optimised list view in react native just like recycler view of android, you can make use of FlatList. But, you can have optimisation either horizontally or vertically but not both ways at a time. You can simply import FlatList from react-native in your component.
You can go through this link https://facebook.github.io/react-native/docs/flatlist.html to know more about FlatList

Related

How to target a list of DOM elements within React

So I'm currently doing Brad Traversys 50 projects in 50 days, but I wanted to do it built in Next.js with React for practice, as that's what I use at my job.
As you can see from me posting here, it's not going so well! I'm already running into road blocks.
I'm trying to create a set of cards, that when one is clicked, it expands out. Outside this, if there is a card already expanded, and another card is clicked, I need the previously expanded card to collapse, whilst the card currently clicked expands.
I'm currently trying to work off an active state, and passing that down to the Panel props, but obviously that just sets all the flex's to be the same and nothing happens. But when I try to define the active useState inside the Panel component, it works, but I can't then target the other active states in the other Panels, to set them to false.
You can see my code on this CodeSandbox https://codesandbox.io/s/nifty-goldberg-5noi4?file=/pages/expanding-cards.jsx
You can see the correct functionality here https://50projects50days.com/projects/expanding-cards/
What's the best way to go about this?
You need a logic like Accordion control in Material UI. As in my comment, here is the example.
https://material-ui.com/components/accordion/#controlled-accordion

Google Inbox-style navigation with vue-router

I'm building an app with vue-router and trying to achieve a UI similar to that of (the now defunct) Google Inbox. Or the Techcrunch homepage, which is possibly a better rendition of what I need.
there's a list of items
when you click on one of those items, it "expands in place" to display more details.
the URL also updates to reflect the expanded item
when clicking "back" the item collapses back into the list
when accessing the URL directly, the page should display the expanded item, and (optionally) could display more list items below.
Thing is, I can't figure out how I would build this - I'm trying to start from the idea of child routes, but I don't know where to place the child <router-view> since its location will always be dynamic based on which item was just clicked in order to expand.
I have a hunch it's related to named views but I can't wrap my head around it.
Any ideas welcome!
A similar topic came up on the Vue github page a while back, but involving the opening of modals as opposed to opening collapsing containers. One of the contributors to that thread wrote a pretty good blog post that might point you to a solution.
Once you get the dynamic routing sorted as they did above for modals, swapping the blurb for the article and animating the expansion should be fairly simple. The Vue docs cookbook has a good article on building a dynamic blog that should come in handy as well.

React Rendering different Children Components on button click

chatbox
profile view
So these are mockups for my social network project.
My question is that when a user logs in he is presented with this view.
There are two parent components THE LEFT PANE and RIGHT PANE.
THE LEFT PANE remains there for the whole session. BUT inside right pane I have to render
Chat box(when someone clicks on a friend from the list).
Pending request Component(When the see pending request button is
clicked)
Search Friends(When make friends button is clicked)
Profile View (When someone clicks on the interactive I button
Priorities:
I do not want to show the change in the address bar when any
component changes. So cannot use Browser Router.
Possible Solution but in doubt
I could use Conditional rendering by attaching some state variable
with each button click and when that button is clicked determining
the state i should render that specific component.
I could use Memory Router in react router in order to keep the code
clean and do not show the change in the address bar.
Help
CAN ANYONE WITH A GOOD EXPERIENCE IN REACT TELL ME IS THERE ANY OTHER WAY OF DOING THIS? AND IF NOT THEN WHICH IS A BETTER OPTION BETWEEN THESE TWO?
Pls refer to the images to get full idea about the situation.
thanks.
P.S. I can only post two links the other two components of pending request and make friends would be loaded the same way inside the right pane.
I think the best way would be to use the memory router Coz it would help to keep your code neat and understandable for reusability

Angularjs create navigation bar for quiz

I'm new in Angular and I need to make Navigation bar for quiz. Each question has it's own checkbox and when it's pressed, this question's link in navigation somehow changes (e.g. background turns red). So I want to make navigation as link array, but I have no idea how to change each link according to checked checkbox. As I understand it, we have one array, clicking on checkbox we take from this array an item and put it to another array and then this array give to links, but how to write this functions? Any idea?
I can recommend you : http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/build-a-single-page-application-spa-with-aspnet-web-api-and-angularjs
In this lab they are building nearly the same application you are talking about

How to change a window in screen

Ok, the question is really vague. Please pardon me. My requirements are something like this
User will enter some personal data on first screen (like Date of Birth, Gender). On next screen he will answer number of screening questions(total questions are 8). So instead of showing all questions on one screen, I want to create a small window/frame where I will show first question, once the user answers that question and clicks "next", he will go to next window which contains second question(But the screen is same). I just want to change middle portion of screen.
I am really not able to frame this question in a right way. But please ask as many questions as you can and if you have some information, please share. Thanks.
You can look at any custom UI widget like jqxTabs, for example: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxtabs/wizard.htm
In the example above there's a wizard which is created using a tab UI component.
As you see when you insert a valid information at the first section the wizard allow you to go to the next one and so on.
There are different free widgets which can fit great too. For example jQuery UI tabs is such widget.

Categories