react-native/website/versioned_docs/version-0.48/autogen_TouchableNativeFeedback.md

---
id: version-0.48-touchablenativefeedback
title: TouchableNativeFeedback
category: Components
permalink: docs/touchablenativefeedback.html
original_id: touchablenativefeedback
---
<div><div><p>A wrapper for making views respond properly to touches (Android only).
On Android this component uses native state drawable to display touch
feedback.</p><p>At the moment it only supports having a single View instance as a child
node, as it's implemented by replacing that View with another instance of
RCTView node with some additional properties set.</p><p>Background drawable of native feedback touchable can be customized with
<code>background</code> property.</p><p>Example:</p><div class="prism language-javascript">renderButton<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">(</span>
    <span class="token operator">&lt;</span>TouchableNativeFeedback
        onPress<span class="token operator">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span>_onPressButton<span class="token punctuation">}</span>
        background<span class="token operator">=</span><span class="token punctuation">{</span>TouchableNativeFeedback<span class="token punctuation">.</span><span class="token function">SelectableBackground</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span>View style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>width<span class="token punctuation">:</span> <span class="token number">150</span><span class="token punctuation">,</span> height<span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span> backgroundColor<span class="token punctuation">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>Text style<span class="token operator">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>margin<span class="token punctuation">:</span> <span class="token number">30</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">&gt;</span>Button<span class="token operator">&lt;</span><span class="token operator">/</span>Text<span class="token operator">&gt;</span>
      <span class="token operator">&lt;</span><span class="token operator">/</span>View<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>TouchableNativeFeedback<span class="token operator">&gt;</span>
  <span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span></div></div><h3><a class="anchor" name="props"></a>Props <a class="hash-link" href="docs/touchablenativefeedback.html#props">#</a></h3><div class="props"><div class="prop"><h4 class="propTitle"><a class="anchor" name="touchablewithoutfeedback"></a><a href="docs/touchablewithoutfeedback.html#props">TouchableWithoutFeedback props...</a> <a class="hash-link" href="docs/touchablenativefeedback.html#touchablewithoutfeedback">#</a></h4></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="background"></a>background?: <span class="propType">backgroundPropType</span> <a class="hash-link" href="docs/touchablenativefeedback.html#background">#</a></h4><div><p>Determines the type of background drawable that's going to be used to
display feedback. It takes an object with <code>type</code> property and extra data
depending on the <code>type</code>. It's recommended to use one of the static
methods to generate that dictionary.</p></div></div><div class="prop"><h4 class="propTitle"><a class="anchor" name="useforeground"></a>useForeground?: <span class="propType">bool</span> <a class="hash-link" href="docs/touchablenativefeedback.html#useforeground">#</a></h4><div><p>Set to true to add the ripple effect to the foreground of the view, instead of the
background. This is useful if one of your child views has a background of its own, or you're
e.g. displaying images, and you don't want the ripple to be covered by them.</p><p>Check TouchableNativeFeedback.canUseNativeForeground() first, as this is only available on
Android 6.0 and above. If you try to use this on older versions you will get a warning and
fallback to background.</p></div></div></div><span><h3><a class="anchor" name="methods"></a>Methods <a class="hash-link" href="docs/touchablenativefeedback.html#methods">#</a></h3><div class="props"><div class="prop"><h4 class="methodTitle"><a class="anchor" name="selectablebackground"></a><span class="methodType">static </span>SelectableBackground<span class="methodType">()</span> <a class="hash-link" href="docs/touchablenativefeedback.html#selectablebackground">#</a></h4><div><p>Creates an object that represents android theme's default background for
selectable elements (?android:attr/selectableItemBackground).</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="selectablebackgroundborderless"></a><span class="methodType">static </span>SelectableBackgroundBorderless<span class="methodType">()</span> <a class="hash-link" href="docs/touchablenativefeedback.html#selectablebackgroundborderless">#</a></h4><div><p>Creates an object that represent android theme's default background for borderless
selectable elements (?android:attr/selectableItemBackgroundBorderless).
Available on android API level 21+.</p></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="ripple"></a><span class="methodType">static </span>Ripple<span class="methodType">(color: string, borderless: boolean)</span> <a class="hash-link" href="docs/touchablenativefeedback.html#ripple">#</a></h4><div><p>Creates an object that represents ripple drawable with specified color (as a
string). If property <code>borderless</code> evaluates to true the ripple will
render outside of the view bounds (see native actionbar buttons as an
example of that behavior). This background type is available on Android
API level 21+.</p></div><div><strong>Parameters:</strong><table class="params"><thead><tr><th>Name and Type</th><th>Description</th></tr></thead><tbody><tr><td>color<br><br><div><span>string</span></div></td><td class="description"><div><p>The ripple color</p></div></td></tr><tr><td>borderless<br><br><div><span>boolean</span></div></td><td class="description"><div><p>If the ripple can render outside it's bounds</p></div></td></tr></tbody></table></div></div><div class="prop"><h4 class="methodTitle"><a class="anchor" name="canusenativeforeground"></a><span class="methodType">static </span>canUseNativeForeground<span class="methodType">()</span> <a class="hash-link" href="docs/touchablenativefeedback.html#canusenativeforeground">#</a></h4></div></div></span></div>