3D Button in React Native
Tags: reactnative, tailwindcss, 3dbutton, animation
Published: 2021-09-22 10:19:45

## Intro

In this tutorial, you will learn how to build a basic 3dimensional looking button in react native. We will be utilizing the [__Animated__](https://reactnative.dev/docs/animated) module that is readily available in react native.

<br/>
## Lets get started

![3D Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o15v8rvu3ysuxxx80jep.png)

{%vimeo 611533567 %}
***
## CODE

```javascript
import React, { useRef } from 'react';
import { Text, TouchableWithoutFeedback, Animated } from 'react-native';
import { tailwind } from '../utils/tailwind';

interface Props {
  text?: string;
  onPress?: () => void;
}

const Button: React.FC<Props> = ({ text, onPress }) => {
  const animation = useRef(new Animated.Value(0)).current;

  const handlePress = () => {
    Animated.timing(animation, {
      toValue: 1,
      duration: 50,
      useNativeDriver: true,
    }).start();
  };

  const handleButtonOut = () => {
    Animated.timing(animation, {
      toValue: 0,
      duration: 50,
      useNativeDriver: true,
    }).start();

    if (onPress) {
      onPress();
    }
  };

  return (
    <TouchableWithoutFeedback
      onPressIn={handlePress}
      onPressOut={handleButtonOut}
    >
      <View
        style={tailwind('rounded-full', 'bg-rose-700', 'border-rose-700')}
      >
        <Animated.View
          style={[
            tailwind(
              'rounded-full',
              'items-center',
              'bg-red-500',
              'border',
              'border-red-500',
            ),
            {
              transform: [
                {
                  translateY: animation.interpolate({
                    inputRange: [0, 1],
                    outputRange: [-5, 0],
                  }),
                },
              ],
            },
          ]}
        >
          <Text style={tailwind('font-bold', 'text-white', 'text-lg')}>
            {text}
          </Text>
        </Animated.View>
      </View>
    </TouchableWithoutFeedback>
  );
};

export default Button;

```

<br/>
<br/>
## Explanation

Declare a animation variable and assign the value to 0. We need wrap it in the useRef hook to make sure the animation value persists any changes that might happen outside the 3D button component.
 

```typescript
 const animation = useRef(new Animated.Value(0)).current;
```

The press animation starts on clicking the button where the `interpolate` function is invoked changing the value from `0 to 1`, this causes the `translateY` value to change from `-5px to 0px`


| Value| translateY|
| ---- |----------:|
|0     | -5px      |
|1     |  0px      |

The above table shows how the value relates to the pixels changes, you can add more values and customize it.


```typescript
transform: [{
  translateY: 
    animation.interpolate({
    inputRange: [0, 1],
    outputRange: [-5, 0],
   
})}]
```


[`onPressIn`](https://reactnative.dev/docs/touchablewithoutfeedback#onpressin) triggers the function to change the `animation` variable value to 1, we can assign a duration value of `50` or `any number`.


<br/>
```typescript
Animated.timing(animation, {
      toValue: 1,
      duration: 50,
      useNativeDriver: true,
    }).start();
```


[`onPressOut`](https://reactnative.dev/docs/touchablewithoutfeedback#onpressout) function is triggered when the user presses out of the [`TouchableWithoutFeedback`](https://reactnative.dev/docs/touchablewithoutfeedback) where the value goes back to 0


```typescript
 Animated.timing(animation, {
      toValue: 0,
      duration: 50,
      useNativeDriver: true,
    }).start();
```

<br/>
<br/>
 
Hope you enjoyed this mini tutorial.
*Abdul Wasey*