React Native Button , TouchableOpacity ,Pressable Components
Last Updated On
Sunday 21st Nov 2021
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",
},
});