Core Concepts
- React Native - Running Android
- React Native - Running IOS
- React Native - Router
- React Native - Debugging
- React Native - Animations
- React Native - Buttons
- React Native - HTTP
- React Native - Images
- React Native - ScrollView
- React Native - Text Input
- React Native - ListView
- React Native - Flexbox
- React Native - Styling
- React Native - Props
- React Native - State
- React Native - App
- React Native - Environment Setup
- React Native - Overview
Components and APIs
- React Native - AsyncStorage
- React Native - Geolocation
- React Native - Alert
- React Native - Text
- React Native - Switch
- React Native - Status Bar
- React Native - Picker
- React Native - ActivityIndicator
- React Native - Modal
- React Native - WebView
- React Native - View
React Native Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
React Native - Buttons
In this chapter, we will show you touchable components in react Native. We call them touchable because they offer built in animations and we can use the onPress prop for handpng touch event.
Facebook offers the Button component, which can be used as a generic button. Consider the following example to understand the same.
App.js
import React, { Component } from react import { Button } from react-native const App = () => { const handlePress = () => false return ( <Button onPress = {handlePress} title = "Red button!" color = "red" /> ) } export default App
If the default Button component does not suit your needs, you can use one of the following components instead.
![Buttons Redbutton](/react_native/images/buttons_redbutton.jpg)
Touchable Opacity
This element will change the opacity of an element when touched.
App.js
import React from react import { TouchableOpacity, StyleSheet, View, Text } from react-native const App = () => { return ( <View style = {styles.container}> <TouchableOpacity> <Text style = {styles.text}> Button </Text> </TouchableOpacity> </View> ) } export default App const styles = StyleSheet.create ({ container: { apgnItems: center , }, text: { borderWidth: 1, padding: 25, borderColor: black , backgroundColor: red } })
![Buttons Touchopacity](/react_native/images/buttons_touchopacity.jpg)
Touchable Highpght
When a user presses the element, it will get darker and the underlying color will show through.
App.js
import React from react import { View, TouchableHighpght, Text, StyleSheet } from react-native const App = (props) => { return ( <View style = {styles.container}> <TouchableHighpght> <Text style = {styles.text}> Button </Text> </TouchableHighpght> </View> ) } export default App const styles = StyleSheet.create ({ container: { apgnItems: center , }, text: { borderWidth: 1, padding: 25, borderColor: black , backgroundColor: red } })
Touchable Native Feedback
This will simulate ink animation when the element is pressed.
App.js
import React from react import { View, TouchableNativeFeedback, Text, StyleSheet } from react-native const Home = (props) => { return ( <View style = {styles.container}> <TouchableNativeFeedback> <Text style = {styles.text}> Button </Text> </TouchableNativeFeedback> </View> ) } export default Home const styles = StyleSheet.create ({ container: { apgnItems: center , }, text: { borderWidth: 1, padding: 25, borderColor: black , backgroundColor: red } })
Touchable Without Feedback
This should be used when you want to handle the touch event without any animation Usually, this component is not used much.
<TouchableWithoutFeedback> <Text> Button </Text> </TouchableWithoutFeedback>Advertisements