So I want to implement a progress bar like this in react native. I have found a library which is https://www.npmjs.com/package/react-native-progress, but this library does not have a progress bar like this. The issue is the circle part. Is there a library which has a progress bar like this one? If there isn't, then any idea on how to implement this would be appreciated. So as a fellow commenter got confused whether it is a slider or progress bar, I will include the full screen image. There is a timer and the progress bar or progress slider reflects that in real time.
We can still exploit react-native-community/slider for this purpose. This would make sense since we can allow the user to fast forward. If you do not want allow user interaction, you can still disable it via the slider component props.
For a smooth sliding, the slider changes its value at a higher tick rate. You might want to experiment with it a little bit to make it fit your needs.
Here is an example on how I did it.
const [progress, setProgress] = useState(-1)
// takes time in seconds
function interpolate(time) {
return time * 600
}
// runs 10 seconds, you can take any other value
const [time, setTime] = useState(interpolate(10))
useEffect(() => {
if (progress < time && progress > -1) {
const timer = setTimeout(() => setProgress(progress + 10), 10)
return () => clearTimeout(timer)
}
}, [progress, time])
const startTimer = React.useCallback(() => {
setProgress(0)
}, [])
return (
<SafeAreaView style={{ margin: 30 }}>
<Slider
style={{ width: 300, height: 40, backgroundColor: "red" }}
value={progress}
minimumValue={0}
maximumValue={time}
minimumTrackTintColor="#FFFFFF"
maximumTrackTintColor="#FFFFFF"
/>
<Pressable style={{ marginTop: 10 }} onPress={() => startTimer()}>
<Text>Toggle timer</Text>
</Pressable>
</SafeAreaView>
)
The above is a dummy implementation which will run a timer for 10 seconds and the slider will move automatically like a progress bar.
Related
So I have a mui slider on my map that changes the year of display data for a specific Layer. However my Mui slider is not "draggable" it only lets me move one step at a time then stops and I have to let go of the slider and then redrag it. Clicking around on it works fine. When setYear changes it runs a function in usememo that changes the layer. I suspect this might be the problem but have can I avoid it?
const handleTimeChange = (event, newValue) => {
if (newValue !== year) {
setYear(newValue);
}
};
<Slider
getAriaLabel={() => "Date range"}
value={year}
onChange={handleTimeChange}
valueLabelDisplay="auto"
sx={{ width: "200px", ml: "20px" }}
max={2020}
min={min}
align="center"
/>
I'm trying to just make 20 - 50 stars "twinkle" (opacity change with random interval), but it's slowing the app to a crawl.
I'm using reanimated 2.2.0.
I tried sharing the opacity value but only 1 element had the styles applied, which I think may be because of this: "Animated styles cannot be shared between views."
This is my entire component
function TwinklingStar({ position, size }) {
const starOpacity = useSharedValue(1);
useEffect(() => {
setInterval(() => {
starOpacity.value = withSpring(starOpacity.value ? 0 : 1)
}, getRandomInt(500, 1000))
}, []);
const twinkling = useAnimatedStyle(() => ({
opacity: starOpacity.value
}));
return (
<Animated.Image
source={sparkleImage}
resizeMode="cover"
style={[{
width: size,
height: size,
position: 'absolute',
top: position.y,
left: position.x
}, twinkling]}
/>
)
}
There are perhaps 5 of them per card, and a random amount of cards, 5-20 lets say.
I've read over the docs but don't think I'm understanding them properly cause I cant figure out why app is crawling/freezing/crashing. It's like all the animations are blocking the js thread, but they should be running on ui thread since the opacity changes are "captured" by the useAnimatedStyle hook which is a "worklet"?
Confused...
I have a HTML5 Video panel in my app. I managed to make a progressbar which is working perfectly. But I also want to ability to change currentTime of the video by clicking to any position on progressbar.
How can I get current position as ratio using React? I searched progressbar components on google but it seems none of them give value of clicked position but just display.
Or simply, when user clicks on different position of the progressbar, I want to change/get value of progressbar to that position.
Update:
I have updated demo and it seems progressbar gone crazy when click multiple times and it seems not close to the clicked position either.
Demo: https://stackblitz.com/edit/react-ts-zudlbe?file=index.tsx
This is the whole component I tested it on.
Seems to work
const ProgressBar = ({ duration, progress }: ProgressProps) => {
return (
<div
onClick={(event: React.MouseEvent<HTMLDivElement>) => {
// duration is the video duration. For example 152.
// How can i catch the % (ratio) of clicked position of this progrssbar?
// then I will send this % (lets say 5) to the seek function like:
const x = (event.clientX * duration) / event.currentTarget.offsetWidth; // how to get sec?
callback(x);
}}
style={{
backgroundColor: "#ddd",
borderRadius: 3,
flex: 1,
height: 6,
overflow: "hidden",
position: "relative"
}}
>
<Progress progress={progress} />
</div>
);
};
here is my sample code
in the browser i want to scroll down the page the the navbar will say what color i am showing.
<div style={{height: "800px"}}>
<h2 style={{backgroundColor: `${nav}`,
position: "fixed",
width: "100%"
}}
>
NaveBar {nav ? "red" : "blue"}!
</h2>
</div>
it's somewhat not changing the name of the title and color also.i just dun know where is the problem.
can somebody help me on this please?
You initialized the state with a string useState("red");
and then you update the state to an object with setNav({ back });
To solve this just change it to setNav(back)
By the way - listening to scroll-events can be laggy, so you might want to "throttle" the event.
import throttle from lodash or just copy paste this function:
https://gist.github.com/abhinavnigam2207/a147abe0213d60467abacd33db7c6d2e
Then you use it by wrapping your function into it, like this:
useEffect(() => {
window.addEventListener(
"scroll",
throttle(() => {
const back = window.scrollY < 70 ? "red" : "blue";
setNav(back);
}, 100)
);
});
I'm trying to have a Snapchat story-like feature where an array of pictures is displayed for a set period of seconds and than go back to the previous navigation.
Something like the following:
if (props.length > 0) {
let timeout;
if (props.length - 1 === index) {
clearTimeout(timeout)
navigation.goBack()
}
if (props[index].image) {
timeout = setTimeout(() => {
setIndex(index + 1)
}, 3000)
return <Image source={{ uri: props[index].image }} style={{ flex: 1 }} />
}
}
But, this is showing unpredictable results.
You might wanna use setInterval instead. eg. in codesandbox here