Skip to content

Button Invariant Violation: The title prop of a Button must be a string #229

@dfftech

Description

@dfftech

Before submitting a new issue

  • I tested using the latest version of the library, as the bug might be already fixed.
  • I tested using a supported version of react native.
  • I checked for possible duplicate issues, with possible answers.

nodemodules:
"@tailwindcss/postcss": "^4.1.13",
"expo": "^54.0.0",
"expo-status-bar": "~3.0.8",
"nativewind": "preview",
"postcss": "^8.5.6",
"react": "19.1.0",
"react-native": "0.81.5",
"react-native-css": "latest",
"react-native-reanimated": "~4.1.1",
"react-native-safe-area-context": "~5.6.0",
"react-native-worklets": "0.5.1"

Library version

3.0.1

Environment info

console.js:661 Invariant Violation: The title prop of a Button must be a string
    at invariant (http://192.168.0.247:8082/node_modules/expo/AppEntry.bundle//&platform=ios&&transform.routerRoot=app&unstable_transformProfile=hermes-stable:10402:26)
    at Button (http://192.168.0.247:8082/node_modules/expo/AppEntry.bundle//&platform=ios&…transform.routerRoot=app&unstable_transformProfile=hermes-stable:151063:27)
    at performWorkOnRootViaSchedulerTask (http://192.168.0.247:8082/node_modules/expo/AppEntry.bundle//&platform=ios&&transform.routerRoot=app&unstable_transformProfile=hermes-stable:97713:24) Error Stack:
    at useNativeCss (192.168.0.247:8082/n…mes-stable:18586:50)
    at useCssElement (192.168.0.247:8082/n…mes-stable:16663:50)
    at Button (192.168.0.247:8082/n…es-stable:161748:46)

Steps to reproduce

import react native button, it is throwing error.

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

    export const EditScreenInfo = ({ path }: { path: string }) => {
      const title = 'Open up the code for this screen:';
      const description =
        'Change any of the text, save the file, and your app will automatically update.';

      return (
        <View>
          <View className={styles.getStartedContainer}>
            <Text className={styles.getStartedText}>{title}</Text>
            <View className={styles.codeHighlightContainer + styles.homeScreenFilename}>
              <Text>{path}</Text>
            </View>
            <Text className={styles.getStartedText}>{description}</Text>
            <Button title='test' onPress={() => {}} />
          </View>
        </View>
      );
    };

    const styles = {
      codeHighlightContainer: `rounded-md px-1`,
      getStartedContainer: `items-center mx-12`,
      getStartedText: `text-lg leading-6 text-center`,
      helpContainer: `items-center mx-5 mt-4`,
      helpLink: `py-4`,
      helpLinkText: `text-center`,
      homeScreenFilename: `my-2`,
    };

Reproducible example repository

npx rn-new@next --nativewind

Metadata

Metadata

Assignees

Labels

bugSomething isn't working

Type

No type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions