transitioned
react-native transition enabler.
Install
npm install transitioned
Simple
import transitioned from 'transitioned'
import { View } from 'react-native'
const Toggle = ({ on, ...props }) => <View style={{
width: 24,
height: 24,
margin: 2,
bordeRadius: 12,
overflow: 'hidden',
backgroundColor: on ? 'white' : 'gray',
position: 'absolute',
top: 0,
left: on ? 22 : 0
}} />
// transition style value
const TransitionedToggle = transitioned('left 0.1s linear')(Toggle)
// can be multiple
const TransitionedToggle = transitioned('left 0.1s linear,opacity 0.5s ease-in')(Toggle)
// transition style value as object
const TransitionedToggle = transitioned({
name: 'left',
duration: '0.1s',
timingFunction: 'linear',
delay: '0.1s'
})(Toggle)
// transition style value as object
const TransitionedToggle = transitioned([
{
name: 'left',
duration: '0.1s',
timingFunction: 'linear',
delay: '0.1s'
},
{
name: 'opacity',
duration: '0.2s',
timingFunction: 'linear'
},
])(Toggle)
<!-- TODO:
// or with function
const TransitionedToggle = transitioned(prop => `left ${prop.duration} linear`)(Toggle)
-->
// changing `on` value cause transitioned animation.
<TransitionedToggle duration='2s' on={true|false} />
styled-components
With import transitioned from 'transitioned'
import styled from 'styled-components'
import { View } from 'react-native'
const Toggle = styled(
// enabled transition for View
transitioned('left 0.1s linear')(View)
)`
width: 24px;
height: 24px;
margin: 2px;
border-radius: 12px;
overflow: hidden;
background-color: ${props => props.on ? 'white' : 'gray'};
position: absolute;
top: 0;
left: ${props => props.on ? 22 : 0}px;
`
Author
Yusuke Shibata
License
MIT