Merge pull request #508 from shoutem/feature/SEEXT-8053-Investigate-l…

…ineHeight-ratio-implementation-change

Feature/seext 8053 investigate line height ratio implementation change

index.js

@@ -1,10 +1,19 @@
 import { setDefaultThemeStyle } from './init';
-import getTheme, { defaultThemeVariables, dimensionRelativeToIphone } from './theme';
+import getTheme, {
+  defaultThemeVariables,
+  dimensionRelativeToIphone,
+  calculateLineHeight,
+} from './theme';
 
 setDefaultThemeStyle();
 
 // Theme
-export { getTheme, defaultThemeVariables, dimensionRelativeToIphone };
+export {
+  getTheme,
+  defaultThemeVariables,
+  dimensionRelativeToIphone,
+  calculateLineHeight,
+};
 
 // Components
 export { ActionSheet } from './components/ActionSheet';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "2.0.17",
+  "version": "2.0.18",
   "description": "Styleable set of components for React Native applications",
   "dependencies": {
     "@shoutem/animation": "~0.12.4",

theme.js

@@ -52,10 +52,16 @@ export function dimensionRelativeToIphone(dimension, actualRefVal = window.width
   return getSizeRelativeToReference(dimension, 375, actualRefVal);
 }
 
+// This function is deprecated and replaced with calculateLineHeight. 
+// It remains present here because of the backward compatibility. 
 export function formatLineHeight(fontSize) {
   // adds required padding to lineHeight to support
   // different alphabets (Kanji, Greek, etc.)
 
+  console.warn(
+    "formatLineHeight is deprecated and will be removed. Please use calculateLineHeight instead, it can simply be renamed as it takes the same argument and returns the same expected value, but more consistently across all fontSize."
+  );
+
   if (fontSize < 22) {
     // minimum lineHeight for different alphabets is 25
     return 25;
@@ -64,6 +70,10 @@ export function formatLineHeight(fontSize) {
   return (fontSize + 3);
 }
 
+export function calculateLineHeight(fontSize) {
+  return (fontSize * 1.5);
+}
+
 export const defaultThemeVariables = {
   featuredColor: '#659CEC',
   backgroundColor: '#f2f2f2',