react-native-awesome-slider

v2.6.1

Slider component written using Reanimated v2, high performance/fps, also be used for video/audio scrubber. For more information about how to use this package see README

Latest version published 17 days ago

License: MIT

NPM

GitHub

Package Health Score

78 / 100

security
No known security issues
popularity
Small
maintenance
Healthy
community
Sustainable

Explore Similar Packages

Security

No known security issues

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

All Versions

Version				Vulnerabilities	License Risk
2.6.1	\|	12/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
2.5.6	\|	10/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
2.5.3	\|	05/2024	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.4.0	\|	03/2022		0 C 0 H 0 M 0 L	0 H 0 M 0 L
0.1.18	\|	02/2022		0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

MIT

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Small

Weekly Downloads (7,302)

GitHub Stars: 287
Forks: 31
Contributors: 20

Direct Usage Popularity

The npm package react-native-awesome-slider receives a total of 7,302 downloads a week. As such, we scored react-native-awesome-slider popularity level to be Small.

Based on project statistics from the GitHub repository for the npm package react-native-awesome-slider, we found that it has been starred 287 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Sustainable

Readme.md: Yes
Contributing.md: No
Code of Conduct: No
Contributors: 20
Funding: No

With more than 10 contributors for the react-native-awesome-slider repository, this is possibly a sign for a growing and inviting community.

We found a way for you to contribute to the project! Looks like react-native-awesome-slider is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Healthy

Commit Frequency

Open Issues: 14
Open PR: 0
Last Release: 17 days ago
Last Commit: 2 months ago

Further analysis of the maintenance status of react-native-awesome-slider based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Healthy.

We found that react-native-awesome-slider demonstrates a positive version release cadence with at least one new version released in the past 3 months.

As a healthy sign for on-going project maintenance, we found that the GitHub repository had at least 1 pull request or issue interacted with by the community.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: >= 18.0.0

Age: 3 years
Dependencies: 0 Direct
Versions: 58
Install Size: 163 kB
Dist-tags: 1
# of Files: 45
Maintainers: 1
TS Typings: No

react-native-awesome-slider has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

React Native Awesome Slider

An awesome React Native Slider component powered by Reanimated v2 and react-native-gesture-handler.

🔗 Watch video

Installation

First you have to follow installation instructions of Reanimated v2 and react-native-gesture-handler

If you react-native-gesture-handler version >= 2:

yarn add react-native-awesome-slider

else:

yarn add react-native-awesome-slider@1

Example usage

Basic use:

import { useSharedValue } from 'react-native-reanimated';
import { Slider } from 'react-native-awesome-slider';

export const Example = () =&gt; {
  const progress = useSharedValue(30);
  const min = useSharedValue(0);
  const max = useSharedValue(100);
  return (
    
  );
};

Change slider theme color?

Use the Theme object.

> For more usage, please view Example.

Add pan haptic feedback?

You need add haptics feedback lib to you project.

Add onHapticFeedback callback to you slider component.

 {
    ReactNativeHapticFeedback.trigger('impactLight', {
      enableVibrateFallback: true,
      ignoreAndroidSystemSettings: false,
    });
  }}
/&gt;

Set haptic mode, if you open 'step' prop, you need set hapticMode=HapticModeEnum.STEP, otherwise set to hapticMode=HapticModeEnum.BOTH.
✅ Finish!

Why use this library?

Pure javascript slider implementations usually rely on react-native's gesture events which may inadvertently trigger 'swipe to go back' events as you pan the slider. ❌
Native sliders rely on state updates, which can cause performance issues. ❌

react-native-awesome-slider relies on reanimated's ShareValue ability to run code directly in the UIThread to enhance performance, and react-native-gesture-handle won't interfere with your swiping gestures. ✨

Features

100% written in TypeScript.
100% built upon react-native-reanimated and react-native-gesture-handler.
Supports Tap & Pan triggering.
Support for a discrete slider.
Support haptic feedback.
and more...

TODO list

~~Support step props~~
~~Optimize bubble & thumb~~
~~Rewrite using react-native-gesture-handler v2~~
~~Support marks props~~
Web Support

Configuration

The `` component has the following configuration properties:

Name	Type	Description	Required	Default Value
theme	object	The slider theme color	❌	{ // Color to fill the progress in the seekbar minimumTrackTintColor: string, // Color to fill the background in the seekbar maximumTrackTintColor: string, // Color to fill the cache in the seekbar cacheTrackTintColor: string, // Color to fill the bubble backgrouundColor disableMinTrackTintColor: string, // Disabled color to fill the progress in the seekbar bubbleBackgroundColor: string // Color to fill the heartbeat animation in the seekbar heartbeatColor: string }
style	ViewStyle		❌
borderColor	string	Color of the border of the slider, also you can use containerStyle .	❌	transparent
bubble	(number) => string	Get the current value of the slider as you slide it, and returns a string to be used inside the bubble.	❌	(number) => string
progress	Animated.SharedValue<number>	Current value of the slider	✅	0
cache	Animated.SharedValue<number>	Cache value of the slider	❌	0
minimumValue	Animated.SharedValue<number>	An Animated.SharedValue from react-native-reanimated library which is the minimum value of the slider.	✅	undefined
maximumValue	Animated.SharedValue<number>	An Animated.SharedValue from react-native-reanimated library which is the maximum value of the slider.	✅	undefined
onSlidingStart	() => void	Callback called when the sliding interaction starts	❌	undefined
onValueChange	(number) => void	Callback called when the slider value changes	❌	undefined
onSlidingComplete	(number) => void	Callback called when the sliding interaction stops. The updated slider value will be passed as argument	❌	undefined
renderBubble	() => React.ReactNode	A custom bubble component that will be rendered while sliding.	❌	See the <Bubble/> component
setBubbleText	(string) => void	This function will be called while sliding and can be used to update the text in a custom bubble component.	❌	current slider value
bubbleTranslateY	number	Value to pass to the container of the bubble as translateY	❌	7
renderThumb	() => React.ReactNode	Render custom thumb image. If you need to customize thumb, you also need to set the thumb width	❌	ReactNode
renderMark	({ index }: { index: number }) => React.ReactNode	Render custom mark element. If you need to customize mark, you also need to set the mark width	❌	ReactNode
thumbWidth	number	Thumb elements width	❌	15
disable	boolean	Disable user interaction with the slider	❌	false
disableTapEvent	boolean	Enable tap event change value. Defaults to `true`	❌	true
bubbleMaxWidth	number	The maximum width of the bubble component	❌	100
bubbleTextStyle	TextStyle	Bubble text style	❌
bubbleContainerStyle	ViewStyle	Bubble container text style	❌
isScrubbing	Animated.SharedValue<boolean>	callback slider is scrubbing status	❌	undefined
onTap	() => void	A callback for when the slider is tapped.(Useful for video-player scrubbing.)	❌	undefined
thumbScaleValue	Animated.SharedValue<number>	Control thumb’s transform-scale animation.	❌	undefined
sliderHeight	number	The height of the slider component	❌	30
containerStyle	ViewStyle	styles to be applied to the slider container component	❌	{ width: '100%', height: 5, borderRadius: 2, borderColor: borderColor, overflow: 'hidden', borderWidth: 1, backgroundColor: maximumTrackTintColor, },
panHitSlop	object	pan gesture hit slop	❌	`{ top: 8, left: 0, bottom: 8, right: 0,} `
step	number(integer)	Step value of the slider. The value should be between 0 and maximumValue - minimumValue)	❌	undefined
steps	number(integer)	Count of segmented sliders.	❌	undefined
snapToStep	boolean	Enables or disables step snapping	❌	true
markWidth	number	Step mark width, if you need custom mark style, you must be fix this width	❌	4
marksStyle	ViewStyle	Step mark style	❌	{width: {markWidth}, height: 4, backgroundColor: '#fff', position: 'absolute', top: 2}
onHapticFeedback	function	Haptic feedback callback	❌	undefined
hapticMode	enum	haptic feedback mode	❌	HapticModeEnum.NONE
panDirectionValue	enum	Current swipe direction	❌	undefined
disableTrackFollow	boolean	Disable track follow thumb.(Commonly used in video audio players)	❌	false
bubbleWidth	number	Bubble width, If you set this value, bubble positioning left & right will be clamp.	❌	0
activeOffsetX	number \| number[]	Range along X axis (in points) where fingers travels without activation of gesture. Moving outside of this range implies activation of gesture.	❌	undefined
activeOffsetY	number \| number[]	Range along Y axis (in points) where fingers travels without activation of gesture. Moving outside of this range implies activation of gesture.	❌	undefined
failOffsetX	number \| number[]	When the finger moves outside this range (in points) along X axis and gesture hasn't yet activated it will fail recognizing the gesture. Range can be given as an array or a single number	❌	undefined
failOffsetY	number \| number[]	When the finger moves outside this range (in points) along Y axis and gesture hasn't yet activated it will fail recognizing the gesture. Range can be given as an array or a single number	❌	undefined
heartbeat	boolean	When 'heartbeat' is set to true, the progress bar color will animate back and forth between its current color and the color specified for the heartbeat. useful for loading state	❌	undefined

FAQs

What is react-native-awesome-slider?

Slider component written using Reanimated v2, high performance/fps, also be used for video/audio scrubber. . Visit Snyk Advisor to see a full health score report for react-native-awesome-slider, including popularity, security, maintenance & community analysis.

Is react-native-awesome-slider popular?

The npm package react-native-awesome-slider receives a total of 7,302 weekly downloads. As such, react-native-awesome-slider popularity was classified as small. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is react-native-awesome-slider well maintained?

We found that react-native-awesome-slider demonstrated a healthy version release cadence and project activity. It has a community of 20 open source contributors collaborating on the project. See the full package health analysis to learn more about the package maintenance status.

Is react-native-awesome-slider safe to use?

The npm package react-native-awesome-slider was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 12 December-2024, at 16:48 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP