Ads by ProfitSence
Close

React Native Button , TouchableOpacity ,Pressable Components

Last Updated on Wednesday 5th Oct 2022

React Native Button Component

  • Build-in Button Component
  • Really Basic Component
  • Doesn't allow much Customization
  • Self Closing Element
			
					import React from "react";
import { View, Button } from "react-native";

const App = () => {
  return (
    <View>
      <Button title={"Hey Folks"} onPress={pressHandler} color="#00f" />
    </View>
  );
};

React Native TouchableOpacity Component

  • For Handling Users for Touches
  • Build in Opacity Dimming whenever the button pressed
  • You can use TouchableOpacity for lightening the opacity of a button.
			
					import React from "react";
import { View, TouchableOpacity, Text } from "react-native";

const App = (props) => {
  return (
    <View>
      <TouchableOpacity onPress={() => props.navigation.navigate('GoSomeWhere')}>
        <Text>Press Here</Text>
      </TouchableOpacity>
    </View>
  );
};

React Native Pressable Component

  • Probably better to use
  • Matches the Native Environment
  • Provides a pressed state inside a callback function
			
					import React from "react";
import { StyleSheet, View, Pressable, Text } from "react-native";

const App = () => {
  return (
    <View>
      <Pressable style={styles.button} onPress={pressHandler}>
        <Text>Press Me</Text>
      </Pressable>
    </View>
  );
};

const styles = StyleSheet.create({
  button: {
    width: "80%",
    paddingVertical: 30,
    borderRadius: 10,
    alignItems: center,
    backgroundColor: "#0cf",
  },
});