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';

const { setFocus } = useFocus(refComponent);
  • refComponent: (Optional) Is the React Ref of the component we want to autofocus on mount
  • setFocus: Allows to focus an element programmatically

Example​

Autofocus on mount​

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

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

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 * as React from 'react';
import { Text } from 'react-native';
import { Pressable, useFocus } from 'react-native-ama';

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>
  );
};