-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Description
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
-
Clone the repository and install dependencies:
npm install
-
Start Expo and run on iOS:
npm start npm run ios
-
After the app starts in the iOS Simulator, you'll see a text "Hello from React Native with Emotion!"
-
Click/tap on the text
-
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:
reactversion: 19.1.0@emotion/reactversion: ^11.14.0@emotion/nativeversion: ^11.11.0@emotion/babel-pluginversion: ^11.13.5react-nativeversion: 0.81.5expoversion: ~54.0.32