CODEWITHSUNDEEP
reactjsreact-nativeexpo
VPY
VPY

Reputation: 463

React Native : Changing Label based on Picker selection

I am trying to create a very simple input screen containing inputs, labels and a picker.

The app that I am trying to build contain a picker, two numeric inputs and two labels (existing side by side along with the input elements) as shown below

enter image description here

When the user makes a selection in the picker (can choose either "Metric" or "Imperial"), the labels (B1 & B2) beside the inputs should also change accordingly as {B1: "Kg", B2: "Cm"} or {B1: "Inches", B2: "Lbs"}

What are some design pattern/strategies to achieve this ?.

Looks like a simple problem but I have run out of ideas as to how change the label based on the selection of picker.

I have thought of creating two different Modals M1 and M2 with visibility toggling but I am not sure that the solution is elegant :(

Would appreciate any tips or guidelines as to how this problem (changing a label based on picker selection) is solved.

Upvotes: 0

Views: 358

Answers (1)

Jouke
Jouke

Reputation: 469

I strongly advise you to try creating code yourself first by following the react documentation.

These are some steps to help you get started:

  1. Set an event handler on the picker.
  2. In this handler you set the state to be either metric or imperial.
  3. After that you can render based on state values.

A change in state will re-render components so the label will change automatically.

Upvotes: 1

Related Questions