REF: Updated navigation headers to better match design

BlueComponents.js

@@ -146,6 +146,24 @@ export class BlueButtonLink extends Component {
   }
 }
 
+export const BlueNavigationStyle = (navigation, withNavigationCloseButton = false) => ({
+  headerStyle: {
+    backgroundColor: '#FFFFFF',
+    borderBottomWidth: 0,
+  },
+  headerTitleStyle: {
+    fontWeight: '600',
+    color: '#0c2550',
+  },
+  headerTintColor: '#0c2550',
+  headerRight: withNavigationCloseButton ? (
+    <TouchableOpacity style={{ marginHorizontal: 16 }} onPress={() => navigation.goBack(null)}>
+      <Icon name="times" size={24} type="font-awesome" color="#0c2550" />
+    </TouchableOpacity>
+  ) : null,
+  headerBackTitle: null,
+});
+
 export const BlueCopyToClipboardButton = ({ stringToCopy }) => {
   return (
     <TouchableOpacity {...this.props} onPress={() => Clipboard.setString(stringToCopy)}>

MainBottomTabs.js

@@ -33,6 +33,18 @@ const WalletsStackNavigator = createStackNavigator({
     screen: WalletsList,
     path: 'wallets',
   },
+  WalletTransactions: {
+    screen: WalletTransactions,
+  },
+  TransactionDetails: {
+    screen: details,
+  },
+  RBF: {
+    screen: rbf,
+  },
+  CreateRBF: {
+    screen: createrbf,
+  },
   Settings: {
     screen: Settings,
     path: 'Settings',
@@ -58,15 +70,6 @@ const WalletsStackNavigator = createStackNavigator({
   },
 });
 
-const SuccessTransactionStackNavigation = createStackNavigator(
-  {
-    Success: {
-      screen: Success,
-    },
-  },
-  { mode: 'modal', headerMode: 'none' },
-);
-
 const CreateTransactionStackNavigator = createStackNavigator({
   SendDetails: {
     screen: sendDetails,
@@ -84,6 +87,9 @@ const CreateTransactionStackNavigator = createStackNavigator({
       headerTintColor: '#0c2550',
     },
   },
+  Success: {
+    screen: Success,
+  },
 });
 
 const MainBottomTabs = createStackNavigator(
@@ -95,9 +101,6 @@ const MainBottomTabs = createStackNavigator(
         header: null,
       },
     },
-    WalletTransactions: {
-      screen: WalletTransactions,
-    },
     AddWallet: {
       screen: AddWallet,
     },
@@ -124,23 +127,6 @@ const MainBottomTabs = createStackNavigator(
       },
     },
 
-    TransactionDetails: {
-      screen: details,
-    },
-    Success: {
-      screen: SuccessTransactionStackNavigation,
-      navigationOptions: {
-        header: null,
-        gesturesEnabled: false,
-      },
-    },
-    RBF: {
-      screen: rbf,
-    },
-    CreateRBF: {
-      screen: createrbf,
-    },
-
     //
 
     ReceiveDetails: {

loc/en.js

@@ -91,7 +91,7 @@ module.exports = {
       conf: 'conf',
     },
     details: {
-      title: 'Transaction details',
+      title: 'Transaction',
       from: 'Input',
       to: 'Output',
       copy: 'Copy',

loc/es.js

@@ -91,7 +91,7 @@ module.exports = {
       conf: 'conf',
     },
     details: {
-      title: 'Detalles de Transaccion',
+      title: 'Transaccion',
       from: 'De',
       to: 'A',
       copy: 'Copiar',

screen/receive/details.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Animated, StyleSheet, View, TouchableOpacity, Clipboard, Share } from 'react-native';
 import QRCode from 'react-native-qrcode';
-import { BlueLoading, SafeBlueArea, BlueButton, BlueHeaderDefaultSub, is } from '../../BlueComponents';
+import { BlueLoading, SafeBlueArea, BlueButton, BlueNavigationStyle, is } from '../../BlueComponents';
 import PropTypes from 'prop-types';
 /** @type {AppStorage} */
 let BlueApp = require('../../BlueApp');
@@ -9,11 +9,11 @@ let loc = require('../../loc');
 // let EV = require('../../events');
 
 export default class ReceiveDetails extends Component {
-  static navigationOptions = {
+  static navigationOptions = ({ navigation }) => ({
-    header: ({ navigation }) => {
+    ...BlueNavigationStyle(navigation, true),
-      return <BlueHeaderDefaultSub leftText={loc.receive.header.toLowerCase()} onClose={() => navigation.goBack(null)} />;
+    title: loc.receive.header,
-    },
+    headerLeft: null,
-  };
+  });
 
   constructor(props) {
     super(props);

screen/send/confirm.js

@@ -2,20 +2,17 @@
 import React, { Component } from 'react';
 import { ActivityIndicator, TouchableOpacity, StyleSheet, View } from 'react-native';
 import { Text } from 'react-native-elements';
-import { BlueButton, SafeBlueArea, BlueCard, BlueSpacing40, BlueHeaderDefaultSub } from '../../BlueComponents';
+import { BlueButton, SafeBlueArea, BlueCard, BlueSpacing40, BlueNavigationStyle } from '../../BlueComponents';
 import { BitcoinUnit } from '../../models/bitcoinUnits';
 import PropTypes from 'prop-types';
 let loc = require('../../loc');
 let EV = require('../../events');
 
 export default class Confirm extends Component {
-  static navigationOptions = {
+  static navigationOptions = () => ({
-    headerStyle: {
+    ...BlueNavigationStyle(null, false),
-      backgroundColor: '#FFFFFF',
+    title: loc.send.confirm.header,
-      borderBottomWidth: 0,
+  });
-    },
-    headerTintColor: '#0c2550',
-  };
 
   constructor(props) {
     super(props);
@@ -64,7 +61,6 @@ export default class Confirm extends Component {
   render() {
     return (
       <SafeBlueArea style={{ flex: 1, paddingTop: 19 }}>
-        <BlueHeaderDefaultSub leftText={loc.send.confirm.header.toLowerCase()} rightComponent={null} />
         <BlueCard style={{ alignItems: 'center', flex: 1 }}>
           <View style={{ flexDirection: 'row', justifyContent: 'center', paddingTop: 16, paddingBottom: 16 }}>
             <Text

screen/send/create.js

@@ -1,11 +1,16 @@
 import React, { Component } from 'react';
 import { TextInput, TouchableOpacity, Clipboard, StyleSheet, ScrollView } from 'react-native';
 import { Text } from 'react-native-elements';
-import { BlueHeaderDefaultSub, SafeBlueArea, BlueCard, BlueText } from '../../BlueComponents';
+import { BlueNavigationStyle, SafeBlueArea, BlueCard, BlueText } from '../../BlueComponents';
 import PropTypes from 'prop-types';
 let loc = require('../../loc');
 
 export default class SendCreate extends Component {
+  static navigationOptions = () => ({
+    ...BlueNavigationStyle,
+    title: loc.send.create.details,
+  });
+
   constructor(props) {
     super(props);
     console.log('send/create constructor');
@@ -30,7 +35,6 @@ export default class SendCreate extends Component {
   render() {
     return (
       <SafeBlueArea style={{ flex: 1, paddingTop: 19 }}>
-        <BlueHeaderDefaultSub leftText={loc.send.create.details.toLowerCase()} rightComponent={null} />
         <ScrollView>
           <BlueCard style={{ alignItems: 'center', flex: 1 }}>
             <BlueText style={{ color: '#0c2550', fontWeight: '500' }}>{loc.send.create.this_is_hex}</BlueText>

screen/send/details.js

@@ -12,7 +12,7 @@ import {
   Slider,
 } from 'react-native';
 import { Text, Icon } from 'react-native-elements';
-import { BlueHeaderDefaultSub, BlueButton } from '../../BlueComponents';
+import { BlueNavigationStyle, BlueButton } from '../../BlueComponents';
 import PropTypes from 'prop-types';
 import Modal from 'react-native-modal';
 import NetworkTransactionFees, { NetworkTransactionFee } from '../../models/networkTransactionFees';
@@ -30,11 +30,10 @@ let currency = require('../../currency');
 const btcAddressRx = /^[a-zA-Z0-9]{26,35}$/;
 
 export default class SendDetails extends Component {
-  static navigationOptions = {
+  static navigationOptions = ({ navigation }) => ({
-    header: ({ navigation }) => {
+    ...BlueNavigationStyle(navigation, true),
-      return <BlueHeaderDefaultSub leftText={loc.send.header.toLowerCase()} onClose={() => navigation.goBack(null)} />;
+    title: loc.send.header,
-    },
+  });
-  };
 
   constructor(props) {
     super(props);

screen/send/success.js

@@ -8,20 +8,22 @@ import PropTypes from 'prop-types';
 let loc = require('../../loc');
 
 export default class Success extends Component {
+  static navigationOptions = {
+    header: null,
+  };
+
   constructor(props) {
     super(props);
     console.log('send/create constructor');
 
     this.state = {
       amount: props.navigation.getParam('amount'),
-      address: props.navigation.getParam('address'),
       fee: props.navigation.getParam('fee'),
     };
   }
 
   async componentDidMount() {
     console.log('send/create - componentDidMount');
-    console.log('address = ', this.state.address);
     Haptic.notification(Haptic.NotificationTypes.Success);
   }
 
@@ -82,7 +84,7 @@ export default class Success extends Component {
         <BlueCard>
           <BlueButton
             onPress={() => {
-              this.props.navigation.getParam('dismissModal')();
+              this.props.navigation.dismiss();
             }}
             title={loc.send.success.done}
             style={{ maxWidth: 263, paddingHorizontal: 56 }}
@@ -98,11 +100,11 @@ Success.propTypes = {
     goBack: PropTypes.function,
     getParam: PropTypes.function,
     navigate: PropTypes.function,
+    dismiss: PropTypes.function,
     state: PropTypes.shape({
       params: PropTypes.shape({
         amount: PropTypes.string,
         fee: PropTypes.number,
-        address: PropTypes.string,
       }),
     }),
   }),

screen/settings/about.js

@@ -9,7 +9,7 @@ import {
   SafeBlueArea,
   BlueCard,
   BlueText,
-  BlueHeaderDefaultSub,
+  BlueNavigationStyle,
 } from '../../BlueComponents';
 import PropTypes from 'prop-types';
 /** @type {AppStorage} */
@@ -18,13 +18,10 @@ const { width, height } = Dimensions.get('window');
 let loc = require('../../loc/');
 
 export default class About extends Component {
-  static navigationOptions = {
+  static navigationOptions = () => ({
-    headerStyle: {
+    ...BlueNavigationStyle(),
-      backgroundColor: '#FFFFFF',
+    title: loc.settings.about,
-      borderBottomWidth: 0,
+  });
-    },
-    headerTintColor: '#0c2550',
-  };
 
   constructor(props) {
     super(props);
@@ -46,7 +43,6 @@ export default class About extends Component {
 
     return (
       <SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1 }}>
-        <BlueHeaderDefaultSub leftText={loc.settings.about} rightComponent={null} />
         <ScrollView>
           <BlueCard>
             <BlueText h4>BlueWallet is free and opensource Bitcoin wallet. Licensed MIT.</BlueText>

screen/settings/encryptStorage.js

@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 import { View } from 'react-native';
 import { FormValidationMessage } from 'react-native-elements';
-import { BlueLoading, BlueSpacing20, BlueButton, SafeBlueArea, BlueCard, BlueText, BlueHeaderDefaultSub } from '../../BlueComponents';
+import { BlueLoading, BlueSpacing20, BlueButton, SafeBlueArea, BlueCard, BlueText, BlueNavigationStyle } from '../../BlueComponents';
 import PropTypes from 'prop-types';
 /** @type {AppStorage} */
 let BlueApp = require('../../BlueApp');
@@ -10,13 +10,10 @@ let prompt = require('../../prompt');
 let loc = require('../../loc');
 
 export default class EncryptStorage extends Component {
-  static navigationOptions = {
+  static navigationOptions = () => ({
-    headerStyle: {
+    ...BlueNavigationStyle(),
-      backgroundColor: '#FFFFFF',
+    title: loc.settings.encrypt_storage,
-      borderBottomWidth: 0,
+  });
-    },
-    headerTintColor: '#0c2550',
-  };
 
   constructor(props) {
     super(props);
@@ -40,8 +37,6 @@ export default class EncryptStorage extends Component {
 
     return (
       <SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1 }}>
-        <BlueHeaderDefaultSub leftText={loc.settings.encrypt_storage.toLowerCase()} rightComponent={null} />
-
         <BlueCard>
           {(() => {
             if (this.state.storageIsEncrypted) {

screen/settings/language.js

@@ -1,19 +1,16 @@
 import React, { Component } from 'react';
 import { Picker } from 'react-native';
-import { BlueLoading, SafeBlueArea, BlueCard, BlueHeaderDefaultSub } from '../../BlueComponents';
+import { BlueLoading, SafeBlueArea, BlueCard, BlueNavigationStyle } from '../../BlueComponents';
 import PropTypes from 'prop-types';
 /** @type {AppStorage} */
 let BlueApp = require('../../BlueApp');
 let loc = require('../../loc');
 
 export default class Language extends Component {
-  static navigationOptions = {
+  static navigationOptions = () => ({
-    headerStyle: {
+    ...BlueNavigationStyle(),
-      backgroundColor: '#FFFFFF',
+    title: loc.settings.language,
-      borderBottomWidth: 0,
+  });
-    },
-    headerTintColor: '#0c2550',
-  };
 
   constructor(props) {
     super(props);
@@ -37,8 +34,6 @@ export default class Language extends Component {
 
     return (
       <SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1 }}>
-        <BlueHeaderDefaultSub leftText={loc.settings.language.toLowerCase()} rightComponent={null} />
-
         <BlueCard>
           <Picker
             selectedValue={this.state.language}

screen/settings/settings.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import { ScrollView } from 'react-native';
+import { ScrollView, TouchableOpacity } from 'react-native';
-import { BlueLoading, SafeBlueArea, BlueHeaderDefaultSub, BlueListItem } from '../../BlueComponents';
+import { BlueLoading, SafeBlueArea, BlueNavigationStyle, BlueHeaderDefaultSub, BlueListItem } from '../../BlueComponents';
 import PropTypes from 'prop-types';
 /** @type {AppStorage} */
 let BlueApp = require('../../BlueApp');
@@ -8,13 +8,7 @@ let loc = require('../../loc');
 
 export default class Settings extends Component {
   static navigationOptions = {
-    navigationOptions: {
+    ...BlueNavigationStyle,
-      headerStyle: {
-        backgroundColor: '#FFFFFF',
-        borderBottomWidth: 0,
-      },
-      headerTintColor: '#0c2550',
-    },
   };
 
   constructor(props) {
@@ -41,10 +35,16 @@ export default class Settings extends Component {
       <SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1 }}>
         <BlueHeaderDefaultSub leftText={loc.settings.header} rightComponent={null} />
         <ScrollView maxHeight={450}>
-          <BlueListItem title={loc.settings.encrypt_storage} onPress={() => this.props.navigation.navigate('EncryptStorage')} />
+          <TouchableOpacity onPress={() => this.props.navigation.navigate('EncryptStorage')}>
+            <BlueListItem title={loc.settings.encrypt_storage} />
+          </TouchableOpacity>
+          <TouchableOpacity onPress={() => this.props.navigation.navigate('Language')}>
+            <BlueListItem title={loc.settings.language}  />
+          </TouchableOpacity>
           <BlueListItem title={loc.settings.currency} />
-          <BlueListItem title={loc.settings.language} onPress={() => this.props.navigation.navigate('Language')} />
+          <TouchableOpacity onPress={() => this.props.navigation.navigate('About')}>
-          <BlueListItem title={loc.settings.about} onPress={() => this.props.navigation.navigate('About')} />
+            <BlueListItem title={loc.settings.about} />
+          </TouchableOpacity>
         </ScrollView>
       </SafeBlueArea>
     );

screen/transactions/details.js

@@ -9,6 +9,7 @@ import {
   BlueLoading,
   BlueSpacing20,
   BlueCopyToClipboardButton,
+  BlueNavigationStyle,
 } from '../../BlueComponents';
 import PropTypes from 'prop-types';
 /** @type {AppStorage} */
@@ -37,11 +38,9 @@ function formatTime(time) {
 }
 
 export default class TransactionsDetails extends Component {
-  static navigationOptions = {
+  static navigationOptions = () => ({
-    header: ({ navigation }) => {
+    ...BlueNavigationStyle(),
-      return <BlueHeaderDefaultSub leftText={loc.transactions.details.title.toLowerCase()} onClose={() => navigation.goBack(null)} />;
+  });
-    },
-  };
 
   constructor(props) {
     super(props);
@@ -84,6 +83,7 @@ export default class TransactionsDetails extends Component {
 
     return (
       <SafeBlueArea forceInset={{ horizontal: 'always' }} style={{ flex: 1 }}>
+        <BlueHeaderDefaultSub leftText={loc.transactions.details.title} rightComponent={null} />
         <ScrollView style={{ flex: 1 }}>
           <BlueCard>
             {(() => {

screen/wallets/add.js

@@ -12,10 +12,9 @@ import {
   BlueButton,
   SafeBlueArea,
   BlueCard,
-  BlueHeaderDefaultSub,
+  BlueNavigationStyle,
 } from '../../BlueComponents';
 import { RadioGroup, RadioButton } from 'react-native-flexi-radio-button';
-
 import PropTypes from 'prop-types';
 import { HDSegwitP2SHWallet } from '../../class/hd-segwit-p2sh-wallet';
 import { LightningCustodianWallet } from '../../class/lightning-custodian-wallet';
@@ -28,11 +27,11 @@ let loc = require('../../loc');
 const { width } = Dimensions.get('window');
 
 export default class WalletsAdd extends Component {
-  static navigationOptions = {
+  static navigationOptions = ({ navigation }) => ({
-    header: ({ navigation }) => {
+    ...BlueNavigationStyle(navigation, true),
-      return <BlueHeaderDefaultSub leftText={loc.wallets.add.title} onClose={() => navigation.goBack(null)} />;
+    title: loc.wallets.add.title,
-    },
+    headerLeft: null,
-  };
+  });
 
   constructor(props) {
     super(props);

screen/wallets/details.js

@@ -9,7 +9,7 @@ import {
   BlueFormLabel,
   BlueFormInputAddress,
   BlueSpacing20,
-  BlueHeaderDefaultSub,
+  BlueNavigationStyle,
 } from '../../BlueComponents';
 import PropTypes from 'prop-types';
 let EV = require('../../events');
@@ -18,11 +18,11 @@ let BlueApp = require('../../BlueApp');
 let loc = require('../../loc');
 
 export default class WalletDetails extends Component {
-  static navigationOptions = {
+  static navigationOptions = ({ navigation }) => ({
-    header: ({ navigation }) => {
+    ...BlueNavigationStyle(navigation, true),
-      return <BlueHeaderDefaultSub leftText={loc.wallets.details.title} onClose={() => navigation.goBack(null)} />;
+    title: loc.wallets.details.title,
-    },
+    headerLeft: null,
-  };
+  });
 
   constructor(props) {
     super(props);