Stack horizontal not working

[Nick Hodapp]

Willing to submit a PR to fix?

• I am willing to submit a PR to fix

Requested priority

None

Products/applications affected

fluentui-react-native, Stack component

Package version(s)

"@fluentui-react-native/stack": "^0.8.11", "@fluentui/react-native": "^0.37.24",

OS version(s)

No response

Platform

• iOS
• macOS
• win32
• windows
• android

Xcode version

14.2

Please provide a reproduction of the bug

function App(): JSX.Element {
  return (
    <SafeAreaView>
      <Stack gap={20} horizontal>
        <Stack.Item>
          <View style={{width: 20, height: 20, backgroundColor: 'blue'}} />
        </Stack.Item>
        <Stack.Item>
          <View style={{width: 20, height: 20, backgroundColor: 'red'}} />
        </Stack.Item>
        <Stack.Item>
          <View style={{width: 20, height: 20, backgroundColor: 'green'}} />
        </Stack.Item>
      </Stack>
      <Stack gap={20} horizontal>
        <Text>A</Text>
        <Text>B</Text>
        <Text>C</Text>
      </Stack>
    </SafeAreaView>
  );
}

Actual behavior

Stack elements render vertically with incorrect gapping:

Expected behavior

Stack elements render horizontally

[Maruf Sharifi]

@Saadnajmi, I am interested in contributing to this Repo, please assign this issue to me.

[Saad Najmi]

@Saadnajmi, I am interested in contributing to this Repo, please assign this issue to me.

That's great! However, with the release of React Native and the new Flexbox gap style prop, Stack is actually no longer necessary, and can probably be deprecated 😅

[Nick Hodapp]

Stack was never strictly "necessary". But you'll still need a container to apply your Flexbox gap style to, and I don't see why you wouldn't do that via Stack.