Hello friends, In today’s tutorial we would learn about onPress event of Pressable button component in react native. It is used to set click event on button. When user touch the button and immediately release it like clicking a button then it will call the onPress function. We can call any function here as per our requirement. So in this tutorial we would learn about Example of Set onPress onClick on Pressable in React Native. You can read more about it HERE.
Contents in this project Example of Set onPress onClick on Pressable in React Native :-
Complete Source Code for App.js File :-
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
import React from "react"; import { Alert, Pressable, SafeAreaView, StyleSheet, Text, View } from 'react-native'; export default function App() { const callOnPress=()=> { Alert.alert('Pressable Called.....') } return ( <SafeAreaView style={{ flex: 1 }}> <View style={styleSheet.MainContainer}> <Text style={styleSheet.text}> Example of onPress onClick in Pressable in React Native </Text> <Pressable style={styleSheet.button} onPress={callOnPress} android_ripple={{ color: 'cyan' }}> <Text style={styleSheet.button_text}> Click Here </Text> </Pressable> </View> </SafeAreaView> ); } const styleSheet = StyleSheet.create({ MainContainer: { flex: 1, padding: 6, alignItems: 'center', justifyContent: 'center', backgroundColor: '#E1F5FE' }, text: { fontSize: 25, textAlign: 'center', color: 'red', padding: 3, marginBottom: 10, textAlign: 'center' }, button: { height: 44, width: '80%', padding: 5, backgroundColor: '#00B8D4', justifyContent: 'center', alignItems: 'center', }, button_text: { textAlign: 'center', fontSize: 21, color: '#ffff', padding: 4, }, }); |
Screenshots :-
