REF: Header

BlueComponents.js

@@ -1,7 +1,7 @@
 /* eslint react/prop-types: "off", react-native/no-inline-styles: "off" */
 import React, { Component, forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import { Icon, Text, Header } from 'react-native-elements';
+import { Icon, Text } from 'react-native-elements';
 import {
   ActivityIndicator,
   Dimensions,
@@ -20,7 +20,6 @@ import NetworkTransactionFees, { NetworkTransactionFee, NetworkTransactionFeeTyp
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { BlueCurrentTheme, useTheme } from './components/themes';
 import loc, { formatStringAddTwoWhiteSpaces } from './loc';
-import SafeArea from './components/SafeArea';
 
 const { height, width } = Dimensions.get('window');
 const aspectRatio = height / width;
@@ -118,36 +117,6 @@ export const BlueFormMultiInput = props => {
   );
 };
 
-export const BlueHeaderDefaultSub = props => {
-  const { colors } = useTheme();
-
-  return (
-    <SafeArea>
-      <Header
-        backgroundColor={colors.background}
-        leftContainerStyle={{ minWidth: '100%' }}
-        outerContainerStyles={{
-          borderBottomColor: 'transparent',
-          borderBottomWidth: 0,
-        }}
-        leftComponent={
-          <Text
-            adjustsFontSizeToFit
-            style={{
-              fontWeight: 'bold',
-              fontSize: 30,
-              color: colors.foregroundColor,
-            }}
-          >
-            {props.leftText}
-          </Text>
-        }
-        {...props}
-      />
-    </SafeArea>
-  );
-};
-
 export const BlueSpacing = props => {
   return <View {...props} style={{ height: 60 }} />;
 };

screen/settings/Settings.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { ScrollView, StyleSheet, Platform } from 'react-native';
-import { BlueHeaderDefaultSub } from '../../BlueComponents';
 import loc from '../../loc';
 import ListItem from '../../components/ListItem';
 import { useExtendedNavigation } from '../../hooks/useExtendedNavigation';
 import { useSettings } from '../../components/Context/SettingsContext';
+import { Header } from '../../components/Header';
 
 const styles = StyleSheet.create({
   root: {
@@ -31,7 +31,7 @@ const Settings = () => {
       contentInsetAdjustmentBehavior="automatic"
       automaticallyAdjustContentInsets
     >
-      {Platform.OS === 'android' ? <BlueHeaderDefaultSub leftText={loc.settings.header} /> : <></>}
+      {Platform.OS === 'android' ? <Header leftText={loc.settings.header} /> : <></>}
       <ListItem title={loc.settings.general} onPress={() => navigate('GeneralSettings')} testID="GeneralSettings" chevron />
       <ListItem title={loc.settings.currency} onPress={() => navigate('Currency')} testID="Currency" chevron />
       <ListItem title={loc.settings.language} onPress={() => navigate('Language')} testID="Language" chevron />

tests/integration/App.test.js

@@ -3,7 +3,7 @@ import React from 'react';
 import TestRenderer from 'react-test-renderer';
 import Settings from '../../screen/settings/Settings';
 import Selftest from '../../screen/selftest';
-import { BlueHeaderDefaultSub } from '../../BlueComponents';
+import { Header } from '../../components/Header';
 
 jest.mock('../../blue_modules/BlueElectrum', () => {
   return {
@@ -11,8 +11,8 @@ jest.mock('../../blue_modules/BlueElectrum', () => {
   };
 });
 
-it('BlueHeaderDefaultSub works', () => {
-  const rendered = TestRenderer.create(<BlueHeaderDefaultSub />).toJSON();
+it('Header works', () => {
+  const rendered = TestRenderer.create(<Header />).toJSON();
   expect(rendered).toBeTruthy();
 });