پروژه ها

بازگشت
react native loading bar

لودینگ بار جذاب در فریم ورک ری اکت نیتیو.
import React, { useState, useRef, useEffect } from 'react';
import { FontAwesome5, MaterialCommunityIcons } from '@expo/vector-icons';
import { StyleSheet, Text, TouchableOpacity, View, Animated } from 'react-native';

const App = () => {

  const toBar = useState(new Animated.Value(50))[0];
  const barload = useRef(new Animated.Value(0)).current;
  const finishCheck = useRef(new Animated.Value(10) ).current;
  const [wid, setWid] = useState(0);
  const [fonsi, setfonsi] = useState(1);
  const [detectChange, setDetectChange] = useState(1);
  const [barchangeval, setBarchanegVal] = useState(0);
  const [part3, setpart3] = useState(false);


  function finalcheck() {
    finishCheck.addListener(({value})=>{
      setWid(parseInt(value*2));
      setfonsi(parseInt(((value - 10)/ 90) * 50));
    });
    Animated.timing(finishCheck,{
      toValue:100,
      duration:500,
      useNativeDriver:false,

    }).start();
  }

  function convert2Bar() {
    toBar.addListener(({ value }) => {
      setDetectChange((value - 10) / 40);
      if (value == 10) {
        barloading();
      }
    });
    Animated.timing(toBar, {
      toValue: 10,
      duration: 1000,
      useNativeDriver: false,
    }).start();
  }

  function barloading() {
    barload.addListener(({ value }) => {
      setBarchanegVal(parseInt(value));
      if (value == 100) {
        setpart3(true);
      }
    })
    Animated.timing(barload, {
      toValue: 100,
      duration: 5000,
      useNativeDriver: false,
    }).start();
  }

  useEffect(() => {
    if (barchangeval == 100) { finalcheck(); }
  }, [part3]);

  return (
    <View style={styles.container}>
      <View>
        <Animated.View>
          {!part3 && <MaterialCommunityIcons name='truck-check' style={{marginLeft: parseInt(2.3 * barload._value )}} size={71 - parseInt(detectChange * 70)} color='#ff3399' />}
          {!part3 && <TouchableOpacity onPress={convert2Bar}>
            <Animated.View style={[styles.baring, { height: toBar }]}>
              {detectChange != 0 && <Text style={{ fontSize: 18, opacity: detectChange }}>Complet Orders</Text>}
              {detectChange == 0 && <View style={{ flex: 1, flexDirection: 'row', borderRadius: 10 }}>
                <View style={{ backgroundColor: '#ff3399', borderRadius: 10, flex: barchangeval }}></View>
                <View style={{ flex: 100 - barchangeval }}></View>
              </View>}
            </Animated.View>
          </TouchableOpacity>}
          {
            part3 && 
            <Animated.View style={{ backgroundColor:'#ff3399', marginTop:70, justifyContent:'center', alignItems:'center', borderRadius:20, width:300 - wid, height: finishCheck}}> 
              <FontAwesome5 name="check" size={fonsi} color='white' />
            </Animated.View>
          }
        </Animated.View>
      </View>
    </View >
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: "#202020",
  },
  baring: {
    justifyContent: 'center',
    alignItems: 'center',
    width: 300,
    backgroundColor: '#009999',
    borderRadius: 15,
  }
});


export default App;