ReactJS – React Native (using REDUX) Animation Switch to programmatically

class ViewWithSwitchInside extends React.Component {
 constructor( props) {
 super(props)
 this.toggle = this.toggle.bind(this);
 this.state = {
 active: props.active
 }
 }

 componentWillReceiveProps(nextProps) {
 if (this.state.active != nextProps.active) {
 this.setState({ active: nextProps. active })
 }
 }

 toggle() {
 let newValue = !this.state.active
 this.setState({
 active: newValue,
 })
 if (typeof this.props.onClick ==='function') {
 this.props.onClick(newValue)
 }
 }

 render() {
 return (
 
 
 {this.props.title}
 
 
 
 )
 }
}

var isActive = false; //global variable
class Test extends Component {
 constructor(props) {
 super(props);
 this.state={active:false, irrelevantState: true};
 }

 test(foo){
 console.log("Attempting to change", foo);
 isActive = foo;
 }

 shouldComponentUpdate(nextProps, nextState) {
 if(this.state.active != nextState.active){//If the new state is different than the previous, stop rendering.
 this.test(nextState.active);
 return false;
 }else {//else, re-render everything
 return true;
 }
 }

 render(){
 console.log("Test re-render");
 return(
 
 {this.setState({active:!this.state.active})}} style={{flex:1, marginTop:20} }>
 Test Component
 
 
 { this.setState({active:true})}} style={{flex:1, marginTop:20}}>
 Test Component
 
 
 this.setState({irrelevantState:false})}>
  Re-render
 
 
 )
 }
}

I have a component with a built-in Switch component. The whole component is clickable. When you click this component, it triggers dispatch (modify redux store) and causes this component to be re-rendered.
What I need is not to re-render The whole component is just to set the Switch component to the correct state.

Something like this

 
 { this.props.title}
 

Any ideas?

I found this very common use case, I know I will encounter many similar situations, so I need this behavior, but I can’t find any examples or solutions online. Maybe I just lack Some things.

Thank you

—Edit—

I also tried this. I tried to disable the update using shouldComponentUpdate, I tried to set the status and only in willRecieveProps / Or switch, even if there is no switch. I have also tried playing LayoutAnimation. But nothing works. this.setState() just doesn’t animate the Switch component.
I also tried using this._switch._rctSwitch.setNativeProps(( value: nextProps.active}), but this doesn’t work either (smells because of _rctSwitch).

class ViewWithSwitchInside extends React.Component {
 constructor( props) {
 super(props)
 this.toggle = this.toggle.bind(this);
 this.state = {
 active: props.active
 }
 }

 componentWillReceiveProps(nextProps) {
 if (this.state.active != nextProps.active) {
 this.setState({ active: nextProps. active })
 }
 }

 toggle() {
 let newValue = !this.state.active
 this.setState({
 active: newValue,
 })
 if (typeof this.p rops.onClick ==='function') {
 this.props.onClick(newValue)
 }
 }

 render() {
 return (
 
 
 {this.props.title}
 
 
 
 )
 }
}

< /p>

You can’t just render a child item from the parent component. Even if you can change the value of the variable that the Switch depends on in some way, it will not be displayed unless you re-render the parent component.

I tried to use global variables to set the value of the switcher, I also prevented the use of shouldComponentUpdate() to re-render the parent component, you can read more here

This is My result:

This is the initial state of my application. The global variable is set to false, and the parent component has been rendered.

Now I change the global variable to true by clicking the View around the Switch

But nothing changes visually, only variables Changed, not the changer.

Then I pressed the “re-render” text at the bottom of the screen to change the state (irrelevant changes to the Switch component), and this happened:

This is the code of the above App:

 var isActive = false; //global variable
class Test extends Component {
 constructor(props) {
 super(props);
 this.state={active:false, irrelevantState : true};
 }

 test(foo){
 console.log("Attempting to change", foo);
 isActive = foo;
 }

 shouldComponentUpdate(nextProps, nextState){
 if(this.state.active != nextState.active){//If the new state is different than the previous, stop rendering. 
 this.test(nextState.active);
 return false;
 }else {//else, re-render everything
 return true;
 }
 }

 render(){
 console.log("Test re-render");
 return(
 
 {this.setState ({active:!this.state.active})}} style={{flex:1, marginTop:20}}>
 Test Component
 
 
 {this.setState({active:true})}} style={{flex:1, marginTop:20} }>
 Test Component
 
 
 this.setState({irrelevantState:false})}>
  Re-render
 
  
 )
 }
}

The best way is to find a smart way to re-render, only if your application’s this.state.active and When other required status changes, other changes are ignored.