Easily Build Forms in React Native – React Native Development – Medium

Easily Build Forms in React Native -

  • A few things you might have to take care of… – Creating the necessary components (text inputs, select inputs, checkboxes, switches, etc)Writing/finding validation logicUpdating your components to display any errors (I always forget to do this)Updating your UI whenever you change fieldsNone of these things are difficult, but they can…
  • What We’re BuildingWe’ll be building a sign up form that has the following fields – Email (required)Username (optional)Password (required)Agree to terms (required)Defining the Form ModelThe first thing we need to do is define a model for our form — this is what will be passed to the form component and used to render the…
  • First we need to get the Form component (line 6) then we need to render the form and pass our model to it as the type (line 19).
  • Then pass those options to the Form component – Let’s do the same thing to add some error the Form DesignThe final thing I want to do is modify the design of this form slightly.
  • You can do quite a few things but I’m just going to be changing the label color on this one form.

If you’re building a React Native app it’s almost a guarantee that you’ll have to build at least one form. The reality is you’ll probably build quite a few (sign in, sign up, edit profile, etc.)…
Continue reading “Easily Build Forms in React Native – React Native Development – Medium”

Easily Build Forms in React Native – React Native Development – Medium

How to Easily Build Forms in React Native:

  • It makes creating forms in React Native easy by simply having to define a model for that form and you’re set!
  • Snack will automatically pull that in for us.Tip: I find that scanning the QR code from the Expo app on my device gives the best development experience.If you prefer to do this outside of Snack make sure you install tcomb-form-native via npm or yarn.What We’re BuildingWe’ll be building a sign up…
  • First we need to get the Form component (line 6) then we need to render the form and pass our model to it as the type (line 19).
  • We create an object, add a key named “fields” (since we’re modifying the fields), add a key to this object that aligns with the key in our model (“terms”), and then inside that object we set the new label.Code is easier to understand.Then pass those options to the Form componentLet’s…
  • Just about everything in the default form is customizable.As you can see tcomb-form-native makes building forms quick and easy but also gives you the flexibility you need to create forms the give users the necessary info and fit with the rest of your app (unless I’m designing of course).

If you’re building a React Native app it’s almost a guarantee that you’ll have to build at least one form. The reality is you’ll probably build quite a few (sign in, sign up, edit profile, etc.) Yeah…
Continue reading “Easily Build Forms in React Native – React Native Development – Medium”

Why you need keys for collections in React.

Why you need keys for collections in #ReactJS:  #Javascript

  • React will even give you a nice warning:

    The output DOM is then:

    This makes sense, because if you consider that the key is a unique identifier for a conceptual element, react doesn’t want to waste time rendering both.

  • This will render elements like:

    Now let’s suppose that we add a user to the front of the list:

    This will render elements like:

    After we add another user, React will go into reconciliation, where it will update the dom depending on the shape of the elements returned from the component’s render function.

  • Obviously, it’s simply to add one dom element to the beginning, and leave the previous to unchanged.
  • A good key uniquely identifies the content of the element.
  • Here are the two trees produced with the username as the key:

    React now understands that the elements with keys “bob” and “sue” have remained unchanged, and we’ve simply re-introduced a new element with key “joe”.

This post will explain the importance of keys in React and some edge cases to consider when choosing them.
Continue reading “Why you need keys for collections in React.”

Takeaways from React Europe 2016

Takeaways from #ReactEurope 2016:  #ReactJS

  • Watch the talk, get exited and evaluate if it’s suitable for your case.
  • Implementing the library seems not to be the hardest part of the library life-cycle.
  • blogs create an illusion that the community is active
  • There’s so much post-implementation work to do to make the library successful.
  • Let me share the most interesting ideas from the conference.

Read the full article, click here.


@ReactiveConf: “Takeaways from #ReactEurope 2016: #ReactJS”


Vinted engineering blog


Takeaways from React Europe 2016