Handling Touches

1. basic button

   format:

    <tag event caption />

<Button 
    onPress={{}}
    title="I am button"
 />

        <Button 
            onPress={() => {
                Alert.alert("You are Right!");
            }}
            title="Push me"
        />

Usage:

(1) import

import {Button, Alert} from "react-native";

(2) src

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

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Button 
            onPress={() => {
                Alert.alert("You are Right!");
            }}
            title="Push me"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

2. Actual button

    format:

     <tag event caption />

        <TouchableHighlight event>
          <View>
            <Text>caption</Text>
          </View>
        </TouchableHighlight>

for example:

        <TouchableHighlight onPress={this._onPressButton} underlayColor="white">
          <View style={styles.button}>
            <Text style={styles.buttonText}>I am a rounded button</Text>
          </View>
        </TouchableHighlight>

Usage:

(1) import

import {Platform, TouchableHightlight} from "react-native"

(2) src

import React from 'react';
import { StyleSheet, Text, View, Platform, TouchableHighlight, Alert } from 'react-native';

export default class App extends React.Component {
  _onPressButton() {
    Alert.alert('You tapped the button!')
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight onPress={this._onPressButton} underlayColor="white">
          <View style={styles.button}>
            <Text style={styles.buttonText}>I am a rounded button</Text>
          </View>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 60,
    alignItems: 'center'
  },
  button: {
    marginBottom: 30,
     260,
    alignItems: 'center',
    backgroundColor: '#2196F3',
    borderRadius:10
  },
  buttonText: {
    padding: 20,
    color: 'white'
  }
});

Reference:

  1. Handling Touches - Displaying a basic button

  2. Handling Touches - Touchables