rnc

react-native-css-transition

Enable animate react-native components like css transition property.

Showing:

Popularity

Downloads/wk

1

GitHub Stars

5

Maintenance

Last Commit

4yrs ago

Contributors

1

Package

Dependencies

3

License

BSD-2-Clause

Type Definitions

Tree-Shakeable

No?

Categories

Readme

react-native-css-transition

Enable animate react-native components like css transition property.

Install

npm install react-native-css-transition
import Transition from 'react-native-css-transition';

Dependencies

react-native-styling: For compling nested raw style sheet.

Basic usage

Preparing style sheet

It's not a must to use react-native-styling for compling sheet, but we recommended for improving performance.

export const styles = {
    Counter:{
        stateTest: {
            default: {
                transition:[{    //Must not pass to native StyleSheet.create directly, will cause error
                    property:"color",
                    duration:1000,
                    delay:0,
                    timingFunction:Easing.back, // native Easing options
                    interpolate:{   // Default interpolate option for non-numeric value, auto generated
                            inputRange: [0, 100],
                            outputRange: ["#333", "#333"] // Default is initial value
                    },
                    sequence:0, //determinate the property animation effect run sync/async with others, default all zero  
                },{
                    property:"fontSize",
                    duration:1000,
                    delay:0,
                    timingFunction:Easing.back,
                    sequence:1,
                }],
                color: '#333'
            },
            1:{
                color: 'yellow'
            },
            2:{
                color: 'orange'
            },
            3:{
                color: 'red'
            }
        }
    }
};

export const compliedStyle = CreateNestedStyleSheet(styles);

Component

Supports the same basic components as react native Animated: Text, View, ScrollView, Image

<Transition.Text 
  style={GetStyle(compliedStyle.Counter.stateTest,{fontSize:10+stateValue*5},stateValue)} //will change as stateValue changed
  animationOptions={{_all:{useNativeDriver:true}}}
  >{v}</Transition.Text>

Props

style

Can be a normal style ID(s) or raw style properties, or stated sheet by CreateNestedStyleSheet with transition property. The transition component will monitor the delegated properties accroding to transition property setting and animated them on changed. Just like how CSS transition property works.

animationPlayed

Callback on animation played, work as Animation.start(animationPlayed).

animationOptions

Animation option object. First level key match with animated property name, _all to match all. These options will overwrite computed property value.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100