Expo Go vs iOS Simulator 'View' component displays inverted flex direction

[bennettfrazier]

When I am importing View from Dripsy into a component, I am getting an unexpected behavior for flex. My row's are being reversed (flexDirection: row-reverse) across multiple components when comparing the Expo Go app to iOS simulator. Even the nested <Switch> component is being reversed as well. See the native Switch component in screenshots (at bottom).

I don't have any internationalization wrapping, and the app was set up using the latest Expo-CLI, using Expo SDK 45.0.0, managed workflow.

I am using exactly as the Dripsy docs specify, and wondering where I am running into an issue?

App dependencies:

"@react-navigation/bottom-tabs": "^6.3.2",
"@react-navigation/native": "^6.0.11",
"@react-navigation/native-stack": "^6.7.0",
"dripsy": "^3.6.0",
"expo": "~45.0.0",
"expo-status-bar": "~1.3.0",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-hook-form": "^7.34.0",
"react-native": "0.68.2",
"react-native-safe-area-context": "4.2.4",
"react-native-screens": "~3.11.1",
"react-native-svg": "12.3.0",
"react-native-web": "0.17.7"

// Import of View from Dripsy inverts flexDirection to 'row-reverse' on Expo Go, but normal on iOS simulator
import React, { useState } from "react";
import { Switch } from "react-native";
import { Text, View, useDripsyTheme } from 'dripsy';

<View sx={{
    flexDirection: 'row',
    flexWrap: "wrap",
    justifyContent: 'space-between',
    flexDirection: "row",
    py: 10,
    ...sx // no props are passed
}}>

Digging deeper into the components src, I see that there is a Flex component that I also tried, which is also defaulting to the same inverted behavior when testing.

I have checked flipping <DripsyProvider> on the App.js level to test being both outside and nested inside the wrapping <NavigationContainer> (from '@react-navigation/native').

I thought it'd be a setting in my phone... but I tried to replicate in snacks and don't seem to have any issues... https://snack.expo.dev/@bfrazier/dripsy-row-flex-reverse-issue

Any ideas what this could be from? @nandorojo

[nandorojo]

Just to clarify, when you do it in a snack you have no issues?

[nandorojo]

Even the nested <Switch> component is being reversed as well.

Sounds like this isn't a Dripsy issue? Do you have right-to-left enabled or something?

[bennettfrazier]

@nandorojo Yes, the Snack had no issues. I also searched the codebase for any rtl being enabled or forced, and there was nothing configured.

I was able to get it fixed, by upgrading package versions. Discovered this after trying to pull the snack to run Simulator locally, and did a yarn upgrade on the project... maybe the version of react-native or expo had a bug with a right-to-left issue? 🤷🏻

Here's what I changed:

[nandorojo]

hmm weird! glad it works now though