Detox, multiple elements were matched for button in transition

Question

I am using detox e2e for creating test cases for my react-native application. Long story short, I have a button inside of my component's render function and that button transitions from left to right. I have given a unique test id to that button. Inside my test case i'm expecting that button to appear using its test id. But when I run "detox test", the test fails and error says that the multiple elements were matched against that test id.

Code for my test file is :

describe('Login flow', () => {
    // test case for wallet generation

    it('should generate new wallet', async () => {
        await expect(element(by.id('WelcomeScreen'))).toBeVisible()
        await expect(element(by.id('WelcomeScreenCreateWalletButton'))).toBeVisible() 
    }) 
})

and code for my button inside render function is:

<Transition appear="horizontal">
          <View style={styles.buttonContainer}>
            <Button
              text={I18n.t('create-wallet')}
              onPress={this.createWallet}
              style={[styles.button, styles.topButton]}
              testID="WelcomeScreenCreateWalletButton"
            />

            <Button
              text={I18n.t('restore-wallet')}
              transparent
              onPress={this.restoreWallet}
              style={styles.button}
              shared={'button'}
              testID="WelcomeScreenRestoreWalletButton"
            />
          </View>
        </Transition>

Inside my test case I'm expecting button with testid "WelcomeScreenCreateWalletButton" to be visible. If I remove transition tags from the render function of my component, then the test runs successfully and passes. So apparently there's some problem with the transition of the button. I've read that detox's idle state synchronization handles the animation problems. I don't know what I am missing :/.

Answer 1

So, apparently this particular issue was introduced by react-native-fluid-navigation which make transitions by duplicating items. I was using it for the transition of buttons from left to right. The simple solution was to use the second item and perform actions on it. The code that works is as follow:

describe('Login flow', () => {
// test case for wallet generation

    it('should generate new wallet', async () => {
        await expect(element(by.id('WelcomeScreen'))).toBeVisible()
        await expect(element(by.id('WelcomeScreenCreateWalletButton')).atIndex(1)).toBeVisible() 
    }) 
})

Adding just atIndex(1) solved the problem.