Button Component is undefined

[zh925]

Description

I import Button and render it, has an Error.

 Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Then I console.log(Button), it was an undefined in my logs.

Related to

• [x] Components
• [ ] Demo
• [ ] Docs
• [ ] Typings

Steps to reproduce

import { View, Button } from 'react-native-ui-lib'

export default function MyScreen() {
    return (
        <View>
            <Button label="click" />
        </View>
    )
}

Expected behavior

render the button

Actual behavior

throw an error

More Info

Code snippet

import { View, Button } from 'react-native-ui-lib'

export default function MyScreen() {
    return (
        <View>
            <Button label="click" />
        </View>
    )
}

Screenshots/Video

Environment

• React Native version: 0.72.7
• React Native UI Lib version: 7.12.0

it was same on [email protected]

Affected platforms

• [x] Android
• [ ] iOS
• [ ] Web

[JacobWennebro]

I have the same problem on iOS

[PavelPolyakov]

~Same thing, an example from the documentation: https://wix.github.io/react-native-ui-lib/docs/getting-started/usage does not work. For View, Text and TextField it does, but fails on Button.~

upd.

To me it helped to make sure that react-native-reanimated is installed following this guide: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/

Specifically, run npx expo start -c afterwards

[andrewvmail]

Running into the same issue

[zp342519261]

I had the same problem，It's not just Button, there are other components that have this problem as well

[alvaromirandamita]

I updated the libraries recommended by Expo, and it worked.

"dependencies": { "expo": "~50.0.6", "expo-status-bar": "~1.11.1", "react": "18.2.0", "react-native": "0.73.4", "react-native-calendars": "^1.1303.0", "react-native-gesture-handler": "~2.14.0", "react-native-reanimated": "~3.6.2", "react-native-ui-lib": "^7.16.0" }, "devDependencies": { "@babel/core": "^7.20.0" },

[AymenObba]

same issue here

[jami-yashwanth]

I updated the libraries recommended by Expo, and it worked.

"dependencies": { "expo": "~50.0.6", "expo-status-bar": "~1.11.1", "react": "18.2.0", "react-native": "0.73.4", "react-native-calendars": "^1.1303.0", "react-native-gesture-handler": "~2.14.0", "react-native-reanimated": "~3.6.2", "react-native-ui-lib": "^7.16.0" }, "devDependencies": { "@babel/core": "^7.20.0" },

Updated libraries...Working!!

[paulamurta]

did anyone came up with any solutions? dealing with the same issue when trying to use <TextField>

[mateusz-]

I had to add react-native-reanimated Babel plugin to babel.config.js:

  module.exports = {
    presets: [
      ... // don't add it here :)
    ],
    plugins: [
      ...
      'react-native-reanimated/plugin',
    ],
  };

https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/#step-2-add-reanimateds-babel-plugin

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.