react-native-switch-pro: Not displaying correctly when given value from props

When I give the Switch a boolean value stored in props, the initial rendering of the switch is messing up:

Here is my code:

      <Switch
        width={60}
        height={30}
        circleColor={'white'}
        backgroundInactive={'rgba(255,255,255,0.2)'}
        backgroundActive={appColors.green}
        value={this.props.bookable}
        onSyncPress={value => this.props.inputChanged({ prop: 'bookable', value })}
      />

Any thoughts?

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 17 (9 by maintainers)

Most upvoted comments

<Switch
   width={60}
   height={30}
   circleColor={'white'}
   backgroundInactive={'rgba(255,255,255,0.2)'}
   backgroundActive={appColors.green}
   onSyncPress={(value) => this.props.toggleDayAvailability(this.props, day, value);}
   value={dayIsActive(this.props, day.key)}
/>

const dayIsActive = (props, key) => {
  return _.find(props.availability, ['dow', key]) ? true : false;
};

toggleDayAvailability basically just sends a request to the server to update that field’s value.

The switches that aren’t making any server calls in the onSyncPress are working perfectly, but this particular one looks to be getting updated with new props which causes the animation to happen twice.

amhinson on Feb 8, 2017