BackButton

A back button component. This component is primarily used to implement functionality for returning to the previous screen in navigation headers or custom screen tops. If no onPress handler is set, it won't perform any action.

Signature

function BackButton({ tintColor, onPress }: BackButtonProps): any;

Parameters

• propsRequired · Object
  
  • tintColor · string
    

    The color of the button icon. You can use CSS color strings.

  • onPress · () => void
    

    A function to execute when the button is pressed. For example, you can add a function to return to the previous screen.

Returns

• ReactElement
  

  Returns a back button component.

Examples

Example of directly passing a handler to a back button and setting a function to close the view

import { createNavigationContainerRef, useNavigation } from '@granite-js/native/@react-navigation/native';
import { BackButton, useRouterBackHandler } from '@granite-js/react-native';
import { useEffect } from 'react';

const navigationContainerRef = createNavigationContainerRef();

function MyBackButton() {
  const navigation = useNavigation();

  const { handler } = useRouterBackHandler({
    navigationContainerRef,
    onClose: () => {
      // close the view
    },
  });

  useEffect(() => {
    navigation.setOptions({
      headerLeft: () => <BackButton onPress={handler} />,
    });
  }, [handler, navigation]);

  return <></>;
}