import React, { useState, useRef, useEffect } from 'react';
import { View, Text, StyleSheet, ActivityIndicator, ScrollView, Animated, Easing } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';

import { RootState } from '@/stores/index';
import { FullScreenImage, SizedBox } from '@/components/general/shared_styled';
import SwapAction from './components/SwapAction';
import SwapChart from './components/SwapChart';
import LottieView from 'lottie-react-native';

const AnimatedLottieView = Animated.createAnimatedComponent(LottieView);

const Swap = () => {
const { swaps, loading: swapsLoading } = useSelector((state: RootState) => state.swaps);
const animationProgress = useRef(new Animated.Value(0));

useEffect(() => {
Animated.timing(animationProgress.current, {
toValue: 1,
duration: 5000,
easing: Easing.linear,
useNativeDriver: false,
}).start();
}, []);

return (

<FullScreenImage
source={require('@/assets/image/background.png')}
/>
{swapsLoading ? (

{/* */}
<AnimatedLottieView
source={require("@/assets/animations/LottieLogo1.json")}
progress={animationProgress.current}
/>

) : (




)}

);
};

const styles = StyleSheet.create({
wrapper: {
flex: 1,
paddingTop: 120,
paddingBottom: 16,
paddingHorizontal: 16
},
loaderContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
height: '50%',
},
scrollContainer: {
flex: 1,
},
});

export default Swap;

/*
import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, ActivityIndicator, ScrollView } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';

import { RootState } from '@/stores/index';
import { FullScreenImage, SizedBox } from '@/components/general/shared_styled';
import SwapAction from './components/SwapAction';
import SwapChart from './components/SwapChart';
import LoadingScreen from '@/components/common/Loader';

const Swap = () => {
const { swaps, loading: swapsLoading } = useSelector((state: RootState) => state.swaps);

return (

<FullScreenImage
source={require('@/assets/image/background.png')}
/>
{swapsLoading ? (



) : (




)}

);
};

const styles = StyleSheet.create({
wrapper: {
flex: 1,
paddingTop: 120,
paddingBottom: 16,
paddingHorizontal: 16
},
loaderContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
height: '50%',
},
scrollContainer: {
flex: 1,
},
});

export default Swap;
*/

But this error

ViewManagerResolver returned null
for either LottieAnimationView or
RCTLottieAnimationView, existing names
are: [RNSVGFeMerge, RCTSafeAreaView,
RNSVGLinearGradient, RNSScreenContainer,
AndroidProgressBar, RNSVGFeColorMatrix,
AndroidBlurView, RNSVGSymbol, RNSVGPattern,
RNCSafeAreaView, RNSVGSvgViewAndroid,
RNSScreen, AndroidSwitch, RNSVGUse,
BVLinearGradient, RNSentryOnDrawReporter,
RNSVGTSpan, RNSVGFilter, RNSVGMarker,
RNCSafeAreaProvider, RNSSearchBar,
RNGestureHandlerButton, RNSVGForeignObject,
RNSVGGroup, RNSVGText, RNSVGlmage,
RNSVGFeComposite, RNSVGRadialGradient,
RNSScreenStackHeaderConfig,
UnimplementedNativeView, RNSVGFeOffset,
RNSVGPath, AndroidDrawerLayout,
RNSScreenStackHeaderSubview,
RNCAndroidDialogPicker, RNSentryReplayMask,
AndroidTextlnput, RNSVGDefs, DebuggingOverlay,
RNSScreenFooter, RNSVGFeGaussianBlur,
FastlmageView, RNSModalScreen,
AndroidHorizontalScrollView, RCTText,
AndroidHorizontaIScroIIContentView,
RNSVGClipPath, RNSVGFeBlend, RCTView,
RNSVGCircle, RNSScreenStack, RCTModalHostView,
RNSVGEllipse, RNSVGLine, RCTTextlnlinelmage,
RNCWebView, RNSVGFeFlood, RCTlmageView,
RNSVGMask, RNSScreenContentWrapper,
RNSVGRect, RNSVGTextPath, RCTScrollView,
RCTVirtualText, AndroidSwipeRefreshLayout,
RCTRawText, RNGestureHandlerRootView,
RNCAndroidDropdownPicker]