tabs - React Native TabBarIOS transition animation? -


is possible have transitions views rendered , displayed tabbarios? navigator component has them. i'm having implement navigator , control via tabbarios, seems bit long winded

react native v0.21

class tabs extends component {    constructor(props) {     super(props)      this.state = {       tab: 1     }   }    render() {      this.anim = new animated.value(0)      return (       <view style={{ flex: 1 }}>         <tabbarios>           <tabbarios.item             title="tab 1"             selected={this.state.tab === 1}             onpress={() => {               this.setstate({                 tab: 1               })                animated.spring(this.anim, {                 tovalue: 0,                 velocity: 3,                 tension: -10,                  friction: 1               }).start()             }}>             <animated.view style={[{               flex: 1,               backgroundcolor: 'red',               justifycontent: 'center',               alignitems: 'center',               transform: [                    {                   scale: this.anim.interpolate({                     inputrange: [0, 1],                     outputrange: [1, 4],                   })                 },                 {                   translatex: this.anim.interpolate({                     inputrange: [0, 1],                     outputrange: [0, 500],                   })                 },                 {                   rotate: this.anim.interpolate({                     inputrange: [0, 1],                     outputrange: [                       '0deg', '360deg'                     ],                   })                 },               ]             }]}>               <text>tab 1</text>             </animated.view>           </tabbarios.item>           <tabbarios.item             title="tab 2"             selected={this.state.tab === 2}             onpress={() => {               this.setstate({                 tab: 2               })             }}>             <text>tab 2</text>           </tabbarios.item>         </tabbarios>       </view>     )   } } 

based on example animated https://github.com/facebook/react-native/blob/0.21-stable/examples/uiexplorer/animatedexample.js#l105-l141


Comments