Best Way To Create React Native Button

If you are new to react native and you are confused whether you should use Button ,TouchableOpacity or Pressable component in react-native. Then you are at right place, I am going to give you a reason which one should you use and why.

React Native provides you several ways to create buttons.

• Button - Use build-in <Button/> component which renders a basic button which works on any(android/ios) platform but the twist is, it support minimal customization. Even it doesn't allows you to write style props. It only allows color props to change the look of default button

•     import React from "react";
      import { View, Button, StyleSheet } from "react-native";
  
      const App = () => {
        return (
          <View style={styles.screenContainer}>
            <Button title="Click me!" color="red" onPress={() => console.log("Button pressed")}></Button>
          </View>
        );
      };
  
      const styles = StyleSheet.create({
        screenContainer: {
          flex: 1,
          justifyContent: "center",
          alignItems: "center",
        },
      });
  
      export default App
  

TouchableOpacity Vs Pressable

• TouchableOpacity is a high Level component which provides you a simple way to create touchable element where as Pressable is a low level component provides you more control over your touchable's element apperance & behaviour. Styling of both the component is done through style props.

  Pressable component has the props like onHoverIn, onHoverOut,onLongPress, onPress, onPressIn, onPressOut to make the button's presence more better.

• In summary, if you want a simple way to create a touchable button without worrying about the underlying implementation, use TouchableOpacity. If you need more control over the touchable element's appearance and behavior, use Pressable. Both components can be used to create touchable buttons in your React Native app, and they can be styled using their respective style props.

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

const App = () => {
  const [count, setCount] = useState(0);
  const onPress = () => setCount(prevCount => prevCount + 1);

  return (
    <View style={styles.container}>
      <View style={styles.countContainer}>
        <Text>Count: {count}</Text>
      </View>
      <TouchableOpacity style={styles.button} onPress={onPress}>
        <Text>Press Here</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 10,
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10,
  },
  countContainer: {
    alignItems: 'center',
    padding: 10,
  },
});

export default App;

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

const App = () => {
  const onPressHandler = () => {
    console.log('Pressed!');
  };

  const onLongPressHandler = () => {
    console.log('Long Pressed!');
  };

  const onPressInHandler = () => {
    console.log('Press In!');
  };

  const onPressOutHandler = () => {
    console.log('Press Out!');
  };

  return (
   <View style={styles.container}>
     <Pressable
      onPress={onPressHandler}
      onLongPress={onLongPressHandler}
      onPressIn={onPressInHandler}
      onPressOut={onPressOutHandler}
      style={({ pressed }) => ([{ backgroundColor: pressed ? 'gray' : 'pink' },styles.button])}
    >
      <Text>Press me!</Text>
    </Pressable>
   </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex:1,
    justifyContent: 'center',
    alignItems:'center',
    paddingHorizontal: 10,
  },
  button:{
    borderRadius:10,
    width:'50%',
    height:40,
    alignItems:'center',
    justifyContent:'center'
  }
})

export default App;