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

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

Something like this

< pre>
{this.props.title}

< /TouchableOpacity>

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.props.onClick ==='function') {
this.props.onClick(newValue)
}
}

render() {
return (


{this.props.title}



)
}
}

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

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 find it here Read more on

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.< /p>

enter image description here

Now I click around the Switch View to change the global variable to true

enter image description here

But nothing has changed visually, only the variable has changed, not the changer.

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

Result of re-rendering

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 when the this.state.active and other required states of your application change, ignore other changes.

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.

enter image description here

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

enter image description here

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:

Result of re-rendering

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.

Leave a Comment

Your email address will not be published.