Jest React Native, testing / mocking? onLayout

I currently have this relatively simply screen in React, that I need to test in Jest, however, I'm not terribly familiar with the library and this is what I've got so far.

Things I'd like to test?

The onLayoutEvent. Does this need mocked? Showing / hiding of the spinner on page. At the moment, it finds it here: (which is fine)

expect(spinner).not.toBeNull();

But still finds it after the event call, whereas in actual fact it is hidden by state after the event fires.

Loading for this component occurs from a call to setLoading in it's children. I've also zero clue on how to test this. Any assistance on what / how to test this component appreciated.

describe('Login', () => {
  test('it should render', () => {
    renderWithStore(<LoginStarter />);
  });

  test('it should fire a layout event', async () => {
    const { getByTestId } = renderWithStore(<LoginStarter />);
    const view = await getByTestId('loginId');
    const spinner = await getByTestId('loginSpinner');
    expect(spinner).not.toBeNull();

    act(() =>
      fireEvent(view, 'onLayout', {
        nativeEvent: { layout: { width: 500 } },
      }),
    );
  });
});

The core component

 const [widthLoading, setWidthLoading] = useState(true);
  const [loading, setLoading] = useState(false);
  const theme = useTheme();
  const [containerWidth, setContainerWidth] = useState<number>();

  const onLayout = (event: LayoutChangeEvent) => {
    const { width } = event.nativeEvent.layout;
    setContainerWidth(width);
    setWidthLoading(false);
  };

  const tabs = [
    {
      title: 'Login',
      component: () => LoginScreen({ componentId: props.componentId, setLoading }),
      testID: 'tab1',
    },
    {
      title: 'Sign up',
      component: () => RegisterScreen({ componentId: props.componentId, setLoading }),
      testID: 'tab2',
    },
  ];

  const wrapperStyle = {
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    opacity: loading ? 0.5 : 1,
  };

  const loadingStyle = {
    alignItems: 'center',
    justifyContent: 'center',
    flex: 1,
    position: 'absolute',
  };

  return (
    <View testID="loginId" onLayout={onLayout} style={wrapperStyle as StyleProp<ViewStyle>}>
      {loading && (
        <View style={loadingStyle as StyleProp<ViewStyle>}>
          <ActivityIndicator size="large" color={theme.spinner} />
        </View>
      )}
      <View>
        {!widthLoading && containerWidth ? (
          <Tabs style="light" tabWidth={Math.round(containerWidth / 2)} tabs={tabs} tabsScrollEnabled />
        ) : (
          <ActivityIndicator testID="loginSpinner" size="large" color={theme.spinner} />
        )}
      </View>
    </View>
  );