React- Native- App -Development

React Native Buttons

July 08, 2022

 In React Native, buttons are used for handling user interactions like tapping or clicking. There are several ways to create buttons in React Native. Here are a few common options:

1. Using the Built-in Button Component

React Native provides a basic Button component that can be used for simple buttons.

import React from 'react';
import { Button, View, Alert } from 'react-native';
const App = () => {
  return (
    <View>
      <Button
        title="Press me"
        onPress={() => Alert.alert('Button Pressed')}
        color="#841584"
      />
    </View>
  );
};
export default App;


Props:

  • title: The text on the button.
  • onPress: The function to execute when the button is pressed.
  • color: The color of the button (only affects Android).

2. Using TouchableOpacity for Custom Buttons

If you want more control over the design of your button (e.g., custom styling, background color, or font size), you can use the TouchableOpacity component.

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

const App = () => {
  return (
    <View style={styles.container}>
      <TouchableOpacity style={styles.button} onPress={() => alert('Custom Button Pressed')}>
        <Text style={styles.buttonText}>Press Me</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    backgroundColor: '#841584',
    padding: 10,
    borderRadius: 5,
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
  },
});

export default App;


3. Using TouchableHighlight

TouchableHighlight is another touchable component that gives feedback by dimming the button when pressed.

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

const App = () => {
  return (
    <View style={styles.container}>
      <TouchableHighlight
        style={styles.button}
        underlayColor="#DDDDDD"
        onPress={() => alert('TouchableHighlight Pressed')}
      >
        <Text style={styles.buttonText}>Press Me</Text>
      </TouchableHighlight>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    backgroundColor: '#841584',
    padding: 10,
    borderRadius: 5,
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
  },
});

export default App;

4. Using Pressable (Introduced in React Native 0.63)

Pressable is a newer component designed to be a more versatile and performant touchable.

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

const App = () => {
  return (
    <View style={styles.container}>
      <Pressable
        style={({ pressed }) => [
          {
            backgroundColor: pressed ? '#ddd' : '#841584',
          },
          styles.button,
        ]}
        onPress={() => alert('Pressable Pressed')}
      >
        <Text style={styles.buttonText}>Press Me</Text>
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    padding: 10,
    borderRadius: 5,
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
  },
});

export default App;

Summary

  • Button: Simple button with limited styling.
  • TouchableOpacity: Customizable button with opacity effect.
  • TouchableHighlight: Customizable button with highlight effect.
  • Pressable: More flexible component for complex touch interactions.

You can choose one depending on your use case and the level of customization required!