To Perform click events we will use buttons. In this chapter we will learn ablut React NAtive Button Component.

 If we want to use a simple button to click and show result then Button is enough

Button has the prop “color” to change the color but other than that we can not style it as Button does not support “style” prop.

We can’t set text the like <Button>txt</Button> but only via the title property <Button title="txt" />


To Import Button in the Code

To work with button we need to import Button from 'react-native' package

import { Button} from 'react-native'



import React, {Component} from 'react';

import {View, Text, Button, StyleSheet, Image} from 'react-native';


export default class Buttons extends Component {

  state = {name: ''};

  count = 0;

  onPressLearnMore() {

    //For generating alert on buttton click



  render() {

    return (

      <View style={ss.container}>

        <View style={ss.header}>

          <Text style={ss.headerText}>ReactNative Images</Text>


        <View style={ss.body}>






            style={{width: '100%', height: 200}}


          <Text style={ss.header}>{}</Text>


            title="Click Me"


            onPress={() => {

              //For generating alert on buttton click

              this.count = this.count + 1;

              this.setState({name: 'Button Clicked' + this.count});








const ss = StyleSheet.create({

  container: {

    backgroundColor: '#FAFAFA',

    flex: 1,


  header: {

    alignItems: 'center',

    padding: 10,


    backgroundColor: 'cyan',


  headerText: {

    fontSize: 25,


  body: {

    backgroundColor: 'grey',

    padding: 16,

    flex: 1,


  textItem: {

    alignContent: 'center',

    padding: 10,

    margin: 10,

    backgroundColor: 'pink',

    borderRadius: 8,

    borderColor: 'green',


  textinputs: {

    color: 'white',

    borderBottomColor: 'white',

    borderBottomWidth: 2,

    fontSize: 22,







Subscribe For Daily Updates