notesnook/apps/mobile/src/components/header/HeaderTitle.js

import React from 'react';
import {Text} from 'react-native';
import {SIZE, WEIGHT} from '../../common/common';
import {useTracked} from '../../provider';

export const HeaderTitle = ({root}) => {
  const [state, dispatch] = useTracked();
  const {colors} = state;
  let headerTextState = root ? state.headerTextState : state.indHeaderTextState;

  return (
    <>
      <Text
        style={{
          fontSize: SIZE.xl,
          color: headerTextState.color ? headerTextState.color : colors.heading,
          fontFamily: WEIGHT.bold,
          alignSelf: 'center',
        }}>
        <Text
          style={{
            color: colors.accent,
          }}>
          {headerTextState.heading.slice(0, 1) === '#' ? '#' : null}
        </Text>

        {headerTextState.heading.slice(0, 1) === '#'
          ? headerTextState.heading.slice(1)
          : headerTextState.heading}
      </Text>
    </>
  );
};