Styles as an array not working

[Bufib]

Description

Expo send me here. Please check "components" - > "QuestionLinksFirst" for the code.

Problem:

As soon as I change this line: <Pressable style={styles.element}>
to this <Pressable style={[styles.element, {backgroundColor: category.backgroundColor}]}>
or even this line <Pressable style={[styles.element]}>

the styles.element don't get applied anymore.

The images show the following:
1: {styles.element}
2: {[styles.element]}
3: {[styles.element, {backgroundColor: category.backgroundColor}]}

Full code:

import React from "react";
import { StyleSheet } from "react-native";
import { ThemedView } from "./ThemedView";
import { ThemedText } from "./ThemedText";
import { Link } from "expo-router";
import { Pressable } from "react-native";
import { Image } from "expo-image";
import { useColorScheme } from "react-native";
import { coustomTheme } from "./coustomTheme";
import { SafeAreaView } from "react-native-safe-area-context";
import { View, Text } from "react-native";

export default function QuestionLinksFirst() {
  const colorScheme = useColorScheme();
  const themeStyles = coustomTheme();

  const categories = [
    {
      name: "Rechtsfragen",
      image: require("@/assets/images/rechtsfragen.png"),
      backgroundColor: "red",
    },
    {
      name: "Quran",
      image: require("@/assets/images/quran.png"),
      backgroundColor: "blue",
    },
    {
      name: "Historie",
      image: require("@/assets/images/historie.png"),
      backgroundColor: "green",
    },
    {
      name: "Glaubensfragen",
      image: require("@/assets/images/glaubensfragen.png"),
      backgroundColor: "yellow",
    },
  ];

  return (
    <ThemedView style={styles.container}>
      {categories.map((category, index) => (
        <Link
          key={index}
          href={
            {
              pathname: "",
              params: {
                category: category.name,
              },
            } as any
          }
          asChild
        >
          <Pressable style={[styles.element, {backgroundColor: category.backgroundColor}]}>{/* Problem here */} 
            <Image
              style={styles.elementIcon}
              source={category.image}
              contentFit="contain"
            />
            <Text style={styles.elementText}>{category.name}</Text>
          </Pressable>
        </Link>
      ))}
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "center",
    alignContent: "center",
    gap: 20,
  },

  element: {
    flexDirection: "column",
    gap: 10,
    justifyContent: "center",
    alignItems: "center",
    width: "45%",
    height: "30%",
    borderRadius: 30,
    borderWidth: 2,
    backgroundColor: "green",
    shadowOffset: {width: -3.5, height: 4},
    shadowOpacity: 0.5,
    shadowRadius: 3,

  },
  elementIcon: {
    width: "80%",
    height: "auto",
    aspectRatio: 1.5,
    alignSelf: "center",
  },

  elementText: {
    fontSize: 15,
    fontWeight: "bold",
    padding: 5,
    textAlign: "center",
    paddingHorizontal: 5,
  },
});
```

### Steps to reproduce

Change the code in the presssable to the following:
1: **{styles.element}**
2:  **{[styles.element]}**
3: **{[styles.element, {backgroundColor: category.backgroundColor}]}**

2 and 3 stop styles.element from working 

### React Native Version

0.76.5

### Affected Platforms

Runtime - iOS

### Areas

JSI - Javascript Interface

### Output of `npx react-native info`

```text
expo-env-info 1.2.1 environment info:
     System:
       OS: macOS 14.6.1
       Shell: 5.9 - /bin/zsh
     Binaries:
       Node: 23.3.0 - /opt/homebrew/bin/node
       npm: 11.0.0 - ~/.npm-global/bin/npm
       Watchman: 2024.12.02.00 - /opt/homebrew/bin/watchman
     Managers:
       CocoaPods: 1.16.2 - /opt/homebrew/bin/pod
     SDKs:
       iOS SDK:
         Platforms: DriverKit 24.0, iOS 18.0, macOS 15.0, tvOS 18.0, visionOS 2.0, watchOS 11.0
     IDEs:
       Android Studio: 2022.3 AI-223.8836.35.2231.10811636
       Xcode: 16.0/16A242d - /usr/bin/xcodebuild
     npmPackages:
       expo: ~52.0.19 => 52.0.19 
       expo-router: ~4.0.13 => 4.0.13 
       react: 18.3.1 => 18.3.1 
       react-dom: 18.3.1 => 18.3.1 
       react-native: 0.76.5 => 0.76.5 
       react-native-web: ~0.19.13 => 0.19.13 
     npmGlobalPackages:
       eas-cli: 14.1.0
```


### Stacktrace or Logs

```text
Error in Ui
```


### Reproducer

https://github.com/Bufib/expo-problem-styles

### Screenshots and Videos

![Simulator Screenshot - iPhone 16 Pro Max - 2024-12-18 at 20 11 21](https://github.com/user-attachments/assets/bb7b95d7-5982-4599-8c96-dddf0ae55040)
![Simulator Screenshot - iPhone 16 Pro Max - 2024-12-18 at 20 11 38](https://github.com/user-attachments/assets/52c4662f-0126-4c93-9729-ba542d6d8ebd)
![Simulator Screenshot - iPhone 16 Pro Max - 2024-12-18 at 20 11 29](https://github.com/user-attachments/assets/a4d51798-80f0-4056-a9de-8d14fa2dcc1b)

[Bufib]

[cipolleschi]

@Bufib can you follow exactly this template for the issues? There are several information missing that would be helpful for debugging the issue.

Also, can you create a reproducer with this template, that does not use Expo?

[Bufib]

@Bufib can you follow exactly this template for the issues? There are several information missing that would be helpful for debugging the issue.

Also, can you create a reproducer with this template, that does not use Expo?

Here is the missing information. I tried to create a reproducer without expo but I don't know how to work with pure react native since I'm a beginner, sorry!

With expo:

System:
  OS: macOS 14.6.1
  CPU: (8) arm64 Apple M2
  Memory: 1.29 GB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 23.3.0
    path: /opt/homebrew/bin/node
  Yarn: Not Found
  npm:
    version: 11.0.0
    path: ~/.npm-global/bin/npm
  Watchman:
    version: 2024.12.02.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.0
      - iOS 18.0
      - macOS 15.0
      - tvOS 18.0
      - visionOS 2.0
      - watchOS 11.0
  Android SDK: Not Found
IDEs:
  Android Studio: 2022.3 AI-223.8836.35.2231.10811636
  Xcode:
    version: 16.0/16A242d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 19.0.2
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.5
    wanted: 0.76.5
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

[shubhamguptadream11]

Since the code snippet you shared above had other files import which are not provided.

So, I tried to reproduce this in bare react native project using rn-tester app in react-native repo itself.

It's not reproducible at my end. Using latest RN version (0.77.0).

Here is the code snippet I tried

import React from "react";
import { StyleSheet } from "react-native";
import { Pressable } from "react-native";
import { View, Text, Link,Image } from "react-native";

export default function RNTesterApp() {

  const categories = [
    {
      name: "Rechtsfragen",
      image: require("/Users/shubhamgupta/D11Repo/dream-sports-lab/react-native/packages/rn-tester/js/assets/superlike.png"),
      backgroundColor: "red",
    },
    {
      name: "Quran",
      image: require("/Users/shubhamgupta/D11Repo/dream-sports-lab/react-native/packages/rn-tester/js/assets/superlike.png"),
      backgroundColor: "blue",
    },
    {
      name: "Historie",
      image: require("/Users/shubhamgupta/D11Repo/dream-sports-lab/react-native/packages/rn-tester/js/assets/superlike.png"),
      backgroundColor: "green",
    },
    {
      name: "Glaubensfragen",
      image: require("/Users/shubhamgupta/D11Repo/dream-sports-lab/react-native/packages/rn-tester/js/assets/superlike.png"),
      backgroundColor: "yellow",
    },
  ];

  return (
    <View style={styles.container}>
      {categories.map((category, index) => (
          <Pressable style={[styles.element, {backgroundColor: category.backgroundColor}]}>{/* Problem here */} 
            <Image
              style={styles.elementIcon}
              source={category.image}
              contentFit="contain"
            />
          </Pressable>
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "center",
    alignContent: "center",
    gap: 20,
  },

  element: {
    flexDirection: "column",
    gap: 10,
    justifyContent: "center",
    alignItems: "center",
    width: "45%",
    height: "30%",
    borderRadius: 30,
    borderWidth: 2,
    backgroundColor: "green",
    shadowOffset: {width: -3.5, height: 4},
    shadowOpacity: 0.5,
    shadowRadius: 3,

  },
  elementIcon: {
    width: "80%",
    height: "auto",
    aspectRatio: 1.5,
    alignSelf: "center",
  },

  elementText: {
    fontSize: 15,
    fontWeight: "bold",
    padding: 5,
    textAlign: "center",
    paddingHorizontal: 5,
  },
});

@Bufib If you have a complete repro. Please share a repro link, so that we can try that out.

[react-native-bot]

Warning

Missing reproducer: We could not detect a reproducible example in your issue report. Please provide either:

• If your bug is UI related: a Snack
• If your bug is build/upgrade related: a project using our Reproducer Template
• Otherwise send us a Pull Request with the RNTesterPlayground.js edited to reproduce your bug.

[cipolleschi]

Also, if the issue is happening in an expo app, I suggest you to open an issue in the Expo repository.

[Bufib]

Edit: It has to do with

    <Link
          key={index}
          href={
            {
              pathname: "",
              params: {
                category: category.name,
              },
            } as any
          }
          asChild
        >

As soon as I remove asChild, it works! See images in comment beneath!

@cipolleschi @shubhamguptadream11

I have this reproducer. https://github.com/Bufib/expo-problem-styles

It uses expo since I'm new and can't handle bare react native. Expo told me it must be a react native issue, since they don't do anything which could change the styles.
The important files are "components/QuestionLinksFirst" and the "(tabs)/index". Maybe something is wrong with the "react-native-tab-view".

The important code:

import React from "react";
import { StyleSheet } from "react-native";
import { ThemedView } from "./ThemedView";
import { ThemedText } from "./ThemedText";
import { Link } from "expo-router";
import { Pressable } from "react-native";
import { Image } from "expo-image";
import { useColorScheme } from "react-native";
import { coustomTheme } from "./coustomTheme";
import { SafeAreaView } from "react-native-safe-area-context";
import { View, Text } from "react-native";

export default function QuestionLinksFirst() {
  const colorScheme = useColorScheme();
  const themeStyles = coustomTheme();

  const categories = [
    {
      name: "Rechtsfragen",
      image: require("@/assets/images/rechtsfragen.png"),
      backgroundColor: "red",
    },
    {
      name: "Quran",
      image: require("@/assets/images/quran.png"),
      backgroundColor: "blue",
    },
    {
      name: "Historie",
      image: require("@/assets/images/historie.png"),
      backgroundColor: "green",
    },
    {
      name: "Glaubensfragen",
      image: require("@/assets/images/glaubensfragen.png"),
      backgroundColor: "yellow",
    },
  ];

  return (
    <ThemedView style={styles.container}>
      {categories.map((category, index) => (
        <Link
          key={index}
          href={
            {
              pathname: "",
              params: {
                category: category.name,
              },
            } as any
          }
          asChild
        >
          <Pressable style={[styles.element, {backgroundColor: category.backgroundColor}]}>{/* Problem here */} 
            <Image
              style={styles.elementIcon}
              source={category.image}
              contentFit="contain"
            />
            <Text style={styles.elementText}>{category.name}</Text>
          </Pressable>
        </Link>
      ))}
    </ThemedView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "center",
    alignContent: "center",
    gap: 20,
  },

  element: {
    flexDirection: "column",
    gap: 10,
    justifyContent: "center",
    alignItems: "center",
    width: "45%",
    height: "30%",
    borderRadius: 30,
    borderWidth: 2,
    backgroundColor: "green",
    shadowOffset: {width: -3.5, height: 4},
    shadowOpacity: 0.5,
    shadowRadius: 3,

  },

  elementIcon: {
    width: "80%",
    height: "auto",
    aspectRatio: 1.5,
    alignSelf: "center",
  },

  elementText: {
    fontSize: 15,
    fontWeight: "bold",
    padding: 5,
    textAlign: "center",
    paddingHorizontal: 5,
  },
});

and

import * as React from "react";
import { View, useWindowDimensions, Text, StyleSheet } from "react-native";
import {
  TabView,
  SceneMap,
  TabBar,
  SceneRendererProps,
} from "react-native-tab-view";
import { ThemedText } from "@/components/ThemedText";
import { SafeAreaView } from "react-native-safe-area-context";
import { ThemedView } from "@/components/ThemedView";
import { Colors } from "@/constants/Colors";
import QuestionLinksFirst from "@/components/QuestionLinksFirst";
import QuestionLinksSeconde from "@/components/QuestionLinksSeconde";
import { useState } from "react";
import { useColorScheme } from "react-native";

export default function index() {
  const layout = useWindowDimensions();
  const [index, setIndex] = useState(0);

  // Custom renderScene function
  const renderScene = ({ route }: any) => {
    switch (route.key) {
      case "first":
        return <QuestionLinksFirst />;
      case "second":
        return <QuestionLinksSeconde />;
      default:
        return null;
    }
  };

  const routes = [
    { key: "first", title: "" },
    { key: "second", title: "" },
  ];

  const colorScheme = useColorScheme() ?? "light";

  // Coustome settings for top bar
  const renderTabBar = (props: any) => (
    <TabBar
      {...props}
      indicatorStyle={{
        backgroundColor: Colors[colorScheme].indicatorStyleTopBar, // Tap bar swipe-line
      }}
      style={{ backgroundColor: Colors[colorScheme].backgroundColorTopBar }} // Tab bar background color
    />
  );

  return (
    <SafeAreaView edges={["top"]} style={styles.container}>
      <ThemedView style={styles.headerContainer}>
        <ThemedText>Header</ThemedText>
      </ThemedView>
      <ThemedView style={styles.swipeContainer}>
        <TabView
          navigationState={{ index, routes }}
          renderScene={renderScene}
          onIndexChange={setIndex}
          initialLayout={{ width: layout.width }}
          renderTabBar={renderTabBar} // Coustome style
          style={styles.swipeList}
        />
      </ThemedView>
    </SafeAreaView>
  );
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  headerContainer: {
    flex: 1,
  },

  swipeContainer: {
    flex: 4,
  },
  swipeList: {
    flex: 1,
    backgroundColor: "red",
  },
  renderScene: {
    flex: 1,
  },
});

[Bufib]

@cipolleschi @shubhamguptadream11

1. Without "asChild" in the link
2. With "asChild" in the link

[cipolleschi]

This is an issue for Expo. The <Link> component is part of Expo Router and asChild is a property of the <Link> component.

This is not an issue that is caused by React Native core, on the surface. Please, open the issue in the Expo repo (https://github.com/expo/expo) and they will investigate it and provide a fix for it if needed, or they will come back to us if the root cause is in core.

[EvanBacon]

related expo/expo#33745

[Bufib]

Thanks! @cipolleschi @EvanBacon