DRAFT VERSION
A simple approach to complex animation for toggle switch
Toggle switches are quite common in almost every application. There are many switch components available out there and each one has it own desing. We were looking for a switch component that has label and slide behaviour. We did found a library that offer this behaviour, we were happy. But we also needed swip behaviour to toggle the state. We did find a llibrary that offer swip behaviour but it does not offer switch label. So we had to desing a new component to do the job.
npm install --save react-native-toggle-switch// TODO
// TODO
Initiall we tought to create the component using Animated library and do whatever needed to accomplish the task. Then we step back a bit and thought is there any feature/behaviour available in RN that we can use to desing the switch component. The answers is YES, RN does has a component, the ScrollView component. Sounds great, ScrollView by default provides swipable behaviour (:heart_eyes: we are free from any kind of animation), we can align ScrollView horizontally, we can get ride of scroll bar as well, we can move the conent to left or to right just using ScrollView's API calls. ScrollView seems to be a perfect fit for a Switch like component.
Please consider the following diagrams to understand the desing
As first step we need to define the final boundary of the component, that is View-Port, we can use View component for this.
New we are placing the ScrollView inside the view port
Now we need main container which will hold all the pieces for the Switch component
Stage is set for us, next we need to place all the three pieces
Active View
Inactive View
Now that every thing is ready, all we need is to place the scroll position based on user action. Like if user tap on the component we need to toggle the state, we can do that by sending scroll position to either scrollToTop or scrollToEnd based on the state. If user slide, then we just need to toggle the state based on contentOffset only.
Pease feel free to create issue and raise PR 😊