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

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'
  }
});

CodePudding user response：

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'
  }
});

CodePudding user response：

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>

CodePudding user response：

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>