Managing Common Toggle Switch State When Changing Bottom Tabs In React Native

As it has been observed that if you are using the common toggle in the header and initially you are on the home screen and set the toggle to ON, but then when switched to the second tab which is settings screen, toggle state is not changed in the second component and it can be seen OFF in the settings screen.

We will resolve this issue in this article using redux to manage switch toggle state.

import {Switch} from ‘react-native’ ;
const [isActive, setIsActive] = useState(false);
const toggleSwitch = () =>
setIsActive(
previousState => !previousState
);
<Switch
trackColor={{ false: colors.white, true: colors.blue }}
thumbColor={isActive === true ? colors.white : colors.blue}
ios_backgroundColor=”#3e3e3e”
onValueChange={toggleSwitch}
value={isActive}
/>

Now we will change switch toggle state using redux which will resolve the issue.

src/redux/actions/actionTypes.js

export const TOGGLE_SWITCH_ACTIVE = 'TOGGLE_SWITCH_ACTIVE';

src/redux/actions/headerSwitchToggleAction.js

import { TOGGLE_SWITCH_ACTIVE } from './actionTypes';
export const headerSwitchToggleAction = (data) => (
dispatch, getState) =>
{
dispatch(switchToggleActive(data));
};
const switchToggleActive = data => dispatch => {
dispatch({
type: TOGGLE_SWITCH_ACTIVE.TOGGLE_SWITCH_ACTIVE,
payload: data,
});
};

src/redux/reducers/headerSwitchToggleReducer.js

import { TOGGLE_SWITCH_ACTIVE } from './actionTypes';
const initialState = {
isActive: false,
};
const headerSwitchToggleReducer = (state = initialState, action) => {
switch (action.type) {
case TOGGLE_SWITCH_ACTIVE.TOGGLE_SWITCH_ACTIVE:
return {
isActive: action.payload,
};
default:
return state;
}
};
export default headerSwitchToggleReducer;

src/redux/reducers.js

import {combineReducers} from 'redux';
import headerSwitchToggleReducer from './reducers/headerSwitchToggleReducer';
export default combineReducers({
headerSwitchToggleReducer,
});

src/redux/store.js

import thunk from 'redux-thunk';
import {applyMiddleware, createStore} from 'redux';
import rootReducer from './reducers';
export default function configureStore() {
const store = createStore(rootReducer, applyMiddleware(thunk));
return store;
}

src/Component/header.js

import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as headerSwitchToggleActionCreator from '../redux/actions/headerSwitchToggleAction';
import {Switch} from 'react-native';
function Header(props) {
function toggleSwitch() {
if (props.isActive === false) {
props.headerSwitchToggleActions.headerSwitchToggleAction(true);
} else if (props.isActive === true) {
props.headerSwitchToggleActions.headerSwitchToggleAction(false);
}
}
return (
...
<Switch
trackColor={{ false: colors.white, true: colors.blue }}
thumbColor={props.isActive === true
? colors.white
: colors.blue}
ios_backgroundColor="#3e3e3e"
onValueChange={toggleSwitch}
value={props.isActive}
/>
...
);
}
const mapStateToProps = state => ({
isActive: state.headerSwitchToggleReducer.isActive,
});
const mapDispatchToProps = dispatch => ({
headerSwitchToggleActions: bindActionCreators(
headerSwitchToggleActionCreator,
dispatch
),
});
export default connect(mapStateToProps, mapDispatchToProps)(Header);

Setting toggle state to ON in home screen doesn’t change toggle state in setting screen and it can be seen OFF.