-
π¬ Ask me about React Native, React.js
-
π« How to reach me [email protected]
fateh999 / react-native-paper-dropdown Goto Github PK
View Code? Open in Web Editor NEWDropdown using react native paper TextInput and Menu
License: MIT License
Dropdown using react native paper TextInput and Menu
License: MIT License
π¬ Ask me about React Native, React.js
π« How to reach me [email protected]
Do we need to add anything to proguard rules.. It not working in release in build
If you click the icon you can access to the TextField and the dropdown is not being displayed.
It works fine on iOS, but as the title says, I can't scroll dropDownContainer on Android.
I created a new expo project and installed react-native-paper and react-native-paper-dropdown. I then added the react-native-paper/babel plugin to the babel config. To test the package, I copied the demo code of this package into the App.js file and everything worked like expected.
But when i copy the babel config into the package.json file, i always get the following errors and the dropdowns do not open.
[Unhandled promise rejection: Error: Looks like you forgot to wrap your root component with Provider
component from react-native-paper
.]
at https://callstack.github.io/react-native-paper/getting-started.html:null in
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:136855:25 in checkManager
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:136825:33 in componentDidMount$
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:27124:22 in tryCatch
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:27294:31 in invoke
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:27124:22 in tryCatch
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:27196:29 in invoke
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:27226:18 in
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:31984:8 in tryCallTwo
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:32148:24 in doResolve
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:32007:13 in Promise
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:27225:32 in callInvokeWithMethodAndArg
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:27230:156 in enqueue
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:27245:68 in
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:136821:41 in componentDidMount
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:21280:46 in commitLifeCycles
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:23316:28 in commitLayoutEffects
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:9898:20 in invokeGuardedCallbackProd
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:10002:41 in invokeGuardedCallback
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:23098:35 in commitRootImpl
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:56909:29 in unstable_runWithPriority
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:22986:23 in commitRoot
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:22530:18 in performSyncWorkOnRoot
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:13775:39 in
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:56909:29 in unstable_runWithPriority
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:13770:29 in flushSyncCallbackQueueImpl
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:13759:34 in flushSyncCallbackQueue
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:22546:34 in batchedUpdates$1
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:11337:35 in batchedUpdates
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:11429:22 in _receiveRootNodeIDEvent
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:11483:33 in receiveTouches
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:3749:35 in __callFunction
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:3477:30 in
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:3703:14 in __guard
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:3476:20 in callFunctionReturnFlushedQueue
Please read our getting-started guide and make sure you've followed all the required steps.
https://callstack.github.io/react-native-paper/getting-started.html
This error is located at:
in PortalConsumer
in Portal
in ThemedComponent (created by withTheme(Portal))
in withTheme(Portal) (created by Menu)
in RCTView (created by View)
in View (created by Menu)
in Menu
in ThemedComponent (created by withTheme(Menu))
in withTheme(Menu)
in Unknown (created by App)
in RCTSafeAreaView
in SafeAreaView (created by App)
in RCTView (created by View)
in View (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by Surface)
in Surface
in ThemedComponent (created by withTheme(Surface))
in withTheme(Surface) (created by App)
in ThemeProvider (created by App)
in ThemeProvider (created by Provider)
in RCTView (created by View)
in View (created by Portal.Host)
in Portal.Host (created by Provider)
in Provider (created by App)
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in DevAppContainer (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
at node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:43:2 in showErrorDialog
Error: Looks like you forgot to wrap your root component with Provider
component from react-native-paper
.
Please read our getting-started guide and make sure you've followed all the required steps.
https://callstack.github.io/react-native-paper/getting-started.html
This error is located at:
in PortalConsumer
in Portal
in ThemedComponent (created by withTheme(Portal))
in withTheme(Portal) (created by Menu)
in RCTView (created by View)
in View (created by Menu)
in Menu
in ThemedComponent (created by withTheme(Menu))
in withTheme(Menu)
in Unknown (created by App)
in RCTSafeAreaView
in SafeAreaView (created by App)
in RCTView (created by View)
in View (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by Surface)
in Surface
in ThemedComponent (created by withTheme(Surface))
in withTheme(Surface) (created by App)
in ThemeProvider (created by App)
in ThemeProvider (created by Provider)
in RCTView (created by View)
in View (created by Portal.Host)
in Portal.Host (created by Provider)
in Provider (created by App)
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in DevAppContainer (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
at node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:43:2 in showErrorDialog
Error: Looks like you forgot to wrap your root component with Provider
component from react-native-paper
.
Please read our getting-started guide and make sure you've followed all the required steps.
https://callstack.github.io/react-native-paper/getting-started.html
This error is located at:
in PortalConsumer
in Portal
in ThemedComponent (created by withTheme(Portal))
in withTheme(Portal) (created by Menu)
in RCTView (created by View)
in View (created by Menu)
in Menu
in ThemedComponent (created by withTheme(Menu))
in withTheme(Menu)
in Unknown (created by App)
in RCTSafeAreaView
in SafeAreaView (created by App)
in RCTView (created by View)
in View (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by Surface)
in Surface
in ThemedComponent (created by withTheme(Surface))
in withTheme(Surface) (created by App)
in ThemeProvider (created by App)
in ThemeProvider (created by Provider)
in RCTView (created by View)
in View (created by Portal.Host)
in Portal.Host (created by Provider)
in Provider (created by App)
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in DevAppContainer (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
at node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:43:2 in showErrorDialog
Error: Looks like you forgot to wrap your root component with Provider
component from react-native-paper
.
Please read our getting-started guide and make sure you've followed all the required steps.
https://callstack.github.io/react-native-paper/getting-started.html
This error is located at:
in PortalConsumer
in Portal
in ThemedComponent (created by withTheme(Portal))
in withTheme(Portal) (created by Menu)
in RCTView (created by View)
in View (created by Menu)
in Menu
in ThemedComponent (created by withTheme(Menu))
in withTheme(Menu)
in Unknown (created by App)
in RCTSafeAreaView
in SafeAreaView (created by App)
in RCTView (created by View)
in View (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by Surface)
in Surface
in ThemedComponent (created by withTheme(Surface))
in withTheme(Surface) (created by App)
in ThemeProvider (created by App)
in ThemeProvider (created by Provider)
in RCTView (created by View)
in View (created by Portal.Host)
in Portal.Host (created by Provider)
in Provider (created by App)
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in DevAppContainer (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
Error: Looks like you forgot to wrap your root component with Provider
component from react-native-paper
.
Please read our getting-started guide and make sure you've followed all the required steps.
https://callstack.github.io/react-native-paper/getting-started.html
This error is located at:
in PortalConsumer
in Portal
in ThemedComponent (created by withTheme(Portal))
in withTheme(Portal) (created by Menu)
in RCTView (created by View)
in View (created by Menu)
in Menu
in ThemedComponent (created by withTheme(Menu))
in withTheme(Menu)
in Unknown (created by App)
in RCTSafeAreaView
in SafeAreaView (created by App)
in RCTView (created by View)
in View (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by Surface)
in Surface
in ThemedComponent (created by withTheme(Surface))
in withTheme(Surface) (created by App)
in ThemeProvider (created by App)
in ThemeProvider (created by Provider)
in RCTView (created by View)
in View (created by Portal.Host)
in Portal.Host (created by Provider)
in Provider (created by App)
in App (created by ExpoRoot)
in ExpoRoot
in RCTView (created by View)
in View (created by AppContainer)
in DevAppContainer (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0
Error: EISDIR: illegal operation on a directory, read
at Object.readSync (node:fs:723:3)
at tryReadSync (node:fs:433:20)
at Object.readFileSync (node:fs:479:19)
at UnableToResolveError.buildCodeFrameMessage (/Users/huckjulius/Projects/Test/my-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:347:17)
at new UnableToResolveError (/Users/huckjulius/Projects/Test/my-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:333:35)
at ModuleResolver.resolveDependency (/Users/huckjulius/Projects/Test/my-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:211:15)
at DependencyGraph.resolveDependency (/Users/huckjulius/Projects/Test/my-app/node_modules/metro/src/node-haste/DependencyGraph.js:413:43)
at /Users/huckjulius/Projects/Test/my-app/node_modules/metro/src/lib/transformHelpers.js:317:42
at /Users/huckjulius/Projects/Test/my-app/node_modules/metro/src/Server.js:1471:14
at Generator.next ()
[Unhandled promise rejection: Error: Looks like you forgot to wrap your root component with Provider
component from react-native-paper
.]
at https://callstack.github.io/react-native-paper/getting-started.html:null in
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:136855:25 in checkManager
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:136825:33 in componentDidMount$
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:27124:22 in tryCatch
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:27294:31 in invoke
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:27124:22 in tryCatch
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:27196:29 in invoke
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:27226:18 in
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:31984:8 in tryCallTwo
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:32148:24 in doResolve
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:32007:13 in Promise
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:27225:32 in callInvokeWithMethodAndArg
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:27230:156 in enqueue
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:27245:68 in
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:136821:41 in componentDidMount
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:21280:46 in commitLifeCycles
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:23316:28 in commitLayoutEffects
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:9898:20 in invokeGuardedCallbackProd
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:10002:41 in invokeGuardedCallback
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:23098:35 in commitRootImpl
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:56909:29 in unstable_runWithPriority
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:22986:23 in commitRoot
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:22530:18 in performSyncWorkOnRoot
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:13775:39 in
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:56909:29 in unstable_runWithPriority
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:13770:29 in flushSyncCallbackQueueImpl
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:13759:34 in flushSyncCallbackQueue
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:22546:34 in batchedUpdates$1
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:11337:35 in batchedUpdates
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:11429:22 in _receiveRootNodeIDEvent
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:11483:33 in receiveTouches
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:3749:35 in __callFunction
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:3477:30 in
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:3703:14 in __guard
at http://127.0.0.1:19000/node_modules/expo/AppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:3476:20 in callFunctionReturnFlushedQueue
Here is my test project: https://github.com/juliushuck/issue-react-native-paper-dropdown
I'm getting the following warning.
WARN EventEmitter.removeListener('change', ...): Method has been deprecated. Please instead use remove()
on the subscription returned by EventEmitter.addListener
.
"react-native": "^0.65.1",
"react-native-paper": "^4.9.2",
"react-native-paper-dropdown": "^1.0.7",
Dropdown doesn't expand react native's Modal too.
Error occurs when i use theme to react-native-paper-dropdown and shows "Undefined is not an object (evaluating '(theme || activeTheme).colors.text').
import React, {useState} from "react";
import PropTypes from 'prop-types';
import DropDown from "react-native-paper-dropdown";
import { TextInput } from "react-native-paper";
export function Select({label, onChange, items, selectedItem, value, textInputMode, ...props}){
const [showDropDown, setShowDropDown] = useState(false);
const [gender, setGender] = useState("");
return(
<DropDown
theme={{roundness:15}}
label={label}
visible={showDropDown}
showDropDown={() => setShowDropDown(true)}
onDismiss={() => setShowDropDown(false)}
value={gender}
setValue={setGender}
list={items}
mode={textInputMode}
dropDownStyle={{backgroundColor:'white',borderRadius:15}}
inputProps={{ right: <TextInput.Icon name={'menu-down'}/>}
}
/>
)
}
Select.propTypes={
onChange: PropTypes.func,
value:PropTypes.string,
multiEnable:PropTypes.bool,
items: PropTypes.array,
textInputMode: PropTypes.string
}
I want to use borderRadius styling. But dropdownStyle doesn't work
I cannot event find element with testid or label or anything. Please help me out here.
How can one add data such as name and set value to id ?
The component is not working if you have it on a modal screen
label Text not showing in outlined Mode
Touch background shadow color showing
This doesn't work for web, unless you add the following code to the Menu.Item
on line 98
onPress={() => { if(!multiselect) { setActive(_item.value)} }} />
Sorry if I'm missing it, but is there a way to change the base component height? TIA.
Hey there,
It is a good idea to have a demo image in the README.md file. It gives the user a clear view of what he/she gonna get when he/she installs the package.
If you allow me, I can add an image showing how the dropdown looks.
import {
Appbar,
DarkTheme,
DefaultTheme,
Provider,
Surface,
ThemeProvider,
} from 'react-native-paper';
import React, { useState } from 'react';
import { SafeAreaView, StatusBar, StyleSheet, View } from 'react-native';
import DropDown from 'react-native-paper-dropdown';
function App() {
const [nightMode, setNightmode] = useState(false);
const [showDropDown, setShowDropDown] = useState(false);
const [gender, setGender] = useState<string>('');
const [showMultiSelectDropDown, setShowMultiSelectDropDown] = useState(false);
const [colors, setColors] = useState<string>('');
const genderList = [
{
label: 'Male',
value: 'male',
},
{
label: 'Female',
value: 'female',
},
{
label: 'Others',
value: 'others',
},
];
const colorList = [
{
label: 'White',
value: 'white',
},
{
label: 'Red',
value: 'red',
},
{
label: 'Blue',
value: 'blue',
},
{
label: 'Green',
value: 'green',
},
{
label: 'Orange',
value: 'orange',
},
];
return (
<Provider theme={nightMode ? DarkTheme : DefaultTheme}>
<ThemeProvider theme={nightMode ? DarkTheme : DefaultTheme}>
<StatusBar
backgroundColor={
nightMode ? DarkTheme.colors.surface : DefaultTheme.colors.primary
}
barStyle={'light-content'}
/>
<Appbar.Header>
<Appbar.Content title="React Native Paper Dropdown" />
<Appbar.Action
icon={nightMode ? 'brightness-7' : 'brightness-3'}
onPress={() => setNightmode(!nightMode)}
/>
</Appbar.Header>
<Surface style={styles.containerStyle}>
<SafeAreaView style={styles.safeContainerStyle}>
<DropDown
label={'Gender'}
mode={'outlined'}
visible={showDropDown}
showDropDown={() => setShowDropDown(true)}
onDismiss={() => setShowDropDown(false)}
value={gender}
setValue={setGender}
list={genderList}
/>
<View style={styles.spacerStyle} />
<DropDown
label={'Colors'}
mode={'outlined'}
visible={showMultiSelectDropDown}
showDropDown={() => setShowMultiSelectDropDown(true)}
onDismiss={() => setShowMultiSelectDropDown(false)}
value={colors}
setValue={setColors}
list={colorList}
multiSelect
/>
</SafeAreaView>
</Surface>
</ThemeProvider>
</Provider>
);
}
const styles = StyleSheet.create({
containerStyle: {
flex: 1,
},
spacerStyle: {
marginBottom: 15,
},
safeContainerStyle: {
flex: 1,
margin: 20,
justifyContent: 'center',
},
});
export default App;
The dropdown opens at the wrong position. The offset is equal to the scroll position of the window, so the dropdown moves twice as fast as the scrollbar of the window.
Dropdown taking too much time to show when there is a long list in Android.
Please add search feature in dropdown
This great library
I think because the dropdown uses optional chaining syntax in the DropDown.js file it breaks without adding the library to a babel rule to compile it
How can I change the style props of Menu/
Code:
export type DropdownItem = {
label: string;
value: string;
};
type DropdownProps = {
label: string;
items: DropdownItem[];
};
const Dropdown: FC<DropdownProps> = ({label, items}) => {
const [open, setOpen] = useState(false);
const [value, setValue] = useState(items?.[0].value ?? '');
return (
<Provider>
<SafeAreaView style={style.containerStyle}>
<DropDown
label={label}
mode={'outlined'}
value={value}
setValue={val => setValue(val.toString())}
list={items}
showDropDown={() => setOpen(true)}
onDismiss={() => setOpen(false)}
visible={open}
inputProps={{
right: <TextInput.Icon name={'menu-down'} />,
}}
theme={dropdownInputTheme}
dropDownStyle={style.dropdownStyle}
dropDownItemStyle={style.dropdownItemStyle}
/>
</SafeAreaView>
</Provider>
);
};
const selectionColor = '#DD622B';
const dropdownInputTheme = {
...DefaultTheme,
roundness: 2,
dark: false,
colors: {
...DefaultTheme.colors,
primary: selectionColor,
},
};
const style = StyleSheet.create({
containerStyle: {
marginHorizontal: 20,
},
dropdownStyle: {
backgroundColor: 'red',
padding: 10,
},
dropdownItemStyle: {
// padding: 20,
backgroundColor: 'white',
borderColor: 'blue',
// marginVertical: -8,
},
});
dropDownItemTextStyle and dropDownItemSelectedTextStyle props are working fine on android but not on IOS.
Can you please check below issue of react-native-paper
callstack/react-native-paper#2680
Same issue occurs in this too when we change height of TextInput, how can we overcome this issue in this library?
Is it possible to change the borders color and the height of the dropdown?
For Reference: https://www.npmjs.com/package/react-native-multi-selectbox
Feature Request:
There aren't any material multi-select for react native using react native paper.
doing that will get you more users
Hi,
How I set a default value?
Thanks!
Hello, I really need help in this matter. In my project, I have created 2 dropdown. The option list of the second dropdown is based on what user selected in the first dropdown. So supposedly, the selected item in the second dropdown should be cleared every time the selected item in the first dropdown change. How should I do that? I have tried this approach but it doesnt work.
const [showDropDown1, setShowDropDown1] = useState(false);
const [showDropDown2, setShowDropDown2] = useState(false);
const [rI, setrI] = useState('')
const [lI, setlI] = useState('')
const remoteItems = [
{id: 1, label: 'Item 1', value: 'item-1'},
{id: 2, label: 'Item 2', value: 'item-2'},
];
const lItems = [
{id: 1, label: 'L 1', value: 'l-1'},
{id: 2, label: 'L 2', value: 'l-2'},
];
const handleSetrI = (rI) => {
setlI('')
setrI(rI);
}
return (
<DropDown
visible={false}
label={'Car Brand'}
mode={'outlined'}
visible={showDropDown1}
showDropDown={() => setShowDropDown1(true)}
onDismiss={() => setShowDropDown1(false)}
value={rI}
setValue={(val) => handleSetrI(val)}
list={remoteItems}
/>
<DropDown
visible={false}
label={'Car Model'}
mode={'outlined'}
visible={showDropDown2}
showDropDown={() => setShowDropDown2(true)}
onDismiss={() => setShowDropDown2(false)}
value={lI}
setValue={setlI}
list={lItems}
/>
)
Could you potentially expose the style prop?
We can set string and number types but at the moment we need to make arbitrary conditional statements to compare values to a string to turn them into a boolean value in our form. Would be great if the valueList
value type natively supported Boolean types.
How can I add outline color to the container?
dropDownStyle props have not working. it does not any effect.
thank you
When using the dropdown menu in both outlined and flat mode, the ripple effect is only visible on the background part of the Dropdown component (even though with flat it's visible only on the corner, but still, quite irritating)
My dependencies and their versions:
"@react-native-async-storage/async-storage": "^1.15.11", "@react-navigation/drawer": "^6.1.8", "@react-navigation/native": "^6.0.6", "base-64": "^1.0.0", "date-and-time": "^2.0.1", "react": "17.0.2", "react-native": "0.66.2", "react-native-gesture-handler": "^1.10.3", "react-native-paper": "^4.10.0", "react-native-paper-dropdown": "^1.0.7", "react-native-reanimated": "^2.2.4", "react-native-safe-area-context": "^3.3.2", "react-native-screens": "^3.9.0", "react-native-uuid": "^2.0.1", "react-native-vector-icons": "^9.0.0", "utf8": "^3.0.0"
how to change border color when focus to dropdown. which props to use?
I see that you use the react-native-paper TextInput to render the input field, but the TextInput (outlined) has a feature that changes the border color based on the theme color on focus. Is there any way we can achieve the same behavior with this Dropdown component? I tried forking it to call the TextInput "focus" method manually, but I couldn't build it to test it.
`
import React, { useState } from "react"; import { StyleSheet, View, FlatList } from "react-native";
import DropDown from "react-native-paper-dropdown";
function App() {
const [showDropDown, setShowDropDown] = useState(false);
const [gender, setGender] = useState();
const [dishes, setDishes] = useState( [
{
title: "Main dishes",
data: ["Pizza", "Burger", "Risotto"]
},
{
title: "Sides",
data: ["French Fries", "Onion Rings", "Fried Shrimps"]
},
{
title: "Drinks",
data: ["Water", "Coke", "Beer"]
},
{
title: "Desserts",
data: ["Cheese Cake", "Ice Cream"]
}
]);
const setValue = (v) => {
console.log(dishes) //here sometimes getting empty array
}
return (
<FlatList
data={dishes}
renderItem={({item,index}) => <DropDown label={"Dishes"} mode={"outlined"} visible={showDropDown} showDropDown={() => setShowDropDown(true)} onDismiss={() => setShowDropDown(false)} value={v} setValue={setValue} list={item.data} />}
/>
);
}
`
Sometimes I'm getting redux state or local state empty in setValue. Please help explaining the issue & a solution if possible.
Thanks
After adding the multiSelect
prop to the Dropdown component, the multiselect checkboxes do not appear.
Hi! π
Firstly, thanks for your work on this project! π
Today I used patch-package to patch [email protected]
for the project I'm working on.
Here is the diff that solved my problem:
diff --git a/node_modules/react-native-paper-dropdown/dist/DropDown.js b/node_modules/react-native-paper-dropdown/dist/DropDown.js
index 091b0bf..39041df 100644
--- a/node_modules/react-native-paper-dropdown/dist/DropDown.js
+++ b/node_modules/react-native-paper-dropdown/dist/DropDown.js
@@ -33,7 +33,7 @@ const DropDown = forwardRef((props, ref) => {
{list.map((_item, _index) => (<Menu.Item key={_index} theme={theme} titleStyle={{
color: value === _item.value
? activeColor || (theme || activeTheme).colors.primary
- : undefined,
+ : 'black',
}} onPress={() => {
setValue(_item.value);
if (onDismiss) {
This issue body was partially generated by patch-package.
How to change the width of this component?
How to disable the dropdown so that the value can't be changed after setting and the dropdown border color will be lighter gray like TextInput?
Please help
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.