react-native-overflow-row

A React Native component that displays items in a row with overflow indicator(+n)

Example

with 250px width	with 350px width

Installation

npm install react-native-overflow-row

OR

yarn add react-native-overflow-row

Usage

import RowWithOverflow from 'react-native-overflow-row';

const App: React.FC = () => {
  const items = Array.from({ length: 10 }, (_, i) => `Item ${i + 1}`);

  const renderItem = (item: string) => (
    <View style={styles.item}>
      <Text style={styles.itemText}>{item}</Text>
    </View>
  );

  const renderOverflowIndicator = (remainingCount: number) => (
    <View style={styles.item}>
      <Text style={styles.itemText}>+{remainingCount}</Text>
    </View>
  );

  return (
    <View style={styles.container}>
      <RowWithOverflow
        items={items}
        renderItem={renderItem}
        renderOverflowIndicator={renderOverflowIndicator}
        rowWidth={150}
        rowContainerStyles={styles.rowContainerStyles}
      />
    </View>
  );
};

Props

Name	Type	Default	Description
items	T[]		Array of items to be displayed in the row.
renderItem	(item: T) => React.ReactNode		Function to render each item.
renderOverflowIndicator	(remainingCount: number) => React.ReactNode		Function to render the overflow indicator.
rowWidth	number	250	Width of the row container in px.
rowContainerStyles	StyleProp<ViewStyle>		Custom styles for the row container.

Contributing

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

License

MIT