How to use nextFocusDown in React Native - react-native

Question

I need to define the next view that gets focus once the button is pressed, however, there is no much information in React Native documentation (https://reactnative.dev/docs/view#nextfocusdown).
So far I have something like this:
const ListHeader = React.memo(({
navigation
}) => {
return (
<>
<View
style={{
width: '100%',
backgroundColor: '#338cf7',
height: 70,
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center'
}}
focusable={false}
>
<View
style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}
focusable={false}>
<TouchableNativeFeedback
background={VeoHoverBackground}
onPress={() => navigation.navigate('Sidebar')}
>
<View nextFocusDown={next_to_focus_id}>
<CustomIcon
style={{ padding: 10, color: 'white' }} size={22}
name='customize' />
</View>
</TouchableNativeFeedback>
<TouchableNativeFeedback
background={VeoHoverBackground}>
<View focusable={false}>
<Text style={{ color: 'white', marginLeft: 10, fontSize: 18 }}
focusable={false}>VEO Messanger</Text>
</View>
</TouchableNativeFeedback>
</View>
<TouchableNativeFeedback
onPress={() => navigation.navigate('NewMessageView')}
background={VeoHoverBackground}>
<View>
<CustomIcon
style={{ padding: 10, color: 'white' }} size={22}
name='edit-rounded' />
</View>
</TouchableNativeFeedback>
</View>
</>
);
});
How to get the id of the element that has to be focused next? In my case it has to be second TouchableNativeFeedback element.

Answer 1

So I work with React Native so I am not entirely sure if React works the same way, but you have to pass a ref to the nextFocusDown prop. I see you have the id <View nextFocusDown={next_to_focus_id}>but I don't see the where the next_to_focus_id ref is.
So in React Native, for example, I would make a ref with useRef and use the ref prop on TextInput or TouchableOpacity. Here I will use a really simple TextInput example:
```
const emailRef = useRef();
const passwordRef=useRef();
<TextInput
ref={emailRef}
nextFocusDown={passwordRef}>
</TextInput>
<TextInput
ref={passwordRef}>
</TextInput>
```
Hopefully that helps!