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
This library is for web applications. Please consider using this ant design library for react native https://rn.mobile.ant.design/docs/react/introduce