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 :

Start a fresh React Native project. If you don’t know how then read my this tutorial.
Add AppRegistry, View, Button, Alert component in import block.
Create a function named as SampleFunction() in your class.
Add Singe View as parent view in render’s return block.
Set parent View style.
Add Single Button inside the Parent View.
Set Button Color, Button Title text using Style.
Add onPress on button.
Call SampleFunction() on onPress of button.
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.

<br />
import { AppRegistry, View, Button, Alert } from ‘react-native’;

1	import { AppRegistry, View, Button, Alert } from ‘react-native’;

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.

<br />
SampleFunction() {</p>
<p>    Alert.alert(‘Button Clicked!’)</p>
<p>}

SampleFunction() {

Alert.alert(‘Button Clicked!’)

}

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

<br />
render() {<br />
    return (<br />
     <View></p>
<p>     </View><br />
    );<br />
  }

render() {

return (

<View>

</View>

);

}

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.

<br />
render() {<br />
    return (<br />
     <View style={{flex :1, justifyContent: ‘center’, margin: 10 }}></p>
<p>     </View><br />
    );<br />
  }

render() {

return (

</View>

);

}

6. Add Single Button inside the Parent View.

<br />
render() {<br />
    return (<br />
     <View style={{flex :1, justifyContent: ‘center’, margin: 10 }}></p>
<p>        <Button /></p>
<p>     </View><br />
    );<br />
  }

render() {

return (

</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.

<br />
render() {<br />
    return (<br />
     <View style={{flex :1, justifyContent: ‘center’, margin: 10 }}></p>
<p>        <Button title=”Sample Button” color=”#2196F3″ /></p>
<p>     </View><br />
    );<br />
  }

render() {

return (

</View>

);

}

8. Add onPress on button.

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

<br />
render() {<br />
    return (<br />
     <View style={{flex :1, justifyContent: ‘center’, margin: 10 }}></p>
<p>        <Button onPress={ } title=”Sample Button” color=”#2196F3″ /></p>
<p>     </View><br />
    );<br />
  }

render() {

return (

</View>

);

}

9. Call SampleFunction() on onPress of button.

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

<br />
render() {<br />
    return (<br />
     <View style={{flex :1, justifyContent: ‘center’, margin: 10 }}></p>
<p>        <Button onPress={ this.SampleFunction } title=”Sample Button” color=”#2196F3″ /></p>
<p>     </View><br />
    );<br />
  }

render() {

return (

</View>

);

}

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

<br />
import React, { Component } from ‘react’;</p>
<p>import { AppRegistry, View, Button, Alert } from ‘react-native’;</p>
<p>class Myproject extends Component {</p>
<p>  SampleFunction() {</p>
<p>    Alert.alert(‘Button Clicked!’)</p>
<p>  }</p>
<p>  render() {<br />
    return (<br />
     <View style={{flex :1, justifyContent: ‘center’, margin: 10 }}></p>
<p>        <Button onPress={ this.SampleFunction } title=”Sample Button” color=”#2196F3″ /></p>
<p>     </View><br />
    );<br />
  }<br />
}</p>
<p>AppRegistry.registerComponent(‘Myproject’, () => Myproject);