feat: Onboarding screen

BinaryStudioAcademy / bsa-2024-bebalance

Track your work-life balance and improve the specific areas of your life with AI recommendations.

4 stars 1 forks source link

feat: Onboarding screen #127

Closed anogire closed 2 months ago

anogire commented 3 months ago

What feature?

[x] Create Onboarding component with Header and Content.
[x] For Header use react-native-progress-step-bar library.
[x] The content will need to use our custom RadioGroup component with answers to questions.
[x] Add 'Next' button as on web design to go to the next question
[x] For changing questions it's possible to use react-native-infinite-pager
[x] When you select the answer to the last question - you go to the “Welcome” screen.

Add screenshots

KotenkoNata commented 3 months ago

For Header use react-native-progress-step-bar library - Do I need create Header or is it better create progress bar instead of Header? Would you like me to use some mock data for Content part - title and question? Do I need validationSchema for RadioGroup to create an issue or discuss it with the backend part?

MarinaBershova commented 2 months ago

The text of questions should be in bold
The text of the answers should be centered
Need to change the paddings between question and answers, and between answers (according to the design)

Need to add padding between text and border

KotenkoNata commented 2 months ago

I had a task that described align of text inside buttons.

revenets commented 2 months ago

@MarinaBershova we are ok with the text alignment inside the answer radio button. Paddings and text wrapping inside answer option will be fixed

KotenkoNata commented 2 months ago

@revenets I've fixed the margins and paddings to the size of the question title.

I propose fixing buttons at the bottom, as in the example below.

fixed.webm

How perfect should it be a realization to design? I've made the gap between buttons less than in Figma because, in the case of 25, there is no space for buttons. Is it ok?