Fade and Scale Button
This Pressable uses react-native-reanimated to animate its opacity and scale when pressed.
Press Me
Install Dependencies
Dependencies are required for this component, and are locked to the versions used for the app. You can install them using the following commands:
react-native-reanimated
Be sure to follow the installation steps: 
Installation Guide
npm
yarn
pnpm
Copy
Copied!
npm 
install 
react-native@0.74.1 react-native-reanimated@~3.10.1
Component Files
Copy the code snippets below to use in your project.
FadeAndScaleButton.tsx
Copy
Copied!
import
React
from
"react"
;
import
{
View
,
Text
}
from
"react-native"
;
import
Animated
,
{
useSharedValue
,
useAnimatedStyle
,
withTiming
}
from
"react-native-reanimated"
;
const
AnimatedPressable
=
Animated
.
createAnimatedComponent
(
Pressable
)
;
function
FadeAndScaleButton
(
)
{
const
opacity
=
useSharedValue
(
1
)
;
const
scale
=
useSharedValue
(
1
)
;
const
animatedStyle
=
useAnimatedStyle
(
(
)
=
>
{
return
{
Purchase NativeUI
NATIVE UI
Buttons
Fade and Scale Button
Stateful Button
Components
Feedback