library used react-native progress
for making an progress bar
import * as Progress from 'react-native-progress';
<Progress.Bar progress={0.3} width={200} />
use this library react-native progress
initial value set to 0
const [progressBarValue, setProgressBarValue] = useState(0)
useEffect(() => {
const intervalId = setInterval(() => {
setProgressBarValue((prev) => {
if (prev >= 1.2) {
setCongratulations('Congratulations')
clearInterval(intervalId);
return 1.120;
} else {
return prev + 0.01;
}
});
}, 1000);
return () => clearInterval(intervalId);
}, []);
render code
<Progress.Bar progress={progressBarValue} width={width-50} color={'rgba(221,196,145, 1)'}/>
Related
I have an implementation for autoscrolling through FlatList by index. When the index is greater than 40-45 the autoscrolling doesn't work. On 1-39 indexes - autoscroll works good.
Btw: when I tried to make scroll on press the same behavior, only indexes up to 39 work.
My part of the code:
const [dataUpdated, setDataUpdated] = useState(false);
const [itemIn, setItemIn] = useState(-1);
useEffect(() => {
if (selectedItem.id.length > 0) {
setItemIn(items.map(object => object.itemId).indexOf(selectedItem.id));
} else {
setItemIn(0);
}
}, [items, selectedItem.id]);
const listRef = useRef<FlatList>(null);
useEffect(() => {
let screenListener = true;
setTimeout(() => {
if (itemIn >= 0 && screenListener) {
setDataUpdated(!dataUpdated);
listRef?.current?.scrollToIndex({
animated: true,
index: itemIn,
});
}
}, 500);
return () => {
screenListener = false;
};
}, [dataUpdated, itemIn]);
<ItemsList
data={items}
onItemPressed={onItemPressed}
selectedItem={selectedItem}
setSelectedItem={setSelectedItem}
refIt={listRef}
onScrollToIndexFailed={() => {}}
extraData={dataUpdated}
/>
I found the way to do it - FlashList from Shopify perfectly handles such scoll
When using the RNSound library, I ran into a problem - I can't pause the sound.
initialize :
Sound.setCategory("Playback");
let whoosh = new Sound("complite.mp3", Sound.MAIN_BUNDLE, (error) => {
if (error) {
console.log("failed to load the sound", error);
return;
}
})
and use like this:
<Button
onPress={() => {
if (!start) {
whoosh.play();
const myTimer = setInterval(() => {
setCounter((counter) => counter - 1);
}, 1000);
setTimer(myTimer);
setStart((start) => !start);
} else {
whoosh.pause();
clearInterval(timer);
setCounter(null);
setStart((start) => !start);
}
}}
the first time the button is pressed, the sound is played. On the second press, nothing happens and music is playing. On the third press, the same melody runs in parallel for the second time. As far as I understand, each time I click on the button, I refer to a new instance of Sound. Help with a solution please.
p.s. - i need solution with functional component, not a class. Thanks.
Declare the Sound instance outside of your component scope. You don't need to create a new instance of Sound everytime. Refer my sample.
Sound.setCategory('Playback');
var whoosh = new Sound('beep.mp3', Sound.MAIN_BUNDLE, error => {
if (error) {
console.log('failed to load the sound', error);
return;
}
// loaded successfully
console.log(
'duration in seconds: ' +
whoosh.getDuration() +
'number of channels: ' +
whoosh.getNumberOfChannels(),
);
});
const App: () => Node = () => {
const [start, setStart] = useState(false);
const [counter, setCounter] = useState(0);
const [timer, setTimer] = useState(null);
return (
<Button
onPress={() => {
if (!start) {
whoosh.play();
const myTimer = setInterval(() => {
setCounter(counter => counter - 1);
}, 1000);
setTimer(myTimer);
setStart(start => !start);
} else {
whoosh.pause();
clearInterval(timer);
setCounter(null);
setStart(start => !start);
}
}}
title="Click me"
/>
);
};
Let me know how it goes.
I'm using react-native-sound library to play audio in my app. I would like to add option to control speed time of listening.
in my AudioPlayer component I have:
const [music, setMusic] = useState(null)
const [isPlaying, setPlaying] = useState(false)
const [duration, setDuration] = useState(0)
const [currentTime, setCurrentTime] = useState(0)
useEffect(() => {
const audio = new Sound(decodeURI(props.track.url), null, (err) => {
if (err) {
return
}
})
Sound.setActive(true)
Sound.setCategory('Playback', true)
Sound.setMode('Default')
setMusic(audio)
return function cleanup() {
Sound.setActive(false)
audio.release()
}
}, [props.track])
useEffect(() => {
const interval = setInterval(() => {
if (music && duration <= 0) {
setDuration(music.getDuration())
}
if (music && isPlaying) {
music.getCurrentTime((seconds: number) => {
setCurrentTime(seconds)
})
}
}, 100)
return () => clearInterval(interval)
})
const onPlayPausePress = async () => {
if (music.isPlaying()) {
music.pause()
setPlaying(false)
} else {
music.play(success => {
setPlaying(false)
// setCurrentTime(0)
// music.setCurrentTime((0))
})
setPlaying(true)
}
}
const manageSpeedTime = (speed) => {
if (music.isPlaying()) {
music.pause()
setPlaying(false)
music.setSpeed(speed)
music.getCurrentTime((seconds: number) => {
setCurrentTime(seconds)
})
music.setCurrentTime(currentTime)
await music.play(success => {
setPlaying(false)
})
setPlaying(true)
}
}
And later in my code:
<Slider
style={{ width: '55%', height: 40}}
minimumValue={0}
maximumValue={duration}
minimumTrackTintColor={props.audioStylesProps.sliderRunColor}
maximumTrackTintColor={props.audioStylesProps.sliderStartColor}
thumbTintColor={props.audioStylesProps.sliderCircleColor}
value={currentTime}
onValueChange={onSliderChange}
/>
<View style={{flexDirection: "column"}}>
<Button title={"1x"} onPress={() => {manageSpeedTime(1)}} color={"red"}/>
<Button title={"1.25x"} onPress={() => {manageSpeedTime(1.25)}} color={"red"}/>
<Button title={"2x"} onPress={() => {manageSpeedTime(2)}} color={"red"}/>
</View>
My problem is, when I speed time x2 it works fine, but when I want come back to normal speed, I got delay. For example, Im listening with x2 speed and at 40seconds I change speed to 1x, instead of starting from 40sec, my slider goes back to around 34-36 seconds and starts playing music at 40. My idea was to stop music when I change speed time, set speed, set current time and start playing, but looks like music.seetCurrentTime(currentTime) in manageSpeedTime doesn't work. Could somebody help my with solving this issue?
I have an app that starts an interval when a button is pressed.
I want to stop the interval after a state reaches 5.
I have tried adding the if condition in UseEffect, and tried putting the condition within the function itself, but both don't seem to work. The console.log(sequence) does print successfully in useEffect I can see that the sequence does indeed increase, but it keeps increasing beyond 5 and never clearInterval.
const [sequence, setSequence] = useState(0)
const interval = () =>{
setInterval(() => {
setSequence((prevSequence) => (
prevSequence+1
))
}, 2000);
}
const plant = ()=>{
interval()
console.log(sequence)
if(sequence>5){
clearInterval (interval)
}
}
useEffect(() => {
console.log(sequence)
if(sequence>5){
return () => clearInterval(interval);
}
}, [sequence]);
return(
<View style = {styles.container} >
<Image
style={{height:500,width:300,}}
source= {tomato[sequence]}
/>
<Button
title = 'Fertilize Plant'
style= {styles.text}
onPress= {plant}>
</Button>
</View>)
}
Issue
You are not clearing the interval correctly.
const interval = () => {
setInterval(() => {
setSequence((prevSequence) => prevSequence + 1)
}, 2000);
};
...
useEffect(() => {
console.log(sequence);
if (sequence > 5) {
return () => clearInterval(interval);
}
}, [sequence]);
Here interval is a reference to the function, not the actual interval timer id returned from setInterval.
Solution
Store the interval timer id in a React ref to be referenced around the component.
const intervalRef = useRef();
const interval = () => {
intervalRef.current = setInterval(() => {
setSequence((prevSequence) => prevSequence + 1)
}, 2000);
};
...
useEffect(() => {
const intervalId = intervalRef.current;
// also clear on component unmount
return () => clearInterval(intervalId);
}, []);
useEffect(() => {
if (sequence > 5) {
clearInterval(intervalRef.current);
}
}, [sequence]);
Also, there's no need to check the sequence value and clear the interval in the plant callback, the useEffect hook with dependency on sequence will handle that. Plant only needs to start the interval.
const plant = () => {
interval();
};
You can use the clearInterval function to stop the interval you had set.
Here is an example;
let counter = 0;
const interval = setInterval(() => {
counter++;
console.log(`Counter = ${counter}`);
if (counter >= 3) {
console.log("Interval Stopped");
clearInterval(interval);
}
}, 1000);
I want to countdown from 3 to 1 when a screen is loaded in react-native. I tried it with setTimeOut like this and it didn't work. What am I doing wrong here? How can I achieve this? When the screen is loaded, I want to show 3 =-> 2 ==> 1 with 1 second interval. Here is my code.
constructor(props) {
super(props);
this.state = {
timer: 3
}
}
// componentDidMount
componentDidMount() {
setTimeout(() => {
this.setState({
timer: --this.state.timer
})
}, 1000);
}
In your code setTimeout is called in componentDidMount and ComponetDidMount will be called once in whole component lifeCycle. So, the function within setTimeout will be called once only. i.e. just after the first render but upon successive render, the componentDidMount won't be called.
Solution to your problem can be:
1. Class Component
constructor(props: Object) {
super(props);
this.state ={ timer: 3}
}
componentDidMount(){
this.interval = setInterval(
() => this.setState((prevState)=> ({ timer: prevState.timer - 1 })),
1000
);
}
componentDidUpdate(){
if(this.state.timer === 1){
clearInterval(this.interval);
}
}
componentWillUnmount(){
clearInterval(this.interval);
}
render() {
return (
<View style={{ flex: 1, justifyContent: 'center', }}>
<Text> {this.state.timer} </Text>
</View>
)
}
'setInterval' vs 'setTimeout'
Advantage of using a function in setState instead of an object
memory leak because of setInterval:
if we unmount the component before clearInterval called, there is a memory leak because the interval that is set when we start and the timer is not stopped. React provides the componentWillUnmount lifecycle method as an opportunity to clear anything that needs to be cleared when the component is unmounted or removed.
2. Functional Component
function CountDownTimer(props) {
const [time, setTime] = React.useState(props.initialValue || 10);
const timerRef = React.useRef(time);
React.useEffect(() => {
const timerId = setInterval(() => {
timerRef.current -= 1;
if (timerRef.current < 0) {
clearInterval(timerId);
} else {
setTime(timerRef.current);
}
}, 1000);
return () => {
clearInterval(timerId);
};
}, []);
return (
<View style={{ flex: 1, justifyContent: 'center' }}>
<Text> {time} </Text>
</View>
)
}
useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue). The returned object will persist for the full lifetime of the component. So on component rerender the object reference will be same.
Answers given by #TheEhsanSarshar and #Rishabh Jain will also work. I have shown a slightly different solution from the others.
Updated Hooks (using useEffect) version to countdown using setInterval in react-native:
const [timerCount, setTimer] = useState(60)
useEffect(() => {
let interval = setInterval(() => {
setTimer(lastTimerCount => {
lastTimerCount <= 1 && clearInterval(interval)
return lastTimerCount - 1
})
}, 1000) //each count lasts for a second
//cleanup the interval on complete
return () => clearInterval(interval)
}, []);
use the state variable timerCount as: <Text>{timerCount}</Text>
Usage:
timestamp prop must be in seconds
const refTimer = useRef();
const timerCallbackFunc = timerFlag => {
// Setting timer flag to finished
console.warn(
'You can alert the user by letting him know that Timer is out.',
);
};
<Timer
ref={refTimer}
timestamp={moment(item?.time_left).diff(moment(), 'seconds')}
timerCallback={timerCallbackFunc}
textStyle={styles.timerTextAHL}
/>
Timer.js
import React, {
useState,
useEffect,
useRef,
forwardRef,
useImperativeHandle,
} from 'react';
import { Text, View } from 'react-native';
const Timer = forwardRef((props, ref) => {
// For Total seconds
const [timeStamp, setTimeStamp] = useState(
props.timestamp ? props.timestamp : 0,
);
// Delay Required
const [delay, setDelay] = useState(props.delay ? props.delay : 1000);
// Flag for informing parent component when timer is over
const [sendOnce, setSendOnce] = useState(true);
// Flag for final display time format
const [finalDisplayTime, setFinalDisplayTime] = useState('');
useInterval(() => {
if (timeStamp > 0) {
setTimeStamp(timeStamp - 1);
} else if (sendOnce) {
if (props.timerCallback) {
props.timerCallback(true);
} else {
console.log('Please pass a callback function...');
}
setSendOnce(false);
}
setFinalDisplayTime(secondsToDhms(timeStamp));
}, delay);
function secondsToDhms(seconds) {
seconds = Number(seconds);
var d = Math.floor(seconds / (3600 * 24));
var h = Math.floor((seconds % (3600 * 24)) / 3600);
var m = Math.floor((seconds % 3600) / 60);
var s = Math.floor(seconds % 60);
var dDisplay = d > 0 ? d + 'd ' : '';
var hDisplay = h > 0 ? h + 'h ' : '';
var mDisplay = m > 0 ? m + 'm ' : '';
var sDisplay = s > 0 ? s + 's ' : '';
return dDisplay + hDisplay + mDisplay + sDisplay;
}
const refTimer = useRef();
useImperativeHandle(ref, () => ({
resetTimer: () => {
// Clearing days, hours, minutes and seconds
// Clearing Timestamp
setTimeStamp(props.timestamp);
setSendOnce(true);
},
}));
return (
<View ref={refTimer} style={props.containerStyle}>
<Text style={props.textStyle}>{sendOnce ? finalDisplayTime : '0'}</Text>
</View>
);
});
function useInterval(callback, delay) {
const savedCallback = useRef();
// Remember the latest function.
useEffect(() => {
savedCallback.current = callback;
}, [callback]);
// Set up the interval.
useEffect(() => {
function tick() {
savedCallback.current();
}
if (delay !== null) {
const id = setInterval(tick, delay);
return () => {
clearInterval(id);
};
}
}, [delay]);
}
export default Timer;
The hooks version.
function CountDown() {
const [count, setCount] = useState(3)
useEffect(() =>
let interval = setInterVal(() => {
setCount(prev => {
if(prev === 1) clearInterval(interval)
return prev - 1
})
})
// interval cleanup on component unmount
return () => clearInterval(interval)
), [])
return <Text>{count}</Text>
}
If anyone wants to start the timer again on a button press, this will be the code in react-hooks:
let timer = () => {};
const myTimer = () => {
const [timeLeft, setTimeLeft] = useState(30);
const startTimer = () => {
timer = setTimeout(() => {
if(timeLeft <= 0){
clearTimeout(timer);
return false;
}
setTimeLeft(timeLeft-1);
}, 1000)
}
useEffect(() => {
startTimer();
return () => clearTimeout(timer);
});
const start = () => {
setTimeLeft(30);
clearTimeout(timer);
startTimer();
}
return (
<View style={styles.container}>
<Text style={styles.timer}>{timeLeft}</Text>
<Button onPress={start} title="Press"/>
</View>
)}
Here in this example, I have taken a timer of 30 seconds
Code Of Power
Hope so this Way is Easy
componentDidMount() {
this.CounterInterval()
}
CounterInterval = () => {
this.interval = setInterval(
() => this.setState({
timer: this.state.timer - 1
}, () => {
if (this.state.timer === 0) {
clearInterval(this.interval);
}
}),
1000
);
}