How to identify a navigation tab button from RNN in a Detox test

Question

I'm trying to implement some Detox tests in my project and I am having some issues to navigate from one screen to another. Basically, I've try to create a script to close a splash screen like the above, but i don't know how to identify the tab bar button "close".

//test.e2e.js
describe('Login', () => {
  it('Should open a splash screen', async () => {
    await device.reloadReactNative();

    await expect(element(by.text('THIS IS A SPLASH SCREEN'))).toBeVisible();
  });

  it('Should close splash screen', async () => {
    await expect(element(by.id('close'))).toBeVisible();
    await element(by.id('close')).tap();

    await expect(element(by.text('Login'))).toBeVisible();
  });
})

On navigation props, I've already put the props testID: 'close' like this:

static async showModal({ options }) {
  await ReactNativeNavigation.showModal({
  stack: {
      children: [
        {
          component: {
            name: 'Splash Screen',
            },
            options: {
              topBar: {
                leftButtons: [
                  {
                    id: 'close',
                    testID: 'close',
                    icon: dismissIcon, // Its a 'X' image
                    color: 'white',
                  },
                ],
                backButton: { visible: false },
              },
              ...options,
            },
          },
        },
      ],
    },
  });
}

But when I try to run the test, it shows the following error:

Test Failed: 'at least 75 percent of the view's area is displayed to the user.' doesn't 
match the selected view.
Expected: at least 75 percent of the view's area is displayed to the user.
     Got: null

   8 | 
   9 |   it('Should close splash screen', async () => {
> 10 |     await expect(element(by.id('close'))).toBeVisible();
     |                                           ^
  11 |     await element(by.id('close')).tap();
  12 | 
  13 |     await expect(element(by.text('Login'))).toBeVisible();

  at _callee2$ (login.test.e2e.js:10:43)
  at tryCatch (../node_modules/regenerator-runtime/runtime.js:63:40)
  at Generator.invoke [as _invoke] (../node_modules/regenerator-runtime/runtime.js:293:22)
  at Generator.next (../node_modules/regenerator-runtime/runtime.js:118:21)
  at tryCatch (../node_modules/regenerator-runtime/runtime.js:63:40)
  at invoke (../node_modules/regenerator-runtime/runtime.js:154:20)
  at ../node_modules/regenerator-runtime/runtime.js:189:11
  at callInvokeWithMethodAndArg (../node_modules/regenerator-runtime/runtime.js:188:16)
  at AsyncIterator.enqueue (../node_modules/regenerator-runtime/runtime.js:211:13)
  at AsyncIterator.next (../node_modules/regenerator-runtime/runtime.js:118:21)

this is my splash screen and the log

Answer 1

I have resolved this issue using a detox recorder. https://github.com/wix/DetoxRecorder.

Using recorder, I took the script flow and the same script used in the test case. It started working fine.