Git Product home page Git Product logo

react-native-reanimated-slider's Introduction

react-native-reanimated-slider

motivation

The slider from the react-native is not good for video/audio players. If you slide it while the player is playing the file, It will jump a lot between where the file is playing right now and where your finger is, producing very bad UX. this libray uses react-native-reanimated and react-native-gesture-handler to produce 60 fps animations and stops jumping the slider while sliding.

install

first install and link react-native-reanimated and react-native-gesture-handler and then install this packeage. they are installed by default in latest react-native.

yarn add react-native-reanimated-slider

if your are using [email protected] install version 1. version 1 is not supported anymore.

Usage and API reference

Main Slider

Ballon Component

Enjoy Sliding :)

react-native-reanimated-slider's People

Contributors

alex-lanclos avatar alikazemkhanloo avatar giautm avatar pvfarooq avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

react-native-reanimated-slider's Issues

Working example

Hi,

The gif you posted it seems really good, but I can't seem to make it work like that. We are still seeing lags.

Can you post an example on how to properly integrate this with react-native-video v5?

Can't find variable: Reanimated

Hello,

After installing the react-native-reanimated-slider and importing it to the screen is throwing a error

Can't find variable: Reanimated

React Native version : 0.63.2

Bug: crash on first load video

  • Excuse me, when I use example code, load video is crash, when I delete about height code, app is running, but ballon will disappear;

  • Delete code:

 this.height =cond(
      or(
        eq(this.gestureState, State.BEGAN),
        eq(this.gestureState, State.ACTIVE)
      ),
      // [this.runspring({ from: 0, toValue: 1 })],  *delete code
      cond(
        or(
          eq(this.gestureState, State.UNDETERMINED),
          eq(this.gestureState, State.END)
        ),
        [this.runspring({ from: 1, toValue: 0 })],
        this.spring_state.position
      )
    );
  • I hope you can work it out,thank you very much!!

Package versions

  • "react": "17.0.2",
  • "react-native": "^0.66.3",
  • "react-native-reanimated": "^2.2.4",
  • "react-native-gesture-handler": "1.10.3",

EXPO friendly?

This doesnt seem to be Expo friendly-- am i wrong?? Will use Expo's slider for now

how to update position?

I'm trying to update the min, cache, progress & max Animated.Valuevalues usingvalue.setValue()` but is not not working, any idea what i'm doing wrong? how it should be updated?

const totalTime = new Value(100);
const currentTime = new Value(10);

// On a external update, currentTime.setValue(25)

<Slider 
    ...
    max={totalTime}
    progress={currentTime}
/>

Thanks :D

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.