appends undefined in combination with correct styles inside the styles array

[viktorlarsson]

Current behavior:

Creating a simple loading component and do styling with emotion works great, but i'm doing a native styling -> emotion so i'm using snapshot testing for visual regression tests. But @emotion/native always appends undefined to the styles array. Is this by design or?

import React from 'react';
import styled from '@emotion/native';
import { ActivityIndicator } from 'react-native';

export const LoadingComponent: React.FC = () => {
  return (
    <LoadingComponentView>
      <ActivityIndicatorView>
        <ActivityIndicator />
      </ActivityIndicatorView>
    </LoadingComponentView>
  );
};

const LoadingComponentView = styled.View`
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  align-content: center;
  align-items: center;
  justify-content: center;
`;

const ActivityIndicatorView = styled.View`
  position: absolute;
  top: 25%;
`;

import React from 'react';
import { LoadingComponent } from '../LoadingComponent';
import renderer from 'react-test-renderer';

describe('<LoadingComponent />', () => {
  test('visual test of default loading component', () => {
    const tree = renderer.create(<LoadingComponent />).toJSON();
    expect(tree).toMatchSnapshot();
  });
});

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<LoadingComponent /> visual test of default loading component 1`] = `
<View
  style={
    Array [
      Object {
        "alignContent": "center",
        "alignItems": "center",
        "bottom": 0,
        "display": "flex",
        "justifyContent": "center",
        "left": 0,
        "position": "absolute",
        "right": 0,
        "top": 0,
      },
      undefined, // always appends undefined
    ]
  }
>
  <View
    style={
      Array [
        Object {
          "position": "absolute",
          "top": "25%",
        },
        undefined, // Always appends undefined
      ]
    }
  >
    <ActivityIndicator
      animating={true}
      color="#999999"
      hidesWhenStopped={true}
      size="small"
    />
  </View>
</View>
`;

To reproduce:

1. yarn add @emotion/native@next @emotion/core@next @emotion/react@next
2. Style a simple view with emotion
3. Add snapshot test
4. See undefined in the styles array

Expected behavior:

Should probably not append undefined to the styles array?

Environment information:

• react version: 16.13.1
• react-native version: 0.63
• emotion version: 11.0.0-next.10

[viktorlarsson]

Using css it does not append undefined.

 <View
      style={css`
        display: flex;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        align-content: center;
        align-items: center;
        justify-content: center;
      `}
    >

[Andarist]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.