react-native/docs/touchableopacity.md

id, title, original_id

id	title	original_id
version-0.50-touchableopacity	touchableopacity	touchableopacity

TouchableOpacity #

A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it.

Opacity is controlled by wrapping the children in an Animated.View, which is added to the view hiearchy. Be aware that this can affect layout.

Example:

renderButton: function() { return ( <TouchableOpacity onPress={this._onPressButton}> <Image style={styles.button} source={require('./myButton.png')} /> </TouchableOpacity> ); },

Example #

import React, { Component } from 'react' import { AppRegistry, StyleSheet, TouchableOpacity, Text, View, } from 'react-native'

class App extends Component { constructor(props) { super(props) this.state = { count: 0 } }

onPress = () => { this.setState({ count: this.state.count+1 }) }

render() { return ( <View style={styles.container}> <TouchableOpacity style={styles.button} onPress={this.onPress} > <Text> Touch Here </Text> </TouchableOpacity> <View style={[styles.countContainer]}> <Text style={[styles.countText]}> { this.state.count !== 0 ? this.state.count: null} </Text> </View> </View> ) } }

const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', paddingHorizontal: 10 }, button: { alignItems: 'center', backgroundColor: '#DDDDDD', padding: 10 }, countContainer: { alignItems: 'center', padding: 10 }, countText: { color: '#FF00FF' } })

AppRegistry.registerComponent('App', () => App)

Props #

TouchableWithoutFeedback props... #

activeOpacity?: number #

Determines what the opacity of the wrapped view should be when touch is active. Defaults to 0.2.

tvParallaxProperties?: object #

Apple TV parallax effects

Methods #

setOpacityTo(value: number, duration: number) #

Animate the touchable to a new opacity.

Improve this page by sending a pull request!

← PrevNext →