reactjs - How to set the dropdown state to initial whenever I switch Tabs?

Question

I have a bottomtabbar with three screens, all the screens are have a dropdown picker at the header. Whenever I have my dropdown open and I change the tab screen, my dropdown is still remains opened, however I would like my dropdown to remain closed initially whenever I changed tabs. My exact code is as follows:

import React, {useEffect, useState} from 'react';
import {ActivityIndicator} from 'react-native';

import {SafeAreaView, View, Image, TouchableOpacity} 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';

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);
  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 (
    <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
              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);
                }
              }}
              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"
          tabBarOptions={{
            labelStyle: {
              color: '#FF1493',
              fontSize: 12,
            },
          }}>
          <Tab.Screen
            name="Home"
            // uncommnet below line to see new Home Tab
            component={HomeTabScreen}
            // uncomment below see old Home Tab
            // component={HomeScreen}
            options={{
              tabBarLabel: 'Home',
              tabBarIcon: ({}) => (
                <MaterialIcon name="home" color="#FF1493" size={30} />
              ),
            }}
          />
          <Tab.Screen
            name="Consult"
            component={ConsultationHomeScreen}
            initialParams={{
              mSChildId: mSChildId,
            }}
            options={{
              tabBarLabel: 'Consult',
              tabBarIcon: ({}) => (
                <FontAwesomeIcon name="stethoscope" color="#FF1493" size={30} />
              ),
            }}
          />
          {mChild != null && mChild.is_sc_subscribed == true ? (
            <Tab.Screen
              name="Chat"
              component={ChatTabScreen}
              options={{
                tabBarLabel: 'Chat',
                tabBarIcon: ({}) => (
                  <MaterialCommunityIcons
                    name="chat-outline"
                    color="#FF1493"
                    size={30}
                  />
                ),
              }}
            />
          ) : (
            <Tab.Screen
              name="Plans"
              component={PlansTabScreen}
              options={{
                tabBarLabel: 'Plans',
                tabBarIcon: ({}) => (
                  <MaterialCommunityIcons
                    name="crown-outline"
                    color="#FF1493"
                    size={30}
                  />
                ),
              }}
            />
          )}
        </Tab.Navigator>
      )}
    </SafeAreaView>
  );
}

Kindly, let me know how do I let my dropdown remain closed whenever I switch tabs. Any lead would be appreciated.

Answer 1

Define a controller for your dropdown picker then add a custom buttons to your tab navigator. The custom buttons would allow you implement an onPress listener and in the listener you can run controller.close() to close the dropdown picker.

You can check the npm page if you're not familiar with controllers for the dropdown picker

Edit: Here's how to set a controller as per the npm page:

const [value, setValue] = useState(null);
const [items, setItems] = useState([ {...}, ... ]);
let controller;

<DropDownPicker
    items={items}
    controller={instance => controller = instance}
    onChangeList={(items, callback) => {
        new Promise((resolve, reject) => resolve(setItems(items)))
            .then(() => callback())
            .catch(() => {});
    }}

    defaultValue={value}
    onChangeItem={item => setValue(item.value)}
/>