Skip to main content

useFocus

useFocus is a hook that allows to focus a given component automatically on mount or programmatically using the setFocus function.

Usage​

import { useFocus } from '@react-native-ama/core';

const { setFocus } = useFocus(refComponent);

Parameters​

refComponent (optional)​

A React Ref of the component to autofocus when the hook mounts. When provided, setFocus is called automatically on mount.

TypeDefault
React.RefObject<any>undefined

Returns​

setFocus​

Focuses an element programmatically. Waits for any pending interactions to complete before setting accessibility focus, and retries once after 100 ms to work around a React Native focus reliability issue.

setFocus(component: null | number | React.Component<any> | React.ComponentClass<any>): void

Example​

Autofocus on mount​

Automatically focus the <Text /> component when MyFancyScreen is mounted:

import { useFocus } from '@react-native-ama/core';
import * as React from 'react';
import { Text } from 'react-native';

const MyFancyScreen = () => {
  const componentRef = React.useRef<Text>(null);

  useFocus(componentRef);

  return (
    <View>
      <Text ref={componentRef} accessibilityRole="header">
        Header
      </Text>
      {/* ... the screen content */}
    </View>
  );
};

Set focus programmatically​

import { useFocus } from '@react-native-ama/core';
import * as React from 'react';
import { Text } from 'react-native';

const MyFancyScreen = () => {
  const componentRef = React.useRef<Text>(null);
  const { setFocus } = useFocus();

  return (
    <View>
      <Pressable onPress={() => setFocus(componentRef.current)}>
        <Text>Focus Text</Text>
      </Pressable>

      <Text ref={componentRef}>Text goes here</Text>
      {/* ... the screen content */}
    </View>
  );
};