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} />

With styled-components

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