Comments (4)
Not ideal but check out the placeholder prop... @RuarddeBruyn
import React, {useState} from 'react'
import {Text} from 'react-native'
import {SelectList} from 'react-native-dropdown-select-list'
import {useDispatch} from 'react-redux'
import styles from '../../styles/styles'
const SuperDropdown = props => {
const {label, entity, keyName, fieldName, updateFunction, theme} = props
const dispatch = useDispatch()
const data = [
{key: 'talent', value: 'Talent', color: '#E00714'},
{key: 'jobs', value: 'Jobs', color: '#2B8589'},
{key: 'dating', value: 'Dating', color: '#e1a573'},
{key: 'accommodation', value: 'Accommodation', color: '#2E87E8'},
{key: 'travel', value: 'Travel', color: '#54643A'},
{key: 'flatmates', value: 'Flatmates', color: '#FF6263'},
{key: 'animalTalent', value: 'Animal talent', color: '#EAC8A8'},
{key: 'shortStays', value: 'Short stays', color: '#FFA862'},
{key: 'friendships', value: 'Friendships', color: '#3A3E4D'},
{key: 'reset', value: '- RESET -'},
]
const getColor = value => {
const item = data.find(item => item.key === value)
return item ? item.color : theme.colors.white
}
const getValue = key => {
const obj = data.find(item => item.key === key)
return obj ? obj.value : null
}
const [selectedCat, setSelectedCategory] = useState(entity[fieldName])
const sendIt = value => {
dispatch(
updateFunction({
[keyName]: entity?.id,
data: {[fieldName]: value},
}),
)
}
const [reset, setReset] = useState(0)
const clearStates = () => {
setReset(reset + 1)
}
return (
<SelectList
key={reset}
search={false}
maxHeight={1000}
placeholder={
<>
<Text
style={[
{
color: !selectedCat
? theme.colors.background
: theme.colors.white,
},
styles.h4,
]}>
{!selectedCat ? 'Select a category' : getValue(selectedCat)}
</Text>
</>
}
arrowicon={
<Text
style={{
top: 8,
left: 8,
fontSize: 10,
color: theme.colors.grey4,
textTransform: 'uppercase',
}}>
category
</Text>
}
boxStyles={{
borderWidth: 0,
paddingTop: 6,
paddingBottom: 6,
borderColor: theme.colors.grey5,
backgroundColor: getColor(selectedCat),
margin: 8,
marginBottom: 0,
borderRadius: 20,
}}
inputStyles={{
left: -5,
color: theme.colors.white,
...styles.h4,
}}
dropdownTextStyles={{
color: theme.colors.white,
...styles.h4,
}}
dropdownStyles={{
borderColor: theme.colors.grey5,
borderRadius: 20,
margin: 8,
}}
dropdownItemStyles={{
paddingHorizontal: 13,
paddingVertical: 6,
}}
setSelected={value => {
if (value === 'reset') {
sendIt(null)
clearStates()
setSelectedCategory(null)
} else {
sendIt(value)
setSelectedCategory(value)
}
}}
data={data}
save="key"
/>
)
}
export default SuperDropdown
from react-native-dropdown-select-list.
Can you attach a screen video
from react-native-dropdown-select-list.
Hey @danish1658 Greetings to you!, I have the same question.
I am using the Select list to select language from user on a profile screen and saving it in the backend.
When the user comes to the profile screen he should be able to view the previously selected value and change the value in the same Select list.
Is there any way to set the value to this Select List without the user interacting with the view, just on loading the screen and getting the data from backend
Trying to achieve the same functionality in Multiselect also
I Hope this explanation is enough to get my question across, let me know if any further explanation is needed. Thanks
from react-native-dropdown-select-list.
Anyone manage to get this to work?
from react-native-dropdown-select-list.
Related Issues (20)
- Issue introduced with version 2.0.0
- bug in defaultOption HOT 2
- How can i get selected object HOT 2
- New Feature - isDropdownShown
- Is there a way to display a "label" as opposed to the "value"? HOT 3
- this code not working with formik HOT 2
- MultipleSelectList setSelected return Function anonymous HOT 4
- how to set autoselected when binding data??
- Bug on search bar HOT 2
- How can i set initial values selected? HOT 6
- MultipleSelectList and SelectList bugs HOT 1
- MultiSelectList's `OnSelect()` returns a function, instead of the selected values array HOT 1
- Is there any way to get input text onChangeText property in search field ?
- How to disable the SelectList HOT 4
- Placeholder text color style HOT 2
- scroll on dropdown doesnt working when dropdownstyle position set to absolute HOT 2
- Search input placeholder text color not change. HOT 3
- On reopening filter, the selected options no longer appear checked HOT 3
- Is it possible to remove the dropdown animation and not move the block under it?
- Remove selected item and see the placeholder HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-native-dropdown-select-list.