moti-crypto-dashboard-1656591121529.jsx

import React, {useEffect, useState} from 'react';
import {
  View,
  SafeAreaView,
  Text,
  StyleSheet,
  ScrollView,
  ActivityIndicator,
  StatusBar,
} from 'react-native';
import {MotiView} from 'moti';
import {LineGraph} from 'react-native-graph';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

const darkTextColor = '#282828';
const lightTextColor = '#dcdcdc';

const currencies = [
  {
    symbol: 'BTC',
    balance: '$10,987',
    name: 'Bitcoin',
    trend: 'up',
    color: '#654C70',
    icon: 'bitcoin',
    text: 'light',
  },
  {
    symbol: 'ETH',
    balance: '$9,340',
    name: 'Ether',
    trend: 'up',
    color: '#F7A339',
    icon: 'ethereum',
    text: 'dark',
  },
  {
    symbol: 'USD',
    balance: '$23,746',
    name: 'US Dollars',
    trend: 'down',
    color: '#D65A5A',
    icon: 'currency-usd',
    text: 'light',
  },
  {
    symbol: 'USDC',
    balance: '$1,879',
    name: 'USD Coin',
    trend: 'up',
    color: '#654C70',
    icon: 'hand-coin',
    text: 'light',
  },
];

const graphData = [
  {date: new Date(2017, 1, 1), value: 1100},
  {date: new Date(2017, 5, 1), value: 1200},
  {date: new Date(2017, 9, 1), value: 1300},
  {date: new Date(2018, 1, 1), value: 1500},
  {date: new Date(2018, 5, 1), value: 1200},
  {date: new Date(2018, 9, 1), value: 900},
  {date: new Date(2019, 1, 1), value: 2000},
  {date: new Date(2019, 5, 1), value: 3000},
  {date: new Date(2019, 9, 1), value: 8000},
  {date: new Date(2020, 1, 1), value: 9000},
  {date: new Date(2020, 5, 1), value: 12000},
  {date: new Date(2020, 9, 1), value: 8000},
  {date: new Date(2021, 1, 1), value: 4000},
  {date: new Date(2021, 5, 1), value: 3000},
  {date: new Date(2021, 9, 1), value: 3500},
  {date: new Date(2022, 1, 1), value: 4500},
];

const MotiMoney = () => {
  const [isToggled, setIsToggled] = useState(false);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
      setIsToggled(true);
    }, 2000);
  }, []);

  if (isLoading) {
    return (
      <SafeAreaView
        style={{
          flex: 1,
          backgroundColor: '#17021A',
          alignItems: 'center',
          justifyContent: 'center',
          padding: 20,
        }}>
        <StatusBar barStyle={'light-content'} />
        <ActivityIndicator size={'large'} color="white" />
      </SafeAreaView>
    );
  }
  return (
    <SafeAreaView
      style={{
        flex: 1,
        backgroundColor: '#17021A',
        alignItems: 'center',
        padding: 20,
      }}>
      <StatusBar barStyle={'light-content'} />
      <ScrollView style={{flex: 1, width: '100%'}}>
        <MotiView
          animate={{
            opacity: isToggled ? 1 : 0,
            scale: isToggled ? 1 : 1.5,
          }}
          transition={{type: 'timing', delay: 0}}
          style={{
            width: '100%',
            padding: 10,
          }}>
          {currencies.map((currency, index) => {
            return (
              <View
                key={index}
                style={{
                  backgroundColor: currency.color,
                  borderRadius: 20,
                  padding: 20,
                  justifyContent: 'space-between',
                  marginVertical: 10,
                  flexDirection: 'row',
                  alignItems: 'center',
                }}>
                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                  <MaterialCommunityIcons
                    name={currency.icon}
                    color={
                      currency.text === 'dark' ? darkTextColor : lightTextColor
                    }
                    size={48}
                  />
                  <View
                    style={{
                      flexDirection: 'column',
                      justifyContent: 'center',
                      marginHorizontal: 10,
                    }}>
                    <View style={{flexDirection: 'row'}}>
                      <Text
                        style={{
                          color:
                            currency.text === 'dark'
                              ? darkTextColor
                              : lightTextColor,
                          fontSize: 20,
                          marginRight: 5,
                          fontWeight: 'bold',
                        }}>
                        {currency.symbol}
                      </Text>
                      {currency.trend === 'up' ? (
                        <MaterialCommunityIcons
                          name="trending-up"
                          color={
                            currency.text === 'dark'
                              ? darkTextColor
                              : lightTextColor
                          }
                          size={20}
                        />
                      ) : (
                        <MaterialCommunityIcons
                          name="trending-down"
                          color={
                            currency.text === 'dark'
                              ? darkTextColor
                              : lightTextColor
                          }
                          size={20}
                        />
                      )}
                    </View>
                    <Text
                      style={{
                        color:
                          currency.text === 'dark'
                            ? darkTextColor
                            : lightTextColor,
                        fontSize: 20,
                      }}>
                      {currency.name}
                    </Text>
                  </View>
                </View>

                <Text
                  style={{
                    color:
                      currency.text === 'dark' ? darkTextColor : lightTextColor,
                    fontSize: 24,
                    fontWeight: 'bold',
                  }}>
                  {currency.balance}
                </Text>
              </View>
            );
          })}
        </MotiView>
        <MotiView
          animate={{
            opacity: isToggled ? 1 : 0,
            translateY: isToggled ? 0 : 500,
          }}
          transition={{type: 'timing', delay: 0}}
          style={{
            width: '100%',
            padding: 10,
          }}>
          <View
            style={{
              backgroundColor: '#F2AC42',
              borderRadius: 20,
              padding: 20,
              justifyContent: 'space-between',
              marginVertical: 10,
            }}>
            <Text
              style={{
                color: darkTextColor,
                fontSize: 24,
                fontWeight: 'bold',
                marginBottom: 20,
              }}>
              Portfolio Performance
            </Text>
            <LineGraph
              style={{height: 100}}
              animated={false}
              points={graphData}
              color={darkTextColor}
            />
          </View>
        </MotiView>
      </ScrollView>
    </SafeAreaView>
  );
};

export default MotiMoney;

const styles = StyleSheet.create({
  text: {fontSize: 52, fontWeight: 'bold', color: lightTextColor},
});

MotiCryptoTransitionIn.mov