Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Switch is not working with Redux #12

Open
mvsiva4u opened this issue Nov 27, 2017 · 2 comments
Open

Switch is not working with Redux #12

mvsiva4u opened this issue Nov 27, 2017 · 2 comments

Comments

@mvsiva4u
Copy link

We used switch where the initial state set in Redux. but when entered the data and saving in local , If i'm fetching back the details it is not behaving as expected. Below is the code we have written.
<Switch
value={this.state.address.sameas.value === 'N' ? false : true}
switchWidth={50}
switchHeight={25}
buttonWidth={25}
buttonHeight={25}
switchBorderColor={'rgba(0, 0, 0, 1)'}
activeBackgroundColor={'#009669'}
inactiveBackgroundColor={'#888888'}
buttonBorderColor={'rgba(0, 0, 0, 1)'}
buttonBorderWidth={1}
padding={false}
onChangeValue={sameas => {
address.sameas.value = sameas ? 'Y' : 'N';
this.setState({ address});
}}
/>

below is the way setting the state in redux.

sameas: {
value: 'N',
error: '',
enable: true
},

@mrondra
Copy link

mrondra commented Jan 13, 2018

I have the same problem, did you find any solution?

@Stettinum
Copy link

Stettinum commented Mar 26, 2018

hey did you find solution ?
If yes please just ignore it if not here you have a solution:

It's because that you probably have rendered your switch on start, at it's state is initailzed on start.
After that you redux state is updated and props are received to you'r component and you try to update switch but switch has state initailized on constructor.
So in other words you only need to implement componentWillReceiveProps (switch.js file) method and set state of this switch in that method.
In real word example would be:

 componentWillReceiveProps(nextProps) {
    this.setState({
      value: nextProps.value,
      transformValue: new Animated.Value(nextProps.value ? this.transformValue : this.padding), //you need to remember about that
      backgroundColor: new Animated.Value(nextProps.value ? 90 : -90),//you need to remember about that
      buttonBackgroundColor: new Animated.Value(nextProps.value ? 90 : -90),//you need to remember about that
    })
 }

and when it received props it will change its state.
Ofc you can also implement logic like shouldComponentUpdate but it's up to you. This basically works.
Regards

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants