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

In this article, I’m going to describe a react native issue that took some time of mine and how I solved it when there’s no clear solution.

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

Using react-native switch https://reactnative.dev/docs/switch works as expected when we use it inside a component like if the state is temporary and/or it doesn’t need to be used by any other component, but when there is more than one component and one common switch toggle then it becomes a problem to manage the toggle state using state. 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.

Hence we have resolved the issue by managing switch toggle state using redux which stores the whole state in a single tree which is very useful since it avoids having multiple sources of truth. Now we can see once the switch is turned ON in one component the state also changes for the second component.