React Native Material Design Button Android iOS Example Tutorial

How to use, create simple button component in react native android iOS application full explained example with source code for beginners.

Button is one of the most usable component in react native because without button user cannot do a certain type of functionality. By default react native comes with material style buttons. So in this tutorial we would going to create simple Button in react native and set onPress on that button. So when user clicks on that button it will call a function named as¬†SampleFunction() . Inside that function we would show a simple alert dialog message. So let’s get started ūüėČ .

Contents in this project Simple Material Design Button :

  1. Start a fresh React Native project. If you don’t know how then read my this tutorial.
  2. Add AppRegistry, View, Button, Alert component in import block.
  3. Create a function named as SampleFunction() in your class.
  4. Add Singe View as parent view in render’s return block.
  5. Set parent View style.
  6. Add Single Button inside the Parent View.
  7. Set Button Color, Button Title text using Style.
  8. Add onPress on button.
  9. Call SampleFunction() on onPress of button.
  10. Complete Source Code.

1. Start a fresh React Native project. If you don’t know how then read my this tutorial.

2. Add AppRegistry, View, Button, Alert component in import block.

3. Create a function named as SampleFunction() in your class : Inside this function we would going to display a Alert dialog message. So when this function calls it will show a message on screen.

4. Add Singe View as parent view in render’s return block.

5. Set parent View style.

flex :1 fill this view to whole screen.

justifyContent: ‘center’ : Set this view just horizontal and vertical center of screen.

margin: 10 : Set 10 pixels automatic margin from top, bottom, left, right of screen.

6. Add Single Button inside the Parent View.

7. Set Button Color, Button Title text using Style.

title=” “ : Title is used to set title of button which is shows above button.

color=” “ : Color is used to set background color of button.

8. Add onPress on button.

onPress ={} : Inside the scope call your method.

9. Call SampleFunction() on onPress of button.

We have to call function with this . Here this defines the class default object.

10. Complete Source Code for index.android.js file :

Screenshot :

Button

Leave a Reply

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