diff --git a/App/Screens/Home/Home.tsx b/App/Screens/Home/Home.tsx index 94d111e1..971c3329 100644 --- a/App/Screens/Home/Home.tsx +++ b/App/Screens/Home/Home.tsx @@ -16,7 +16,7 @@ import { StackNavigationProp } from '@react-navigation/stack'; import React, { useContext, useEffect, useState } from 'react'; -import { ScrollView, StyleSheet, View } from 'react-native'; +import { ScrollView, StyleSheet, View, Dimensions } from 'react-native'; import { CigarettesBlock, Frequency, FrequencyContext } from '@shootismoke/ui'; import { scale } from 'react-native-size-matters'; @@ -63,6 +63,39 @@ function getCigarettesMargin(count: number): number { ); } +/* + * Calculates each cigarettes height using number of cigarettes + */ +function getCigarettesHeight(count: number): number { + return scale( + count <= THRESHOLD.FIRST + ? SIZES.BIG + : count <= THRESHOLD.SECOND + ? SIZES.MEDIUM + : count <= THRESHOLD.THIRD + ? SIZES.BIG + : count <= THRESHOLD.FOURTH + ? SIZES.MEDIUM + : SIZES.SMALL + ); +} + +/* + * Dynamically calculating max number of cigarettes + */ +function getDynamicMaxCigarettes(count: number): number { + const CIGARETTE_ASPECT_RATIO = 21 / 280; // taken from the @shootismoke/ui lib + const height = getCigarettesHeight(count); + const width = height * CIGARETTE_ASPECT_RATIO; + const margin = getCigarettesMargin(count); + const componentWidth = + Dimensions.get('window').width - + theme.withPadding.paddingHorizontal * 2; + // componentWidth * 2 because we want to show cigarettes in two rows + const r = Math.floor((componentWidth * 2) / (width + margin)); + return r; +} + const styles = StyleSheet.create({ cigarettes: { height: scale(SIZES.MEDIUM), @@ -148,18 +181,10 @@ export function Home(props: HomeProps): React.ReactElement {