When highlighting occurs, UI changes are bugged

[Douglas-Hsieh]

Hello, thank you for fixing the overlay flickering :)

I found another issue: When highlighting occurs, UI changes are bugged.

In this repro, changing the screens will work, but will stop working once highlighting occurs.

import React, { useState } from 'react';
import { Button } from 'react-native';
import { HighlightableElement, HighlightableElementProvider, HighlightOverlay } from 'react-native-highlight-overlay';

export default function App() {

  const [highlightId, setHighlightId] = useState<string>()
  const [screen, setScreen] = useState<string>('screen1')

  return (
    <HighlightableElementProvider>
      { screen === 'screen1' &&
        <HighlightableElement id="button1">
          <Button title={'button1'} onPress={() => {
            if (highlightId) {
              setHighlightId(null)
            } else {
              setHighlightId('button1')
            }
          }}/>
        </HighlightableElement>
      }

      { screen === 'screen2' &&
        <HighlightableElement id="button2">
          <Button title={'button2'} onPress={() => {
            if (highlightId) {
              setHighlightId(null)
            } else {
              setHighlightId('button2')
            }
          }}/>
        </HighlightableElement>
      }

      <Button title={'Change Screen'} onPress={() => {
        if (screen === 'screen1') {
          setScreen('screen2')
        } else {
          setScreen('screen1')
        }
      }}/>

      <HighlightOverlay
        highlightedElementId={highlightId}
        onDismiss={() => {}}
      />
    </HighlightableElementProvider>
  )
}

[Charanor]

Thank you for the code example, I'll take a look tomorrow. For now, can you try this but putting the check inside of the HighlightableElement?

<HighlightableElement id="button1">
  {screen === "screen1" && (
    <OtherComponent />
  )}
</HighlightableElement>

[Douglas-Hsieh]

Nice, nesting the check inside the HighlightableElement worked!

I think it would be ideal to have it work in the first case as well

import React, { useState } from 'react';
import { Button } from 'react-native';
import { HighlightableElement, HighlightableElementProvider, HighlightOverlay } from 'react-native-highlight-overlay';

export default function App() {

  const [highlightId, setHighlightId] = useState<string>()
  const [screen, setScreen] = useState<string>('screen1')

  return (
    <HighlightableElementProvider>
        <HighlightableElement id="button1">
          { screen === 'screen1' &&
            <Button title={'button1'} onPress={() => {
              if (highlightId) {
                setHighlightId(null)
              } else {
                setHighlightId('button1')
              }
            }}/>
          }
        </HighlightableElement>

        <HighlightableElement id="button2">
          { screen === 'screen2' &&
            <Button title={'button2'} onPress={() => {
              if (highlightId) {
                setHighlightId(null)
              } else {
                setHighlightId('button2')
              }
            }}/>
          }
        </HighlightableElement>

      <Button title={'Change Screen'} onPress={() => {
        if (screen === 'screen1') {
          setScreen('screen2')
        } else {
          setScreen('screen1')
        }
      }}/>

      <HighlightOverlay
        highlightedElementId={highlightId}
        onDismiss={() => {}}
      />
    </HighlightableElementProvider>
  )
}

[Charanor]

Nice! I've updated the README to mention this as a caveat. I think I know why this is happening though, so I'll fix it when I get some time :) keeping this open for the time being so I don't forget 👀