I want to change the value of React native dropdown picker:
below is an image of my dropdown picker
I want to display only the name as the value, and list remains the same style, for eg:
value selected displays as 2year as here if the first item is selected
My complete code is as follows:
import React, {useEffect, useState} from 'react';
import {ActivityIndicator, TouchableWithoutFeedback} from 'react-native';
import {SafeAreaView, View, Image, TouchableOpacity, Text} from 'react-native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import MaterialIcon from 'react-native-vector-icons/MaterialIcons';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
// bottom tab
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/FontAwesome';
import DropDownPicker from 'react-native-dropdown-picker';
//tabs component
import HomeTabScreen from './HomeTabScreen';
import ConsultationHomeScreen from '../Consult/ConsultationHomeScreen';
import PlansTabScreen from './PlansTabScreen';
import ChatTabScreen from './ChatTabScreen';
import {useSelector, useDispatch} from 'react-redux';
import {
setSelectedChild,
setSelectedChildId,
} from '../../store/actions/userActions';
import {isValidObject} from '../../utils/baseUtils';
import {getChildFromUserChildrenList} from '../../utils/userUtils';
import {setAppReload} from '../../store/actions/HomeActions';
let controller;
export default function PLHomeScreen(props) {
const {navigation} = props;
const [loading, setLoading] = useState(false);
const Tab = createBottomTabNavigator();
//child related
const [loadApi, setLoadApi] = useState(true);
//Use for all the dispatch actions
const dispatch = useDispatch();
const User = useSelector((state) => state.userReducer.user);
const mSChildId = useSelector((state) => state.userReducer.selectedChildId);
let mChild = getChildFromUserChildrenList(User, mSChildId);
const defaultchildvalue = getChildFromUserChildrenList(User, mSChildId);
console.log('default child',defaultchildvalue.name);
const reloadApp = useSelector(
(state) => state.premiumCardActionTypesReducer.reloadApp,
);
console.log('!!!! Reload App !!!!', reloadApp);
useEffect(() => {
if (!isValidObject(mChild)) {
if (!isValidObject(mSChildId)) {
let cid = User.children[0].id;
handleChangeChild(cid);
}
}
if (loadApi == true) {
setLoadApi(false);
setLoading(false);
}
if (reloadApp == true) {
setLoadApi(true);
setLoading(true);
dispatch(setAppReload(false));
}
console.log('!!!! Reload App !!!!', reloadApp);
}, [User, mSChildId, loadApi, reloadApp]);
const handleChangeChild = (id) => {
dispatch(setSelectedChildId(id));
mChild = getChildFromUserChildrenList(User, id);
setLoadApi(true);
setLoading(true);
};
return (
<TouchableWithoutFeedback onPress={() => controller.close()}>
<SafeAreaView
style={{
flex: 1,
alignItems: 'stretch',
justifyContent: 'center',
backgroundColor: '#FE017E',
}}>
<View>
<View
style={{
height: 56,
backgroundColor: '#FE017E',
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-between',
}}>
<TouchableOpacity
onPress={() => navigation.openDrawer()}
style={{
backgroundColor: '#FE017E',
width: '100%',
height: 40,
padding: 10,
}}
underlayColor="transparent">
<Icon
size={20}
name="bars"
style={{marginLeft: 2}}
color="#fff"
/>
</TouchableOpacity>
</View>
{User != null &&
User.children != undefined &&
User.children != null &&
User.children.length > 0 &&
mChild &&
mChild != undefined &&
mChild != null && (
<DropDownPicker
controller={(instance) => (controller = instance)}
items={User.children.map((item) => {
return {
label: item.name + '
' + item.dob_text,
value: item,
icon: () =>
item.pic_url ? (
<Image
source={{
uri: item.pic_url,
}}
style={{height: 30, width: 30, borderRadius: 15}}
/>
) : item.gender === 'male' ? (
<Image
source={{
uri:
'https://cdn3.iconfinder.com/data/icons/materia-human/24/013_042_newborn_infant_child_baby-512.png',
}}
style={{height: 30, width: 30}}
/>
) : (
<Image
source={{
uri:
'https://cdn3.iconfinder.com/data/icons/materia-human/24/013_042_newborn_infant_child_baby-512.png',
}}
style={{height: 30, width: 30}}
/>
),
};
})}
onChangeItem={(item) => {
if (item.value.id != mSChildId) {
handleChangeChild(item.value.id);
}
controller.close();
}}
containerStyle={{
marginLeft: 60,
marginTop: -46,
marginBottom: 10,
height: 40,
}}
defaultValue={defaultchildvalue}
dropDownStyle={{
backgroundColor: '#ffffff',
marginLeft: 40,
borderColor: 'grey',
borderWidth: 1,
borderBottomEndRadius: 0,
borderBottomLeftRadius: 0,
borderBottomStartRadius: 0,
borderBottomRightRadius: 0,
minWidth: 100,
maxWidth: 150,
}}
itemStyle={{
justifyContent: 'flex-start',
fontWeight: 'bold',
fontSize: 20,
borderColor: '#FE017E',
}}
style={{
backgroundColor: '#FE017E',
borderBottomEndRadius: 0,
borderBottomLeftRadius: 0,
borderBottomRightRadius: 0,
borderBottomStartRadius: 0,
borderTopEndRadius: 0,
borderTopLeftRadius: 0,
borderRadius: 0,
borderColor: '#FE017E',
minWidth: 100,
maxWidth: 150,
}}
labelStyle={{
marginLeft: 15,
fontWeight: 'bold',
fontSize: 10,
color: 'black',
textAlign: 'center',
}}
arrowColor={'white'}
activeLabelStyle={{color: '#FE017E'}}
selectedLabelStyle={{color: 'white'}}
/>
)}
</View>
{loading ? (
<ActivityIndicator
color="#FF1493"
size="large"
style={{
backgroundColor: 'white',
justifyContent: 'center',
alignItems: 'center',
flex: 1,
flexDirection: 'row',
}}
/>
) : (
// <View>
<Tab.Navigator
lazy={true}
initialRouteName="Home"
tabBar={(props) => <MyTabBar {...props} />}>
<Tab.Screen name="Home" component={HomeTabScreen} />
<Tab.Screen
name="Consult"
component={ConsultationHomeScreen}
initialParams={{
mSChildId: mSChildId,
}}
/>
{mChild != null && mChild.is_sc_subscribed == true ? (
<Tab.Screen name="Chat" component={ChatTabScreen} />
) : (
<Tab.Screen name="Plans" component={PlansTabScreen} />
)}
</Tab.Navigator>
)}
</SafeAreaView>
</TouchableWithoutFeedback>
);
}
// Tab navigator props
function MyTabBar({state, descriptors, navigation}) {
return (
<View style={{flexDirection: 'row'}}>
{state.routes.map((route, index) => {
const {options} = descriptors[route.key];
console.log('options', route);
const label =
options.tabBarLabel !== undefined
? options.tabBarLabel
: options.title !== undefined
? options.title
: route.name;
const isFocused = state.index === index;
const onPress = () => {
controller.close();
const event = navigation.emit({
type: 'tabPress',
target: route.key,
});
if (!isFocused && !event.defaultPrevented) {
navigation.navigate(route.name);
}
};
const onLongPress = () => {
navigation.emit({
type: 'tabLongPress',
target: route.key,
});
};
return (
<TouchableOpacity
accessibilityRole="button"
accessibilityState={isFocused ? {selected: true} : {}}
accessibilityLabel={options.tabBarAccessibilityLabel}
testID={
