After getting done with React Native: Styling and Layout with Flex, now we’ll discuss React Native: Handling Text Input &Scroll View.
TextInput is an elementary component that allows the user to enter text. It has an onChangeText prop that takes a function to be requested every time the text changed, and an onSubmitEditing prop that takes a function to be requested when the text is submitted.
We will design and develop a login screen to show the execution of React native info component:
There are many more things you may want to do with a text input. For instance, you could approve the text inside while the user types. For more elaborated examples, see the React docs on controlled components, or the reference docs for TextInput. Text input is one of the means the user interfaces with the application.
Here we go with our amazing login screen design:
In the Login button, we use TouchableOpacity : It can be utilized to give feedback by reducing the obscurity of the button, allowing the background to be seen through while the user is pressing down.
Using a ScrollView
The ScrollView is a generic scrolling container that can contain various components and views. The scrollable items need not be similar, and you can scroll both vertically and horizontal levels (by setting the even horizontal property).
This example generates a vertical ScrollView with many images together.
ScrollViews can be designed to permit paging through views utilizing swiping gestures by utilizing the pagingEnabled props. Swiping on a horizontal plane between views can also be executed on Android utilizing the ViewPager component.
The ScrollView works best to introduce a small number of things of restricted size. All the components and views on a ScrollView are condensed, regardless of whether they are not currently appeared on the screen. If you have a considerable long list of more things than can fit on the screen, you should utilize a FlatList. So, let’s find out about list views next.