Missing Support for CSS 'order' Property in React Native's Flexbox Layout

[Yasas4D]

Description

The CSS order property does not seem to be supported in React Native's flexbox layout system. When attempting to use the order property to change the order of flex items within a flex container, the order property is not recognized and giving

No overload matches this call. Overload 1 of 2, '(props: ViewProps | Readonly<ViewProps>): View', gave the following error. Type '{ order: number; }' is not assignable to type 'StyleProp<ViewStyle>'. Object literal may only specify known properties, and 'order' does not exist in type 'ViewStyle | RecursiveArray<Falsy | ViewStyle | RegisteredStyle<ViewStyle>>

React Native Version

0.72.4

Output of npx react-native info

System: OS: Windows 10 10.0.19045 CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz Memory: 1.65 GB / 15.69 GB Binaries: Node: version: 18.16.0 path: C:\Program Files\nodejs\node.EXE Yarn: version: 1.22.19 path: C:\Program Files\nodejs\yarn.CMD npm: version: 9.5.1 path: C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: API Levels: - "28" - "30" - "31" - "32" - "33" Build Tools: - 30.0.2 - 30.0.3 - 31.0.0 - 33.0.0 - 33.0.1 System Images: - android-30 | Google Play Intel x86 Atom - android-33 | Google APIs Intel x86 Atom_64 Android NDK: Not Found Windows SDK: Not Found IDEs: Android Studio: AI-213.7172.25.2113.9123335 Visual Studio: Not Found Languages: Java: 11.0.16.1 Ruby: Not Found npmPackages: "@react-native-community/cli": Not Found react: Not Found react-native: Not Found react-native-windows: Not Found npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: true newArchEnabled: false iOS: hermesEnabled: Not found newArchEnabled: Not found

Steps to reproduce

1. Create a React Native component using flexbox layout.
2. Attempt to apply the order property to the flex items to change their order. For example:.

import { View, Text, StyleSheet } from 'react-native';

const App = () => {
  return (
     <View>
      <Text style={{order:2}}>Second</Text>
      <Text style={{order:1}}>First</Text>
      <Text style={{order:3}}>Third</Text>
    </View>
  );
};

export default App;

Snack, screenshot, or link to a repository

Repo - https://github.com/Yasas4D/react-native-order-issue

Additional Question

Is there any plan to introduce support for the CSS order property in React Native's flexbox layout system in future releases? This feature is significant for creating dynamic and responsive layouts efficiently.

[MrRevengerX]

I encountered the same issue.

[inean]

This should be opened on yoga layout,