React - i want to blur or darken all page except specific element when user miss that one specific element to fill in page

Question

Basically i want the user to focus on that element where they make mistake or jump that element. My main goal is attract user's attention with better UI

I try to get position of that element with getBoundingClientRect() , then try to use "react-native-blur"

Is it right way to do this or how to do?

Answer 1

You need to monitor changes and validate field upon certain event. It's easiest to use library such as react-hook-form. It automatically focuses on first field with error

Example