Skip to content

Invalid prop %s supplied to React.Fragment. React.Fragment can only have key and children props. styleΒ #3359

@tqdung

Description

@tqdung

Current behavior:

When using React.Fragment (<>...</>) as a direct child of an Emotion-styled TouchableHighlight component in React Native, React throws the following error:

ERROR: Invalid prop `style` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.

The issue occurs because Emotion's styled component system attempts to pass a style prop to the React.Fragment, which React does not allow. React.Fragment can only accept key and children props.

To reproduce:

A minimal reproduction repository is available at: GitHub Repository URL

  1. Clone the repository and install dependencies:

    npm install
  2. Start Expo and run on iOS:

    npm start
    npm run ios
  3. After the app starts in the iOS Simulator, you'll see a text "Hello from React Native with Emotion!"

  4. Click/tap on the text

  5. Check the terminal or simulator console - you'll see the error: ERROR: Invalid prop 'style' supplied to React.Fragment

Minimal reproduction code:

import { View, TouchableHighlight, Text } from 'react-native';
import styled from '@emotion/native';

const StyledListItemContainer = styled(TouchableHighlight)(() => ({
  alignItems: 'center',
  flexDirection: 'row',
}));

export default function App() {
  return (
    <View style={{ flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center' }}>
      <StyledListItemContainer onPress={() => { }}>
        <>
          <Text>Hello from React Native with Emotion!</Text>
        </>
      </StyledListItemContainer>
    </View>
  );
}

Expected behavior:

React.Fragment should be allowed as a child of Emotion-styled components without receiving invalid props. The styled component should not attempt to pass props (such as style) to React.Fragment children.

Environment information:

  • react version: 19.1.0
  • @emotion/react version: ^11.14.0
  • @emotion/native version: ^11.11.0
  • @emotion/babel-plugin version: ^11.13.5
  • react-native version: 0.81.5
  • expo version: ~54.0.32

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions