Open poojalivin opened 1 year ago
Can you attach a screen video
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
Anyone manage to get this to work?
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
Hi. This is my code
I have given defaultOption. But still the item which was selected when the view was previously loaded is showing be default.