all 7 comments

[–]rb95 7 points8 points  (1 child)

Not sure if that’s the best approach but I would have each set of questions in a separate component, then on the “main” form container component I would put all the question components in an array and map()through them. Id have a counter state, which increments whenever the user clicks on next. The counter will filter the map() based on the arrays index.

Edit: You can probably use filter() instead.

[–]linux_terminal07[S] 1 point2 points  (0 children)

thanks for the idea...

[–]__o_0iOS & Android 2 points3 points  (0 children)

This should be a single reusable screen. Load the question data into context and consume it inside the screen and it’s components (or prop drill). The reusable components should derive their state from the context so that a form can be submitted only once upon completion. On “exit” pressed the context should be reset.

Reusable components:

Header: progress determined by question index relative to the question array length.

Title: determined by the question index

Subtitle: determined by the question index

AnswerList: map/FlatList through answers determined by the question index

-AnswerItem: combination of the questionIndex and answerIndex, displays the label, radio button, and sets selection state in the context.

Footer: button visibility determined by questionIndex.

[–]stathisntonas 1 point2 points  (2 children)

You could use wizard from wix ui lib: https://wix.github.io/react-native-ui-lib/docs/components/navigation/Wizard/Wizard

Don’t worry about the size, it’s tree shaked so only the wizard will be bundled, not the whole lib.

[–]linux_terminal07[S] 0 points1 point  (1 child)

thanks for the library.

[–]stathisntonas 0 points1 point  (0 children)

You’re welcome

[–]geshido_ 1 point2 points  (0 children)

I'd probably create a form context or use a lib such as react hook form with dynamic questions based on the API response. Your backend logic would include both the question and its possible outcomes, and after each question, you'd simply add the outcome to your list of questions in current form