pasindu1

[
  {
    "id": 1,
    "description": "Improving Cyber Security"
  },
  {
    "id": 2,
    "icon": "round",
    "description": "Keeping fur out of fashion"
  },

pasindu1

import React from 'react';
import {SafeAreaView, StyleSheet} from 'react-native';

import SwipeButton from './src/components/SwipeButton';

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <SwipeButton onToggle={() => {}}/>
    </SafeAreaView>

pasindu1

// ...
const { width: SCREEN_WIDTH } = Dimensions.get('window');
const BUTTON_WIDTH = SCREEN_WIDTH - 48;
const BUTTON_HEIGHT = 100;
const BUTTON_PADDING = 10;
const SWIPEABLE_DIMENSIONS = 100 - 2 * BUTTON_PADDING;

const H_WAVE_RANGE = SWIPEABLE_DIMENSIONS + 2 * BUTTON_PADDING;
const H_SWIPE_RANGE = BUTTON_WIDTH - 2 * BUTTON_PADDING - SWIPEABLE_DIMENSIONS;

pasindu1

//...
  const animatedStylesText = useAnimatedStyle(() => ({
    opacity: interpolate(
      sharedValue.value,
      InterpolateXInput,
      [0.7, 0],
      Extrapolate.CLAMP,
    ),
    transform: [
      {

pasindu1

//...
const AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
//...

//...
const colorWave = useAnimatedStyle(() => ({
  width: H_WAVE_RANGE + sharedValue.value,
  opacity: interpolate(sharedValue.value, InterpolateXInput, [0, 1]),
}));
//...

pasindu1

import React from 'react';
import {Dimensions, StyleSheet, View} from 'react-native';
import {PanGestureHandler} from 'react-native-gesture-handler';
import LinearGradient from 'react-native-linear-gradient';
import Animated, {
  Extrapolate,
  interpolate,
  interpolateColor,
  useAnimatedGestureHandler,
  useAnimatedStyle,

pasindu1

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

const {getDefaultConfig} = require('metro-config');

module.exports = (async () => {

pasindu1

import React, {useState} from 'react';
import {
  FlatList,
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
} from 'react-native';
import RightIcon from './rightIcon.svg';
import Animated, {

pasindu1

...//
  const [bodySectionHeight, setBodySectionHeight] = useState(0);

  const bodyHeight = useAnimatedStyle(() => ({
    height: interpolate(shareValue.value, [0, 1], [0, bodySectionHeight])
  }));
  ....//
  
  ...//
  <Animated.View

pasindu1

import React from 'react';
import {
  StyleSheet,
  TouchableOpacity,
} from 'react-native';
import Animated, {
  interpolate,
  useAnimatedStyle,
  useSharedValue,
  withTiming,