README
react-native-hexagon-list
react-native-list-hexagon
Installation
npm install react-native-list-hexagon
Usage
import { HexagonList } from '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
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT