React native: accessibilityLiveRegion equivalent in IOS

Question

I am developing an application in react native and I use some inline error messages for TextInput filed. If the validation fails, I will be showing a Text component with error message. It works correctly. But I face problem with VoiceOver on iOS. The error message is like dynamic and the focus is not switching to the error message. In android I added accessibilityLiveRegion="assertive" which switch the focus back to error Text and then reading. below is the code.

<Text style={ messageCellStyle } accessibilityLiveRegion="assertive">
            { StringUtils.process(message, props) }
 </Text>

Can anyone help to to make it work in iOS VoiceOver? I would lik to read the error message when ever it shows in the UI.

Answer 1

I found myself looking for the same "drop in replacement" for the accessibilityLiveRegion prop today without luck. What I ended up doing was removing the prop, and rather listen to state changes with useEffect. Once the state changes I announce the text that would be inside the Text element. This worked well for me for both Android and iOS. Code example below 👇

useEffect(() => {
  AccessibilityInfo.announceForAccessibility(
    textStringBasedOnState(someState)
  )
}, [someState])