roko-group-buttons

Simple animated group button

Installation

``sh npm install roko-tab-indicator`

`Usage`

`js import { Animated, Dimensions, Image, StyleSheet, View } from 'react-native'; import React, { useCallback, useRef } from 'react'; import DummyList from './data/DummyList'; import { TabIndicator } from 'roko-tab-indicator';

const options = ['Kroni', 'eshte', 'djale i mire'];

const { width, height } = Dimensions.get('screen');

export default App;

App.displayName = 'App';

const styles = StyleSheet.create({ root: { flex: 1, alignItems: 'center', justifyContent: 'center', }, tabContainer: { padding: 16, position: 'absolute', top: 80, start: 16, }, backDrop: { backgroundColor: 'rgba(0,0,0, 0.3)', ...StyleSheet.absoluteFillObject, }, });

Contributing

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

License

MIT

---

Made with create-react-native-library

Usage

js
import { Animated, Dimensions, Image, StyleSheet, View } from 'react-native';
import React, { useCallback, useRef } from 'react';
import DummyList from './data/DummyList';
import { TabIndicator } from 'roko-tab-indicator';

const options = ['Kroni', 'eshte', 'djale i mire'];

const { width, height } = Dimensions.get('screen');

const App = ({}) => {
  // #region REFERENCES
  const scrollX = useRef(new Animated.Value(0)).current;
  const listRef = useRef | null>(null);
  // #endregion
  // #region FUNCTIONS
  const onItemPress = useCallback((index) => {
    listRef.current?.scrollToOffset({ offset: index * width, animated: true });
  }, []);
  // #endregion
  return (
    
              ref={listRef}
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { x: scrollX } } }],
          { useNativeDriver: false }
        )}
        pagingEnabled
        horizontal
        data={DummyList}
        renderItem={({ item }) => (
          
                          source={{ uri: item }}
              style={{ ...StyleSheet.absoluteFillObject }}
            />
            
          
        )}
      />
      
                  {...{
            options,
            onItemPress,
            scrollX,
            theme: {
              primary: 'rgba(0,0,0,0.8)',
              onPrimary: 'white',
              background: 'transparent',
              onBackground: 'black',
            },
          }}
        />
      
    
  );
};

export default App;

App.displayName = 'App';

const styles = StyleSheet.create({
  root: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  tabContainer: {
    padding: 16,
    position: 'absolute',
    top: 80,
    start: 16,
  },
  backDrop: {
    backgroundColor: 'rgba(0,0,0, 0.3)',
    ...StyleSheet.absoluteFillObject,
  },
});