React-native form ui design

React-native form UI design

Hi guys, in this article we learn about React-native form UI design with TextInput, Button, etc

so let us start with the new project to do this

  1. Create a new project 

 

after successfully created project i am using App.js to design this page but i suggest you to create new Register.js and use Stack navigation and defined these Register.js in App.js to know more about Stack navigation you can see my stack navigation tutorial Click here

2. Lets import following component

3. Create constructor in the main class

Initialize state in that constructor and define field which we want to save, we will save form fields in this state by using the onChangeText listener

I have use Dimensions.get(‘window’) to get window width as well as height we can set height and width of view on the basis of these window width and height

4. Add Background image

To add background imag, create a image in your root directory and paste image into it then we have to use ImageBackground component, i am giving width and height in percentage as seen below

After that i have change status bar color like below

Then add simple view inside ImageBackground

Then inside this view add Heading text and TextInputLayout as follows:

I have added TextInputLayout for username, email, password and one button for sign up

also i have added onClickListener for that sign up button and pass id from that

this will call onClick method so use following method

add this above method outside the render method

5. Complete code as given below:

Layout:-

 

 

Thank you..enjoy coding.. 🙂

6 Replies to “React-native form ui design”

  1. I’ve been surfing on-line greater than three hours these days, but I never found any fascinating article like yours. It is pretty price enough for me. In my opinion, if all website owners and bloggers made just right content material as you probably did, the web can be much more useful than ever before.

  2. Hey! This is my first visit to your blog! We
    are a team of volunteers and starting a new initiative in a community in the same niche.
    Your blog provided us useful information to work on. You have
    done a outstanding job!

Leave a Reply

Your email address will not be published. Required fields are marked *