React Native ~ Forms - rohit120582sharma/Documentation GitHub Wiki

Forms in React Native are just a collection of inputs. Let's looks at some of the inputs we have available.

The TextInput is probably the most common and frequently in React Native. It is actually incredibly powerful and has a many important features.

Here we have 4 examples of what you can do with TextInput:

The first input is a basic TextInput with no embellishments. We use 4 props:

• style - adding some style for the input to be better visible on the screen. The Text Input has no default styles
• value - the current value
• onChangeText - gets called with the new value whenever the user changes the content of the input
• placeholder - some placeholder text to be displayed when the input is empty

Here we use an additional prop called keyboardType. You can use this prop to define what type of input this is.

For password inputs we don't want to show what the user has types. For this we can use the secureTextEntry prop and set it to true (default is false). This ensures the input displays *** instead of the actual content.

For a multiline input, we use multiline={true}. This will allow the input to grow infinitely. If we'd like to cap the height of the input on the page, we can also set it to a specific number of lines, e.g. 4 with numberOfLines={4}.

The Picker component is an interesting one, because it's looks very different across platforms.

A Switch is essentially a toggle button. Some styling nuances aside, it looks quite similar across platforms.

There are loads of community components you can install separately and use. A lot of them are under the react native community GitHub org,