Issue with the Select component. #4122
Description
The Select item seems to have an issue with a prop called accessibilityDescribedBy.
To Reproduce
Create an expo project, and install the dependencies, with:
expo init project-name
cd project-name
yarn add native-base styled-components styled-system
expo install react-native-svg
expo install react-native-safe-area-context
Then add a select component, my exact App.js is:
import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import {
NativeBaseProvider, Box,
Select,
VStack,
CheckIcon,
Center,
} from "native-base";
export const Example = () => {
let [service, setService] = React.useState("")
return (
<VStack alignItems="center" space={4}>
<Select
selectedValue={service}
minWidth="200"
accessibilityLabel="Choose Service"
placeholder="Choose Service"
_selectedItem={{
bg: "teal.600",
endIcon: <CheckIcon size="5" />,
}}
mt={1}
onValueChange={(itemValue) => setService(itemValue)}
>
<Select.Item label="UX Research" value="ux" />
<Select.Item label="Web Development" value="web" />
<Select.Item label="Cross Platform Development" value="cross" />
<Select.Item label="UI Designing" value="ui" />
<Select.Item label="Backend Development" value="backend" />
</Select>
</VStack>
)
}
export default function App() {
return (
<NativeBaseProvider>
<View style={styles.container}>
<Example />
<StatusBar style="auto" />
</View>
</NativeBaseProvider>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Run the app with yarn web, and the error should be in console.
CodeSandBox/Snack link
I couldn't replicate this in snack.expo.dev, here. But the issue shows in my development machine :(
Screenshots
Start of the console:
End of the console:
Platform
- NativeBase version [3.1] and [3.2]
- Device: [web]
- OS: [Ubuntu 20.04]
- Browser [chromium]
- Browser version [93.0.4577.82]
- React Native version [0.65]
- Expo sdk version [42]
- node [14.16.6]
- yarn [1.22.11]
Additional information
As I said, it only shows in my local machine, but I provided the exact commands that I used to create the project, am I missing something?
Full console log here:
log.js:24 [HMR] Waiting for update signal from WDS...
react-dom.development.js:24994 Download the React DevTools for a better development experience: https://fb.me/react-devtools
index.js:1 Warning: forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter?
console.<computed> @ index.js:1
index.js:1 Warning: forwardRef render functions accept exactly two parameters: props and ref. Did you forget to use the ref parameter?
console.<computed> @ index.js:1
index.js:91 Running application "main" with appParams:
Object
Development-level warnings: ON.
Performance optimizations: OFF.
index.js:1 Warning: React does not recognize the `nativeID` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `nativeid` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in select (at Select.tsx:158)
in div (created by View)
in View (at styled.tsx:52)
in ForwardRef (at Box/index.tsx:93)
in ForwardRef(Box)
in ForwardRef(Box) (at Select.tsx:157)
in div (created by View)
in View (at styled.tsx:52)
in ForwardRef (at Box/index.tsx:93)
in ForwardRef(Box)
in ForwardRef(Box) (at Select.tsx:148)
in ForwardRef(Select)
in ForwardRef(Select) (at App.js:17)
in div (created by View)
in View (at styled.tsx:52)
in ForwardRef (at Box/index.tsx:93)
in ForwardRef(Box)
in ForwardRef(Box) (at Stack.tsx:53)
in ForwardRef(Stack)
in ForwardRef(Stack) (at VStack.tsx:22)
in ForwardRef(VStack)
in ForwardRef(VStack) (at App.js:16)
in Example (at App.js:43)
in div (created by View)
in View (at App.js:42)
in SSRProvider (at NativeBaseProvider.tsx:93)
in ToastProvider (at NativeBaseProvider.tsx:91)
in PortalProvider (at NativeBaseProvider.tsx:90)
in HybridProvider (at NativeBaseProvider.tsx:86)
in div (created by View)
in View (created by NativeSafeAreaView)
in NativeSafeAreaView (created by SafeAreaProvider)
in SafeAreaProvider (at NativeBaseProvider.tsx:81)
in NativeBaseConfigProviderProvider (at NativeBaseProvider.tsx:76)
in ThemeProvider (at NativeBaseProvider.tsx:75)
in NativeBaseProvider (at App.js:41)
in App (created by ExpoRootComponent)
in ExpoRootComponent
in div (created by View)
in View (created by AppContainer)
in div (created by View)
in View (created by AppContainer)
in AppContainer
console.<computed> @ index.js:1
index.js:1 Warning: React does not recognize the `accessibilityInvalid` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `accessibilityinvalid` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in select (at Select.tsx:158)
in div (created by View)
in View (at styled.tsx:52)
in ForwardRef (at Box/index.tsx:93)
in ForwardRef(Box)
in ForwardRef(Box) (at Select.tsx:157)
in div (created by View)
in View (at styled.tsx:52)
in ForwardRef (at Box/index.tsx:93)
in ForwardRef(Box)
in ForwardRef(Box) (at Select.tsx:148)
in ForwardRef(Select)
in ForwardRef(Select) (at App.js:17)
in div (created by View)
in View (at styled.tsx:52)
in ForwardRef (at Box/index.tsx:93)
in ForwardRef(Box)
in ForwardRef(Box) (at Stack.tsx:53)
in ForwardRef(Stack)
in ForwardRef(Stack) (at VStack.tsx:22)
in ForwardRef(VStack)
in ForwardRef(VStack) (at App.js:16)
in Example (at App.js:43)
in div (created by View)
in View (at App.js:42)
in SSRProvider (at NativeBaseProvider.tsx:93)
in ToastProvider (at NativeBaseProvider.tsx:91)
in PortalProvider (at NativeBaseProvider.tsx:90)
in HybridProvider (at NativeBaseProvider.tsx:86)
in div (created by View)
in View (created by NativeSafeAreaView)
in NativeSafeAreaView (created by SafeAreaProvider)
in SafeAreaProvider (at NativeBaseProvider.tsx:81)
in NativeBaseConfigProviderProvider (at NativeBaseProvider.tsx:76)
in ThemeProvider (at NativeBaseProvider.tsx:75)
in NativeBaseProvider (at App.js:41)
in App (created by ExpoRootComponent)
in ExpoRootComponent
in div (created by View)
in View (created by AppContainer)
in div (created by View)
in View (created by AppContainer)
in AppContainer
console.<computed> @ index.js:1
index.js:1 Warning: React does not recognize the `accessibilityRequired` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `accessibilityrequired` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in select (at Select.tsx:158)
in div (created by View)
in View (at styled.tsx:52)
in ForwardRef (at Box/index.tsx:93)
in ForwardRef(Box)
in ForwardRef(Box) (at Select.tsx:157)
in div (created by View)
in View (at styled.tsx:52)
in ForwardRef (at Box/index.tsx:93)
in ForwardRef(Box)
in ForwardRef(Box) (at Select.tsx:148)
in ForwardRef(Select)
in ForwardRef(Select) (at App.js:17)
in div (created by View)
in View (at styled.tsx:52)
in ForwardRef (at Box/index.tsx:93)
in ForwardRef(Box)
in ForwardRef(Box) (at Stack.tsx:53)
in ForwardRef(Stack)
in ForwardRef(Stack) (at VStack.tsx:22)
in ForwardRef(VStack)
in ForwardRef(VStack) (at App.js:16)
in Example (at App.js:43)
in div (created by View)
in View (at App.js:42)
in SSRProvider (at NativeBaseProvider.tsx:93)
in ToastProvider (at NativeBaseProvider.tsx:91)
in PortalProvider (at NativeBaseProvider.tsx:90)
in HybridProvider (at NativeBaseProvider.tsx:86)
in div (created by View)
in View (created by NativeSafeAreaView)
in NativeSafeAreaView (created by SafeAreaProvider)
in SafeAreaProvider (at NativeBaseProvider.tsx:81)
in NativeBaseConfigProviderProvider (at NativeBaseProvider.tsx:76)
in ThemeProvider (at NativeBaseProvider.tsx:75)
in NativeBaseProvider (at App.js:41)
in App (created by ExpoRootComponent)
in ExpoRootComponent
in div (created by View)
in View (created by AppContainer)
in div (created by View)
in View (created by AppContainer)
in AppContainer
console.<computed> @ index.js:1
index.js:1 Warning: React does not recognize the `accessibilityReadOnly` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `accessibilityreadonly` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in select (at Select.tsx:158)
in div (created by View)
in View (at styled.tsx:52)
in ForwardRef (at Box/index.tsx:93)
in ForwardRef(Box)
in ForwardRef(Box) (at Select.tsx:157)
in div (created by View)
in View (at styled.tsx:52)
in ForwardRef (at Box/index.tsx:93)
in ForwardRef(Box)
in ForwardRef(Box) (at Select.tsx:148)
in ForwardRef(Select)
in ForwardRef(Select) (at App.js:17)
in div (created by View)
in View (at styled.tsx:52)
in ForwardRef (at Box/index.tsx:93)
in ForwardRef(Box)
in ForwardRef(Box) (at Stack.tsx:53)
in ForwardRef(Stack)
in ForwardRef(Stack) (at VStack.tsx:22)
in ForwardRef(VStack)
in ForwardRef(VStack) (at App.js:16)
in Example (at App.js:43)
in div (created by View)
in View (at App.js:42)
in SSRProvider (at NativeBaseProvider.tsx:93)
in ToastProvider (at NativeBaseProvider.tsx:91)
in PortalProvider (at NativeBaseProvider.tsx:90)
in HybridProvider (at NativeBaseProvider.tsx:86)
in div (created by View)
in View (created by NativeSafeAreaView)
in NativeSafeAreaView (created by SafeAreaProvider)
in SafeAreaProvider (at NativeBaseProvider.tsx:81)
in NativeBaseConfigProviderProvider (at NativeBaseProvider.tsx:76)
in ThemeProvider (at NativeBaseProvider.tsx:75)
in NativeBaseProvider (at App.js:41)
in App (created by ExpoRootComponent)
in ExpoRootComponent
in div (created by View)
in View (created by AppContainer)
in div (created by View)
in View (created by AppContainer)
in AppContainer
console.<computed> @ index.js:1
index.js:1 Warning: React does not recognize the `accessibilityDescribedBy` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `accessibilitydescribedby` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in select (at Select.tsx:158)
in div (created by View)
in View (at styled.tsx:52)
in ForwardRef (at Box/index.tsx:93)
in ForwardRef(Box)
in ForwardRef(Box) (at Select.tsx:157)
in div (created by View)
in View (at styled.tsx:52)
in ForwardRef (at Box/index.tsx:93)
in ForwardRef(Box)
in ForwardRef(Box) (at Select.tsx:148)
in ForwardRef(Select)
in ForwardRef(Select) (at App.js:17)
in div (created by View)
in View (at styled.tsx:52)
in ForwardRef (at Box/index.tsx:93)
in ForwardRef(Box)
in ForwardRef(Box) (at Stack.tsx:53)
in ForwardRef(Stack)
in ForwardRef(Stack) (at VStack.tsx:22)
in ForwardRef(VStack)
in ForwardRef(VStack) (at App.js:16)
in Example (at App.js:43)
in div (created by View)
in View (at App.js:42)
in SSRProvider (at NativeBaseProvider.tsx:93)
in ToastProvider (at NativeBaseProvider.tsx:91)
in PortalProvider (at NativeBaseProvider.tsx:90)
in HybridProvider (at NativeBaseProvider.tsx:86)
in div (created by View)
in View (created by NativeSafeAreaView)
in NativeSafeAreaView (created by SafeAreaProvider)
in SafeAreaProvider (at NativeBaseProvider.tsx:81)
in NativeBaseConfigProviderProvider (at NativeBaseProvider.tsx:76)
in ThemeProvider (at NativeBaseProvider.tsx:75)
in NativeBaseProvider (at App.js:41)
in App (created by ExpoRootComponent)
in ExpoRootComponent
in div (created by View)
in View (created by AppContainer)
in div (created by View)
in View (created by AppContainer)
in AppContainer
console.<computed> @ index.js:1