Documentação da biblioteca de navegação

navigation.md

Documentação da Biblioteca de Navegação 🧭

Estilização setStyle

const navigator = useNavigator()

navigator.setStyle({})

Tipagens

import {
  OptionsTopBar,
  ImageResource,
} from 'react-native-navigation';
import { NavigatorButtons } from '~/core/reactNavigationAdapter/types/optionsConverter';


type ThemeColor = {
  dark?: string,
  light?: string
}

type ModalPresentationStyle = 'formSheet' | 
  'pageSheet' | 
  'overFullScreen' | 
  'overCurrentContext' | 
  'currentContext' | 
  'popover' | 
  'fullScreen' | 
  'none'

Possíveis Configurações:

Propriedade	Tipo	Android	iOS
backButtonHidden	boolean	Remover o botão voltar	Remover botão voltar
disableBackGesture	boolean	Remover o botão	Desabilita o voltar nativo
backButtonImage	ImageResource	Alterar ícone do botão voltar	Alterar ícone do botão voltar
navBarButtonColor	string or ThemeColor	Alterar cor do ícone do botão voltar	Alterar cor do ícone do botão voltar
hideBackButtonTitle	boolean	Remover texto do botão	Em breve
screenBackgroundColor	string or ThemeColor	Alterar cor do background	Alterar cor do brackground
layout	OptionsLayout	Configurar o Layout	Configurar o Layout
statusBarTextColorScheme	'dark' or 'light'	Alterar cor do texto da status bar	Alterar cor do texto da status bar
modalPresentationStyle	ModalPresentationStyle	Configurar modo de apresentação do modal	Configurar modo de apresentação do modal
topBar	OptionsTopBar	Configurar topbar	Configurar topbar
topBarElevationShadowEnabled	number	Elevação da barra de navegação (sombra)	-
navBarHidden	boolean	Remover header de navegação	Remover header de navegação
navBarTransparent	boolean	Header de navegação transparente	Header de navegação transparente
tabBarHidden	boolean	Remover tabs de navegação	Remover tabs de navegação
navBarBackgroundColor	string or ThemeColor	Alterar background header de navegação	Alterar background header de navegação
drawUnderNavBar	boolean	Header de navegação sobe e deixa a toolbar separada	Header de navegação sobe e deixa a toolbar separada
navBarNoBorder	boolean	-	Desabilitar borda em baixo no header de navegação
title	string	Texto do título do header de navegação	Texto do título do header de navegação
navBarTextColor	string	Cor do texto do título do header de navegação	Cor do texto do título do header de navegação
navBarTextAlign	'center' or 'fill'	Alinhamento do texto do título do header de navegação	Alinhamento do texto do título do header de navegação
navigatorButtons	Partial<NavigatorButtons>	Configurar botões do header de navegação	Configurar botões do header de navegação
drawUnderTabBar	boolean	Ela ativa deixa a tabbar com um zindex maior que a tela, deixando ela por cima	Ela ativa deixa a tabbar com um zindex maior que a tela, deixando ela por cima

Observações:

• Se estiver configurado algum botão com o navigator.setButtons a propriedade backButtonHidden não funcionará;
• Configurar topBar ou screenBackgroundColor não ser viável pois algumas estilizações padrões podem sobreescrever;
• Com o navBarHidden ainda continua o background preto, para remover 100% é preciso configurar o noToolbar: true nas configurações da tela;
• navBarTransparent: é mais viável cadastrar a tela com noToolbar: true;
• Podemos alterar o background do header de navegação pelo: `topBar: { background:{ color: 'color'} };
• O alinhamento do tipo fill alinha o texto à esquerda;
• Se precisar apenas alterar a imagem do botão voltar, utilizar o backButtonImage e para alterar a cor utilize navBarButtonColor;

Utilidade

• Para remover o voltar nativo do android:

import { useEffect } from 'react'
import { BackHandler } from 'react-native';

 useEffect(() => {
    const handler = BackHandler.addEventListener('hardwareBackPress', () => {
      return true;
    });

    return () => {
      handler.remove();
    };
  }, []);

Precisamos estudar uma melhor forma de fazer esse do BackHandler, pq oq acontece ele só vai ser removido se o componente desmontar, quando estamos fazendo push em outras telas, a tela anterior não desmonta, logo o swipe fica bloqueado pra todas as telas depois dessa. Uma sugestão a ser estudada seria:

  const onNavigatorEvent = event => {
    let handler;

    if (event.id === 'didAppear') {
      handler = BackHandler.addEventListener('hardwareBackPress', () => null);
    }

    if (event.id === 'didDisappear') {
      handler.remove();
    }
  };

  useDidMount(() => {
    navigator.addOnNavigatorEvent(onNavigatorEvent);
  });

É então esse é um problema mesmo, mas a gente cadastrando esse callback no addOnNavigatorEvent nas outras telas não vão disparar esse onNavigatorEvent?