My checkbox is a Pressable surrounded by a View container. The scenario is as follows: a form with ScrollView where I have several fields and the Checkbox. I'm trying to put focus on the Checkbox View so that the screen scrolls to the component and highlights it in the case of validation, but without success. I've already tried adding the Android focusable prop to see if it works on Android, but it doesn't work there either. I've tried putting focus on Pressable but it doesn't work either. I searched the Internet and the only possible solution I found was to place an invisible TextInput and focus on it using its ref. But I wanted something cleaner. Below is my code:

import React from 'react';
import { Text, SafeAreaView, View, TextInput, ScrollView, Button, StyleSheet, Alert } from 'react-native';

export default function App() {
  const viewRef = React.useRef(null);
  const [isFocused, setIsFocused] = React.useState(false);
  const initialMount = React.useRef(true);
  
  React.useEffect(() => {
    if (initialMount.current) {
      initialMount.current = false;
      return;
    }
    let textAlert = "";
    if (isFocused) {
      textAlert = "The component is focused!";
    } else {
      textAlert = "ERROR!!!: << The component is not focused! >>";
    }
    console.log (textAlert);
    Alert.alert(textAlert);
  }, [isFocused]);
  
  function setFocus() {
    //It doesn't even work on Android with focusable = true
    viewRef.current.focus();
    
    //Here isFocused() == null or undefined
    /*let updateIsFocused = viewRef.current.isFocused();
    setIsFocused(updateIsFocused);*/
  }
  
  function onClick() {
    setFocus();
  }
  
  return (
    <SafeAreaView style={styles.container}>
      <View>
        <ScrollView style={styles.scrollView}>
          <Text style={styles.textTitle}>
                Form
          </Text>
          <TextInput
            style={styles.input}
            placeholder="Field 1"
          />
          <TextInput
            style={styles.input}
            placeholder="Field 2"
          />
          <TextInput
            style={styles.input}
            placeholder="Field 3"
          />
              
          //My Checkbox container
          <View
            ref={viewRef}
            style={styles.view}
            focusable
          />
              
        </ScrollView>
        <Button
          title="Focus Checkbox"
          onPress={() => onClick}
        />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingHorizontal: 15,
  },
  scrollView: {
    height: 600,
  },
  textTitle: {
    margin: 20,
    fontSize: 26,
    color: 'black',
    fontWeight: 'bold',
    textAlign: 'center',
  },
  input: {
    height: 40,
    margin: 12,
    marginBottom: 400,
    borderWidth: 1,
    padding: 10,
  },
  view: {
    width: 26,
    height: 26,
    borderWidth: 2,
    borderColor: '#000',
    marginRight: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
});