A simple component that dynamically renders as many children as will fit, along with an overflow button if needed.

Installation

yarn add react-native-overflow

Usage

• BYOB (Bring Your Own Button)
• supports flex direction column and row

import Overflow from "react-native-overflow";

// ...

<Overflow
  maxVisible={3}
  style={styles.toolbarRight}
  OverflowButton={<MyButton text="..." onPress={showOverflowMenu} />}
>
  <MyButton text="Share" onPress={onShare} />
  <MyButton text="Files" onPress ={onFiles} />
  <MyButton text="Explore" onPress={onExplore} />
  <MyButton text="Options" onPress={onOptions} />
</Overflow>

Compatibility

| Target | Requirements | Reason | |--------|--------------| ------ | | React Native | >0.78 + new arch | Synchronous layout measurement | | Expo | >SDK 52 | New Arch enabled | | Expo Go | >SDK 53 | New Arch enabled | | Web | react-native-web | Needs <View /> |

Enhanced web compatibility could be added in the future (PRs welcome).

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