@quintype/native-components 2.30.2-center-align-title-beta → 2.30.2-center-align-title-beta-2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.30.2-center-align-title-beta",
+  "version": "2.30.2-center-align-title-beta-2",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/components/Header/index.js

@@ -12,8 +12,8 @@ import { headerStyles } from "./styles";
 
 export const Header = (props) => {
   const { theme } = useContext(AppTheme);
-  const { noBorder, centerAlignLogo } = props || {};
-  const styles = headerStyles(theme, noBorder, centerAlignLogo);
+  const { noBorder, centerAlignLogo, customHeight } = props || {};
+  const styles = headerStyles(theme, noBorder, centerAlignLogo, customHeight);
   const headerStyle = StyleSheet.flatten([styles.header, props.style]);
   const logoComponentStyle = StyleSheet.flatten([
     styles.logoComponentStyle,
@@ -71,4 +71,5 @@ Header.propTypes = {
   logoComponentStyle: PropTypes.object,
   onPress: PropTypes.func,
   noBorder: PropTypes.bool,
+  customHeight: PropTypes.number,
 };

package/src/components/Header/styles.js

@@ -1,10 +1,10 @@
 import { StyleSheet } from 'react-native';
 
-export const headerStyles = (appThemeContext, noBorder, centerAlignLogo) => {
+export const headerStyles = (appThemeContext, noBorder, centerAlignLogo, customHeight) => {
   const { COLORS, DARK_MODE } = appThemeContext;
   const headerContainerStyles = {
     header: {
-      height: 48,
+      height: customHeight ?? 48,
       backgroundColor: DARK_MODE ? COLORS.MONO6 : COLORS.BRAND_WHITE,
       flexDirection: 'row',
       alignItems: 'center',

package/src/components/StoryHeader/index.js

@@ -105,10 +105,11 @@ export const StoryHeader = (props) => {
   };
 
   const getSectionName = (storyLayout = 'default') => {
-    const style = isHeadLinePriorityLayout ? styles.headlinePriority.sectionText : styles.sectionText
+    const style = isHeadLinePriorityLayout ? styles.headlinePriority.sectionText : styles.sectionText;
+    const centerAlignStyle = centerAlignStoryTitle? styles?.centerAlign: ''
     return <TouchableOpacity onPress={navigateToSection}>
       <Text
-        style={style}
+        style={[style, centerAlignStyle]}
         testID={COMP_CONTENT_CONSTANTS.sectionName}
       >
         {sectionData['display-name'] || ''}

package/src/components/StoryHeader/styles.js

@@ -60,5 +60,8 @@ export const storyHeaderStyles = (COLORS, FONT_FAMILY) => StyleSheet.create({
       fontFamily: FONT_FAMILY.secondary,
       fontWeight: "bold",
     },
+  },
+  centerAlign: {
+    textAlign: 'center'
   }
 });