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