How to use nextFocusDown in 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!