Question 34615 in React native Question posted in
The official React Native documentation can be found here.

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

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

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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'
  }
});
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search