react-native-twitter-like-header
React native twitter-like animated header
Last updated 2 months ago by codemecodeyou .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-native-twitter-like-header 
SYNC missed versions from official npm registry.

React Native "twitter-like" animated header

Twitter-like animation

Installation

npm i react-native-twitter-like-header

Usage

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import RNTwitterLikeHeader from 'react-native-twitter-like-header';

export default function App() {
  return (
    <RNTwitterLikeHeader>
      <View style={styles.container}>
        <Text>My text is here!</Text>
      </View>
    </RNTwitterLikeHeader>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

Props

Props default type
headerMaxHeight 120 number
headerMinHeight 70 number
profileImageMaxHeight 80 number
profileImageMinHeight 40 number
headerBackgroundColor 'lightskyblue' string
usernameAvatar 'USERNAME' string
usernameHeader 'USERNAME' string
usernameFontSize 16 number
usernameFontWeight 'bold' string
usernameFontColor 'white' string
usernamePaddingBottom 5 number
avatarBorderWidth 3 number
avatarBorderColor 'white' string
avatarMarginLeft 10 number
avatarFontSize 20 number
avatarFontWeight 'bold' string
avatarFontColor 'black' string
avatarTextPaddingLeft 10 number
getAvatarImage null require('./image.jpg')
children <View><Text>MyText</Text></View> JSX.Element / React.Node

Example

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import RNTwitterLikeHeader from 'react-native-twitter-like-header';

export default function App() {
  return (
    <RNTwitterLikeHeader
      headerMaxHeight={130}
      headerMinHeight={80}
      profileImageMaxHeight={90}
      profileImageMinHeight={50}
      headerBackgroundColor={'green'}
      usernameAvatar={'John Doe'}
      usernameHeader={'John Doe'}
      usernameFontSize={18}
      getAvatarImage={require('./path/to/my/avatar.jpg')}
    >
      // Thats my custom children
      <View style={styles.container}>
        <Text>My text is here!</Text>
      </View>
    </RNTwitterLikeHeader>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

Current Tags

  • 1.0.20                                ...           latest (2 months ago)

11 Versions

  • 1.0.20                                ...           2 months ago
  • 1.0.18                                ...           2 months ago
  • 1.0.16                                ...           2 months ago
  • 1.0.15                                ...           2 months ago
  • 1.0.13                                ...           2 months ago
  • 1.0.11                                ...           2 months ago
  • 1.0.9                                ...           2 months ago
  • 1.0.8                                ...           2 months ago
  • 1.0.6                                ...           2 months ago
  • 1.0.3                                ...           2 months ago
  • 1.0.1                                ...           2 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 11
Last Day 0
Last Week 11
Last Month 0
Dependencies (0)
None
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |