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.

Sayali

Tech Expert
Sayali is a React Native Developer with around 1 year of experience in developing mobile applications. She is familiar with writing blogs for the last 2 years. She is self-motivated, a fast learner, and result oriented. She loves to write blogs on technical issues faced by developers in day to day work and help them through her blogs.

The founder's survey report on "What Matters For Startup" is released - Get your copy and learn the trends of successful companies :)

Download Free eBook Now!

Get in touch for a detailed discussion.

Hear From Over 100+ Our Clients
coma

Mindbowser helped us build an awesome iOS app to bring balance to people's lives.

author
Addie Wootten
CEO, Smiling Mind
coma

We had very close go live timeline and MindBowser team got us live a month before.

author
Shaz Khan
CEO, BuyNow WorldWide
coma

They were a very responsive team! Extremely easy to communicate and work with!

author
Kristen M.
Founder & CEO, TotTech
coma

We’ve had very little-to-no hiccups at all—it’s been a really pleasurable experience.

author
Chacko Thomas
Co-Founder, TEAM8s
coma

Mindbowser is one of the reasons that our app is successful. These guys have been a great team.

author
Dave Dubier
Founder And CEO