Good morning friends, good ... what happens is this: I tried to make a logic so that the setLoaded changes the value of my progress bar, and when the value of it reaches 100, it shows the Modal. But nothing is happening. I wanted when I pressed the play button my ProgressBar to start loading its value, and when I clicked the pause button the value of it would stop at the value it was. Will someone help me please? I've worked very hard, I'm getting discouraged I want activate this through Play button (touchable opacity)
import * as React from 'react';
import { useState} from 'react';
import {
Text, View, ScrollView, KeyboardAvoidingView, Image,
TouchableOpacity
} from 'react-native';
import { Entypo, Feather } from 'react-native-vector-icons';
import { Card } from 'react-native-shadow-cards';
import * as Progress from 'react-native-progress';
import { NavigationContainer } from '@react-navigation/native';
import { useNavigation } from '@react-navigation/native';
import Modal from 'react-native-modal';
//link redefinir senha
//https://account.activedirectory.windowsazure.com/ChangePassword.aspx
const taskDetails = () => {
const navigate = useNavigation();
const [showHide, setShowHide] = useState(false);
const [modal, setModal] = useState(false);
const [progress, setProgress] = useState(0);
const [isLoaded, setLoaded] = useState(false);
return (
<>
{
!isLoaded ?
<Modal isVisible={modal}>
<View
style={{
backgroundColor: '#fff',
paddingVertical: 20,
paddingHorizontal: 20,
alignSelf: 'center',
borderRadius: 15,
height: 480,
width: 300}}>
<Image
source={require('../../assets/images/working-hours(1).png')}
style={{alignSelf: 'center',
width: 100,
height: 100,
margin: 10,
marginTop: 20}}/>
<Text style={{
fontWeight: 'bold',
fontSize: 20,
textAlign: 'center',
padding: 10,
}}>
{'Eba! \n Task finalizada com sucesso!'}
</Text>
<Text style={{textAlign: 'center'}}>
{'Suas horas nesta task foram \n lançadas,volte para a home para \n começar uma nova tarefa!'}
</Text>
<Text style={{
textAlign: 'center', color: '#808080',
padding: 5, marginBottom: 10 }}>
Com isso você ganhou:
</Text>
<Image
source={require('../../assets/images/grin-stars.png')}
style={{
alignSelf: 'flex-start', marginLeft: 75,
margin: 5}}/>
<Text style={{fontSize: 20, fontWeight: 'bold',
textAlign: 'right', marginRight: 95,
bottom: 40}}>
10pts
</Text>
<Text style={{
textAlign: 'right', fontSize: 12,
marginRight: 70, bottom: 45}}>
de experiência
</Text>
<TouchableOpacity
style={{
justifyContent: 'center',
alignItems: 'center',
alignSelf: 'center',
marginTop: 20,
backgroundColor: '#000000',
paddingVertical: 10,
borderRadius: 10,
padding: 10,
width: 250,
height: 50,
elevation: 8,
bottom: 30
}}
onPress={() => setModal(false)}>
<Text style={{
color: '#fff', fontWeight: 'bold',
alignSelf: 'center',
}}>
Fechar</Text>
</TouchableOpacity>
</View>
</Modal>
: <Progress.Bar progress={progress}
width={200}
color={'#A0D800'}
backgroundColor={'#ECECEC'}
borderColor={'transparent'}
height={10}
borderRadius={10}
style={{alignSelf: 'center'}}
bottom={20}
/>
}
<KeyboardAvoidingView style={{
flex: 2,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fff'
}}>
<ScrollView >
<View>
<TouchableOpacity>
<Card style={{ margin: 20, height: 450,
}}>
<Feather name={'file-text'}
color={'#F2CB1D'}
size={20}
style={{paddingLeft: 20,
top: 20,}}/>
<Text
style={{paddingLeft: 50}}>Task 59788</Text>
<Entypo name={'controller-record'}
style={{paddingLeft: 270, bottom: 14
}}
color={'#007ACC'}
size={10}
/>
<Text
style={{paddingLeft: 290, bottom: 30}}
>Active</Text>
<Text style={{fontSize: 12,
paddingLeft: 20, bottom: 15
}}>App corporativo OnlineTeam</Text>
<Text style={{
paddingLeft: 20, fontSize: 20,
bottom: 10}}>
Criar telas no Figma</Text>
<Text style={{
paddingLeft: 20,
fontSize: 12}}>
Original Estimate: 4h</Text>
<Text style={{
paddingLeft: 250,bottom: 17,
fontSize: 12}}>
Completed: 2h</Text>
<Text style={{textAlign: 'left',
bottom: 10, fontSize: 10,
paddingLeft: 55}}>
0%</Text>
<Progress.Bar progress={progress}
width={200}
color={'#A0D800'}
backgroundColor={'#ECECEC'}
borderColor={'transparent'}
height={10}
borderRadius={10}
style={{alignSelf: 'center'}}
bottom={20}
/>
<Text style={{textAlign: 'right',
fontSize: 10,bottom: 35,
paddingRight: 45}}>
100%</Text>
<View
style={{
borderBottomColor: '#ECECEC',
borderBottomWidth: 1,
alignSelf: 'center',
marginBottom: 20,
width: 300,
}}
/>
<Text style={{fontSize: 15, color: "#A0D800",
paddingLeft: 20, }}>
Detalhes da task</Text>
<Text style={{color: "#808080", alignContent: 'center',
padding: 15}}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vitae enim nisl.
Proin iaculis eu felis sed cursus. In facilisis eleifend nisl,
at efficitur diam placerat ut. Aliquam neque nulla, convallis
a eleifend eget, elementum ut quam. Aliquam gravida mauris
auctor, gravida nisi vel, lobortis tellus. Donec ac velit vulputate,
dictum neque vitae, tempus velit. Donec placerat in mauris vel porttitor.
Mauris viverra ante a suscipit gravida. Mauris fringilla erat felis, eu
facilisis erat laoreet ultrices.
</Text>
</Card>
</TouchableOpacity>
<TouchableOpacity style={{
borderRadius: 10,
alignItems: "center",
backgroundColor: "#A0D800",
height: 50, width: 50,marginLeft: 25
}}
onPress = { () => setLoaded(isLoaded)
}>
<Image
source={require('../../assets/images/play(1).png')}
style={{alignSelf: 'center',padding: 5,
marginTop: 15}}/>
</TouchableOpacity>
<TouchableOpacity style={{
backgroundColor: "#000000",
height: 50, width: 300,marginLeft: 20,
borderRadius: 10, alignSelf: 'flex-end',
bottom: 50, marginRight: 20
}}>
<Text style={{textAlign: 'center', color: '#fff',
fontSize: 16, fontWeight: 'bold', paddingTop: 10,
margin: 5
}}>
Pausar task
</Text>
<Image
source={require('../../assets/images/pause.png')}
style={{alignSelf: 'flex-start', marginRight: 15,
bottom: 25, marginLeft: 75}}/>
</TouchableOpacity>
</View>
</ScrollView>
</KeyboardAvoidingView>
</>
)
}
export default taskDetails;
CodePudding user response：
Not sure how this should work, but you should be able to debug your own program.
One thing I see is setLoaded(isLoaded), and that is doing nothing. You are setting the state with the old state, nothing will happen. Try setLoaded(!isLoaded) to make it toggle. If state does not change, no re-render will happen.
CodePudding user response：
and I was based on that logic
const [progress, setProgress] = useState(0);
const [isLoaded, setLoaded] = useState(false); 100
{
!isLoaded ?
<Progress.Bar progress = {progress} width={null} />
: null
}
<Progress.Bar progress = {progress} width={null} />
onLoadProgress={(nativeEvent) => setProgress(nativeEvent.progress)}
onLoadEnd ={() => setLoaded(true)}
CodePudding user response：
i was wondering how to add this in the logic of my code
import React, {useRef, useState, useEffect} from 'react';
import { Text, View, StyleSheet, Animated } from 'react-native';
import Constants from 'expo-constants';
function useInterval(callback, delay) {
const savedCallback = useRef();
// Remember the latest callback.
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
// Set up the interval.
useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
let id = setInterval(tick, delay);
return () => clearInterval(id);
}
}, [delay]);
}
const App = () => {
let animation = useRef(new Animated.Value(0));
const [progress, setProgress] = useState(0);
useInterval(() => {
if(progress < 100) {
setProgress(progress 5);
}
}, 1000);
useEffect(() => {
Animated.timing(animation.current, {
toValue: progress,
duration: 100
}).start();
},[progress])
const width = animation.current.interpolate({
inputRange: [0, 100],
outputRange: ["0%", "100%"],
extrapolate: "clamp"
})
return (
<View style={styles.container}>
<Text>
Loading…..
</Text>
<View style={styles.progressBar}>
<Animated.View style={[StyleSheet.absoluteFill], {backgroundColor: "#8BED4F", width }}/>
</View>
<Text>
{`${progress}%`}
</Text>
</View>
);
}
export default App;
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'Column',
justifyContent: 'center',
alignItems: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
progressBar: {
flexDirection: 'row',
height: 20,
width: '100%',
backgroundColor: 'white',
borderColor: '#000',
borderWidth: 2,
borderRadius: 5
}
});