How to use TouchableNativeFeedback in React native android? - react-native

Question

I am getting warnings while using this component. Trying to use this component as a button. I tried require('TouchableNativeFeedback') but no use. I also tried to npm install TouchableNativeFeedback, but failed. How should it be incorporated in my react native android code?
{
var TouchableNativeFeedback= require('TouchableNativeFeedback');
var Button= require('react-native-button');
var {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TouchableNativeFeedback,
} = React;
var AwesomeProject = React.createClass({
render: function() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
My first App
</Text>
<Text style={styles.instructions}>
we should get started
</Text>
<Text style={styles.instructions}>
Nice!!
</Text>
<Image source={require('./abc.png')} style={styles.img} >
<Text style={styles.welcome}> Inside an image! </Text>
</Image>
<TouchableNativeFeedback
style={styles.img} >
<View>
<Text style= {styles.instructions}>
Button!
</Text>
</View>
</ TouchableNativeFeedback>
<Button style={styles.img} onClick="this.butclick">
<View>
<Text style={styles.instructions}>
This is a Button
</Text>
</View>
</Button>
</View>
);
}
});
}

Answer 1

It can be implement like this, see the react-native documentation for more functionality.
​ <TouchableNativeFeedback
background={TouchableNativeFeedback.Ripple('red')}>
<View style={styles.view}>
<Text style={style.text}>Text Here</Text>
</View>
</TouchableNativeFeedback>

Answer 2

best practice to use TouchableNativeFeedback.Ripple is to check the api version of devices first, because this background type is available on Android API level 21+.
import { Platform } from 'react-native';
<TouchableNativeFeedback
onPress={this.follow}
background={
Platform.Version >= 21 ?
TouchableNativeFeedback.Ripple('rgba(0,0,0,.2)', true) :
TouchableNativeFeedback.SelectableBackground()
}
>

Answer 3

require isn't necessary.
TouchableNativeFeedback is like Text, Image or View.
var Button= require('react-native-button');
var {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TouchableNativeFeedback,
} = React;
var AwesomeProject = React.createClass({
render: function() {
return (
<View style={styles.container}>
<TouchableNativeFeedback
style={styles.img} >
<View>
<Text style= {styles.instructions}>
Button!
</Text>
</View>
</ TouchableNativeFeedback>
</View>
);
}
});

Answer 4

Firstly, you need to import the respective dependency(TouchableNativeFeedback):
import { TouchableNativeFeedback, View, Text } from 'react-native';
After this, you can use it as:
<TouchableNativeFeedback onPress={() => this._onPressButton()} key={index}>
<View>
<Text>Click Me</Text>
</View>
</TouchableNativeFeedback>
Note: Make sure to add the respective click function(this._onPressButton()) in your code, otherwise you will get an error.