react-native-tracking-gestures

💚 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

Live Demo

live example here

🙆‍♂️ Getting Started

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

💁‍♀️ Demo

🍀 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>
   )
}

🌟 Props

Property	Type	Require	Default	Description
setOptions	setOptions			if you want to change indicator height, that in like this trackingStyle: {height:5}, the same goes for borderRadius
animatedValue	Animated.Value	✅
width	number		30	width of indicator
widthContentReference	number	✅		width directive reference content
isVisibleInSight	boolean		false	visible or hidden directive when content is less than device width
type	flexible, classic		classic	classic indicator bar always half overflow, flexible indicator will change according to content
hidden	boolean		false	visibility or hidden indicator

📝 Creators

• 🍀 https://github.com/khanhbachnguyen

🎯 Issues

• issues here

Contributing

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

License

MIT