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'

 

Example

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

    alert('Hello');

  }

  render() {

    return (

      <View style={ss.container}>

        <View style={ss.header}>

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

        </View>

        <View style={ss.body}>

          <Image

            source={{

              uri:

                'https://www.thewowstyle.com/wp-content/uploads/2015/01/nature-images.jpg',

            }}

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

          />

          <Text style={ss.header}>{this.state.name}</Text>

          <Button

            title="Click Me"

            color="#841584"

            onPress={() => {

              //For generating alert on buttton click

              this.count = this.count + 1;

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

            }}

          />

        </View>

      </View>

    );

  }

}

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,

  },

});

 

 

Output

 


Subscribe For Daily Updates