Example of Set onPress onClick on Text in React Native

Hello friends, As button the Text component does also support onPress event in react native. The onPress event is called when user touch or press the Text component. To Set onPress onClick on Text in React Native we have to use onPress={} prop in react native. The onPress event is supported by both Android and iOS platforms.

Contents in this project Example of Set onPress onClick on Text in React Native :-

1. Open your project’s main App.js file and import View, StyleSheet, Text and Alert component.

import React from "react";

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

import React from "react";

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

2. Creating our main Export default App component .

export default function App() {



}

export default function App() {

}

3. Creating a function named as showMessage() with Fat Arrow ()=> syntax. In the function we are simply print a Alert message on screen.

  const showMessage = () => {

    Alert.alert('onPress Called...');

  }

const showMessage = () => {

Alert.alert('onPress Called...');

}

4. Now we would make the return() block and make 1 Text component with onPress={ } event and call above function in it.

  return (
    <View style={styleSheet.MainContainer}>

      <Text
        style={{ color: 'red', fontSize: 30, textAlign: 'center' }}
        onPress={showMessage}>
        Example of onPress Click Event on Text in React Native
      </Text>

    </View>
  );

return (

<Text

style={{ color: 'red', fontSize: 30, textAlign: 'center' }}

onPress={showMessage}>

Example of onPress Click Event on Text in React Native

</Text>

</View>

);

5. Creating Style.

const styleSheet = StyleSheet.create({

  MainContainer: {
    flex: 1,
    padding: 10,
    justifyContent: 'center',
    alignItems: 'center'
  }

});

const styleSheet = StyleSheet.create({

MainContainer: {

flex: 1,

padding: 10,

justifyContent: 'center',

alignItems: 'center'

}

});

6. Complete Source Code for App.js File :-

import React from "react";

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

export default function App() {

  const showMessage = () => {

    Alert.alert('onPress Called...');

  }

  return (
    <View style={styleSheet.MainContainer}>

      <Text
        style={{ color: 'red', fontSize: 30, textAlign: 'center' }}
        onPress={showMessage}>
        Example of onPress Click Event on Text in React Native
      </Text>

    </View>
  );
}

const styleSheet = StyleSheet.create({

  MainContainer: {
    flex: 1,
    padding: 10,
    justifyContent: 'center',
    alignItems: 'center'
  }

});