react-native-kbn-h v0.3.0

react-native-kbn-h

react native animated header multi-platform

Installation

npm install --save-dev react-native-kbn-h

Demo

Usage

easy to use, just add your custom or leave the default blank, Here is an example of using

import * as React from 'react';
import { StyleSheet, View, Text, TouchableOpacity, ScrollView, Animated } from 'react-native';

import HeaderAnimation from 'react-native-kbn-h';

export default function App() {

  return (
    <HeaderAnimation
      backgroundImage={{ uri: "https://cdn.pixabay.com/photo/2022/01/16/10/51/leaves-6941709__340.jpg" }}
      isBgTransition={true}
      height={200}
      isLeft={true}
      isRight={true}
      numberElmOnNavLine={6}
      heightNavigation={50}
      elementRight={[
        {
          element: <Text>Icon</Text>,
          onPress: () => console.log('1'),
          text: 'Your title',
        },
        {
          element: <Text>Icon</Text>,
          onPress: () => console.log('2'),
          text: 'Your title',
        },
      ]}
      elements={[
        {
          icon: 'Icon',
          onPress: () => console.log('1'),
          text: 'Your title',
        },
        {
          icon: 'Icon',
          onPress: () => console.log('2'),
          text: 'Your title',
        },
        {
          icon: 'Icon',
          onPress: () => console.log('3'),
          text: 'Your title',
        },
      ]}
    >
       <View style={{ backgroundColor: "#fff", height: 1200 }}>
       //.....
      </View>
    </HeaderAnimation>

  );
}

Props

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT