react-nativeexpoantd

problem in react native ( Exop ) won't work with antd


i am working on react-native with Expo and want to

import { Select } from "antd";

the code is like this :

import { useState } from "react";
import { Select } from "antd";

const App = () => {
  const [openSelect, setOpenSelect] = useState(false);

  const options = [
    { value: "country1", label: "Country1" },
    { value: "country2", label: "Country2" },
    { value: "country3", label: "Country3" },
    { value: "country4", label: "Country5" }
  ];
  return (
    <>
      <Select
        mode="multiple"
        allowClear
        style={{ width: "100%" }}
        placeholder="Select countries"
        options={options}
        size="large"
        open={openSelect}
        onDropdownVisibleChange={() => setOpenSelect(true)}
        onChange={() => setOpenSelect(false)}
      />
    </>
  );
};
export default App;

every time i imported from 'antd' i have an error message in Expo go ( on real phone )

Invariant Violation: View config getter callback for component `input` must be a function (received `undefined`). Make sure to start component names with a capital letter

i think that there is something Not compatible with antd , so this is my package.json

{
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "1.23.1",
    "@react-native-community/datetimepicker": "8.0.1",
    "@react-native-community/picker": "1.6.0",
    "@react-navigation/drawer": "^6.6.15",
    "@react-navigation/material-bottom-tabs": "^5.2.16",
    "@react-navigation/native": "^6.1.6",
    "@react-navigation/stack": "^6.3.29",
    "@types/react-native-snap-carousel": "^3.8.11",
    "antd": "^5.21.6",
    "axios": "^1.7.2",
    "expo": "~51.0.38",
    "expo-application": "~5.9.1",
    "expo-build-properties": "~0.12.5",
    "expo-camera": "~15.0.16",
    "expo-chart-kit": "^1.2.4",
    "expo-constants": "^16.0.2",
    "expo-device": "^6.0.2",
    "expo-font": "~12.0.10",
    "expo-image-picker": "~15.0.7",
    "expo-insights": "~0.7.0",
    "expo-linear-gradient": "~13.0.2",
    "expo-localization": "~15.0.3",
    "expo-location": "^17.0.1",
    "expo-notifications": "~0.28.19",
    "expo-random": "~14.0.1",
    "expo-splash-screen": "~0.27.6",
    "expo-status-bar": "~1.12.1",
    "expo-updates": "~0.25.27",
    "i18n-js": "^3.7.1",
    "moment": "^2.29.1",
    "react": "18.2.0",
    "react-devtools": "^4.8.2",
    "react-dom": "18.2.0",
    "react-native": "0.74.5",
    "react-native-dots-pagination": "^0.3.1",
    "react-native-element-dropdown": "^2.12.0",
    "react-native-fbsdk-next": "^13.0.0",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-loading-spinner-overlay": "^3.0.1",
    "react-native-modal": "^13.0.1",
    "react-native-modal-datetime-picker": "^9.0.0",
    "react-native-modal-selector": "^2.0.3",
    "react-native-options-menu": "^2.0.2",
    "react-native-pager-view": "6.3.0",
    "react-native-paper": "^5.12.3",
    "react-native-reanimated": "~3.10.1",
    "react-native-safe-area-context": "4.10.5",
    "react-native-snap-carousel": "github:capelski/react-native-snap-carousel",
    "react-native-svg": "15.2.0",
    "react-native-svg-charts": "^5.4.0",
    "react-native-vector-icons": "^9.0.0",
    "react-native-webview": "13.8.6",
    "reanimated-bottom-sheet": "^1.0.0-alpha.22",
    "reanimated-color-picker": "^3.0.4",
    "typescript": "~5.3.3"
  },
  "devDependencies": {
    "@babel/core": "^7.19.3",
    "babel-preset-expo": "~11.0.0"
  },
  "private": true,
  "name": "app1",
  "version": "1.0.0",
  "description": "some",
  "keywords": [
    "marketing"
  ],
  "author": "some",
  "license": "MIT"
}

i tried a lot to resolve this issue, till now with no luck

i searched a lot, but no luck till now


Solution

  • This library is for web applications. Please consider using this ant design library for react native https://rn.mobile.ant.design/docs/react/introduce