README

react-native-hexagon-list

@computools/react-native-list-hexagon

Installation

npm install @computools/react-native-list-hexagon

Usage

import { HexagonList } from '@computools/react-native-list-hexagon';

// ...

export const App = () => (
  <View style={styles.container}>
    <HexagonList
      cardWidth={230}
      listHeight={190}
      angle={0.345}
      spaceBetween={0.3}
      perspective={1.5}
      ratioAreaToCard={2}
    >
      <View style={styles.itemContainer}>
        <Text style={styles.itemTitle}>Test title 1</Text>
      </View>
      <View style={styles.itemContainer}>
        <Text style={styles.itemTitle}>Test title 2</Text>
      </View>
      <View style={styles.itemContainer}>
        <Text style={styles.itemTitle}>Test title 3</Text>
      </View>
    </HexagonList>
  </View>
);

const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
  },
  itemContainer: {
    flex: 1,
    padding: 10,
  },
  itemTitle: {
    fontSize: 22,
  },
});

Properties

`cardWidth?: number`

Optional: item width

`listHeight?: number`

Optional: list height

`angle?: number`

Optional: angle for side elements

`spaceBetween?: number`

Optional: space between items

`perspective?: number`

Optional: perspective koev for side elements

`koevAreaToCard?: number`

Optional: koev list area to card

Example

Snapshot

Contributing

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

License

MIT

Usage no npm install needed!