react-native-tracking-gestures v0.1.1

react-native-tracking-gestures

:green_heart: Introduction

This is a library that gives you scrolling list indicator gestures, you can change the properties to fit your needs.

note for this to work well we need to declare scrolling list animation value <ScrollView onScroll = {Animated.event([{nativeEvent: {contentOffset: {x: _scrollX}}}] )} ... and onContentSizeChange={w => setWidthContent(w)} property, for more we can see below instructions

:atom: Live Demo

live example here

:ok_man: Getting Started

npm install --save react-native-tracking-gestures

:sassy_woman: Demo

:four_leaf_clover: Usage

Here is an example of using

import TrackingGestures from 'react-native-tracking-gestures';

const App = () => {
  const [widthContent, setWidthContent] = React.useState(0);
  let _scrollX = React.useRef(new Animated.Value(0)).current;
  // ...
  return(
    <View>
      <ScrollView
          onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: _scrollX } } }], { useNativeDriver: false })}
          horizontal={true}
          onContentSizeChange={w => setWidthContent(w)}
        > 
       // render list
      </ScrollView>
      <TrackingGestures
          widthContentReference={widthContent}
          animatedValue={_scrollX}
          width={30}
          isVisibleInSight={true}
          setOptions={{
            trackingStyle: {backgroundColor: "#dedede"},
            indicatorStyle: {backgroundColor: "#0899D7"}
          }}
          type="flexible"
       />
    </View>
   )
}

:star2: Props

:memo: Creators

• :four_leaf_clover: https://github.com/khanhbachnguyen

:dart: Issues

• issues here

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT