0.0.3 • Published 4 years ago

react-native-animation-header v0.0.3

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

Animation header

  yarn add react-native-animation-header 

Alt Text

Example

import RNAnimationHeader ,{ AnimationHeaderRef } from "react-native-animation-header"
import Text from "react-native"

export function App() {

    const animationHeaderRef = useRef<AnimationHeaderRef>(null)

    return (
        <>
         <RNAnimationHeader
            title="Hello World"
            ref={animationHeaderRef} 
            limit={60} // limit to toggle default 250
            changeStatusBarColor={false} // default true
             
            //   leftElement={ // left element
            //      <MaterialIcons name="keyboard-arrow-left" size={24} color="black" />
            //   }
            //   rightElement={ // right element
            //     <View/>
            //   }
            //    directions={{ 
            //     from:'light-content',// hide header statusBar color default dark-content
            //     to:'dark-content' // show header statusBar color default light-content
            //    }}
            //    customStyleContainer={{ // container style
            //        backgroundColor:'red'
            //    }}
            //    customStyleText={{ // text center style
            //        fontSize:20
            //    }}
            //    animationDuration={200} // 200ms
         />
         <ScrollView
            showsVerticalScrollIndicator={false}
            scrollEventThrottle={16}
            onScroll={(event) =>  {               
                if(animationHeaderRef.current) {
                    animationHeaderRef.current.getScrollPosition(event)
                }
            }}
            contentContainerStyle={{ height: 1500 , alignItems:'center' , paddingTop:100 }}
         >
             <Text>Scroll View</Text>
         </ScrollView>
        </>
    )
}

Properties

namedescriptiontypeisOptionaldefault
titlecenter textstringNo
refreferenceAnimationHeaderRefNo
limitlimit header togglenumberYes250
changeStatusBarColorif the color of the statusBar should change to appearbooleanYestrue
leftElementcomponent reactReact.ComponentYesnull
rightElementcomponent reactReact.ComponentYesnull
directionsstatus bar color, start and endObjectYes{ from: 'dark-content', to:'light-content' }
customStyleContainerstyle containerStylePropYes
customStyleTextstyle center textStylePropYes
animationDurationanimation durationnumberYes200