React-native: How to chage View background color once click on a toggle switch

ksi916 0
Viewed 36

I am trying to change the Background Color of the entire View by a toggle switch. But the color is not changing. Please help and Big Thanks!

Here is my code.

import { StyleSheet, View, Switch} from 'react-native';
import React, {useState} from 'react';

export default function App() {
const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch = () => setIsEnabled(previousState => !previousState);
const [color, setColor] = React.useState('yellow');

  return (
    <View style={[styles.container,
                 {backgroundColor:color}]}
          onValueChange = {color => setColor(color)}>

      <Switch onValueChange={toggleSwitch}
              value={isEnabled} onClick={() => setColor('grey')}>
      </Switch>

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:'column',
    alignItems:'center',
    justifyContent: 'center'
  }
});
react-native reactjs javascript
3 Answers

You need to add conditional styling on the view where you want the color to be changed. Keep it simple and not confuse it. It would be something like this.

    const [isYellow, setIsYellow] = useState(false)

  return (
      <View style={isYellow ? {backgroundColor: 'yellow'} : {backgroundColor: 'grey'} }>
        <Switch onValueChange={() => setIsYellow(prevYellow => !prevYellow)}
              value={isEnabled}>
        </Switch>
    </View>
usercAQH0

You need to define what happens when switch is enabled and what happens when switch is disabled. If enabled (conditional styling) background will be yellow, if not it'll be grey.

import { StyleSheet, View, Switch} from 'react-native';
import React, {useState} from 'react';

export default function App() {
const [isEnabled, setIsEnabled] = useState(false);
const toggleSwitch = () => setIsEnabled(previousState => !previousState);
const [color, setColor] = useState(true);

  return (    
    <View style={[styles.container, color  ? styles.bgyellow : styles.bggrey]}>
      <Switch onValueChange={toggleSwitch}
              value={isEnabled} onClick={() => setColor(!color)}>
      </Switch>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection:'column',
    alignItems:'center',
    justifyContent: 'center'
  },
  bgyellow:{
    background:'yellow'
  },
  bggrey:{
    background:'grey'
  }
});
u2380

If you just want to change the Bg-color to grey.

const [color, setColor] = useState('yellow');
const [isEnabled, setIsEnabled] = useState(false);


return(
  <View style={[styles.container, {backgroundColor: color}]}>
    <Switch
      onValueChange={() => {
        setIsEnabled(!isEnabled);
        setColor('grey');
      }}
      value={isEnabled}></Switch>
  </View>
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

If you want to change the Bg-color to "grey" when Switch is disabled and "yellow" when the Switch is enabled

const [color, setColor] = useState('grey');
const [isEnabled, setIsEnabled] = useState(false);

const toggleSwitch = () => {
  setIsEnabled(!isEnabled);
  setColor(!isEnabled === true ? 'yellow' : 'grey');
};


return(
    <View style={[styles.container, {backgroundColor: color}]}>
        <Switch onValueChange={toggleSwitch} value={isEnabled}></Switch>
    </View>
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Farhan Mian0
Related