CODEWITHSUNDEEP
javascriptreact-nativeecmascript-6
csb00
csb00

Reputation: 1155

Conditional for onChange function not working

I am a RN newbie and I just finished a tutorial where I was able create a component where you select a number while circle dragging. However, now I want the color to change with each different value/number as I drag it. For now, I have it written so that when value equals the number 2, it changes to red. My initial thought was to create a conditional in my onChange function, but that has not worked so far. It doesn't break at all, but it doesn't change color. Does anyone have any recommendations? Code is below and image of what I made as well.

import React, { Component } from "react";
import { StyleSheet, View, Text } from "react-native";
import CircleSizeSelector from "react-native-circle-size-selector";
type State = {
  value: number
};
const InitialValue = 1;
export default class CircleSize extends Component<void, State> {
    static navigationOptions = {
        title: "Question of the day",
        headerStyle: {
          backgroundColor: "#53b4e6"
        },
        headerTintColor: "#f6c945",
        headerTitleStyle: "bold"    
      };
  state: State = {
    value: InitialValue
  };
  onChange = (value: number) => {
    this.setState( value => {
      if (value === "number") {
        if (this.onChange.value === "2"){
        return { color: "red"};
        }
      }
    });
  };
  render() {
    return (
      <View style={styles.container}>
          <View>
              <Text style={styles.question}>On a scale from 1 to 10, how do you rank Sunday's episode?</Text>
          </View>
        <View style={styles.parent}>
          <CircleSizeSelector
            minValue={1}
            maxValue={10}
            initialValue={InitialValue}
            onChange={this.onChange}
          >
            <View>
              <Text style={styles.text}>{this.state.value}</Text>
            </View>
          </CircleSizeSelector>
        </View>
      </View>
    );
  }
}

Image of that I created. Would like to have the colors change as I drag and change the value

Upvotes: 1

Views: 3439

Answers (3)

Mehran Khan
Mehran Khan

Reputation: 3636

To change with each different value/number as I drag, I have defined a Color array and select the Color according to value set in state .

Here is my code 

import CircleSizeSelector from "react-native-circle-size-selector";
import { StyleSheet, View, Text } from "react-native";
import React from "react";

const colors = [
  "#FF6633",
  "#FFB399",
  "#FF33FF",
  "#FFFF99",
  "#00B3E6",
  "#E6B333",
  "#3366E6",
  "#999966",
  "#99FF99",
  "#B34D4D"
];

export default class App extends React.Component {
  state = {
    value: 1
  };

  onChange = value => {
    this.setState({ value });
  };

  render() {
    const { value } = this.state;
    const backgroundColor = colors[value - 1];
    return (
      <View style={styles.container}>
        <CircleSizeSelector
          minValue={1}
          maxValue={10}
          initialValue={this.state.value}
          onChange={this.onChange}
          currentValueCircleStyle={{
            backgroundColor: backgroundColor
          }}
          resizingCurrentValueCircleStyle={{
            backgroundColor: backgroundColor
          }}
        >
          <Text>{this.state.value}</Text>
        </CircleSizeSelector>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF"
  }
});

See The App Preview

Upvotes: 1

Dzmitry
Dzmitry

Reputation: 215

You can add color to state:

state: State = {
  value: InitialValue,
  color: 'blue'
};

Then change onChange function according condition:

onChange = (value: number) => {
  this.setState({ value })
  if (value===2) {
    this.setState({ color: 'red' })
  }

Finally change style for CircleSizeSelector component depending on state.color. I do not know exactly how it will looks, but something like this:

currentValueCircleStyle = { { backgroundColor: this.state.color } }

Upvotes: 1

azundo
azundo

Reputation: 6052

The conditional will work with some tweaking to the way you call this.setState [1]. The updater version of setState takes a function which takes the entire application state and returns the state to be merged - your current implementation has some issues with shadowing the changed value coming in to the onChange handler. But based on what you've described I think you should be able to use the simpler stateChange version of setState which just returns an object to merge into the component state. You can also call setState multiple times and updates will be batched.

onChange = (value: number) => {
    // update state.value to the value from the SizeSelector
    this.setState({value});
    // conditionally change the color
    // this setState will get batched with the above if it executes
    if (value === 2) {
       this.setState({color: 'red'});
    }
  };

[1] https://reactjs.org/docs/react-component.html#setstate

Upvotes: 1

Related Questions