Skip to content

turker0/header

Repository files navigation

@oguzturker8/header

A header library for react-native. Uses power of reanimated2.

Installation

npm install @oguzturker8/header

Usage

Basic Header Usage

Navigation.tsx
import Header from '@oguzturker8/header';

// ...

<NavigationContainer>
  // ....
  <Stack.Navigator>
    // ...
    <Stack.Screen
      name="Screen1"
      component={Screen1}
      options={{
        header: (props) => <Header {...props} title="title1337" />,
      }}
    />
    // ...
  </Stack.Navigator>
</NavigationContainer>;

// ...

Header Scroll Animation

Navigation.tsx
import Header from '@oguzturker8/header';

// ...

<NavigationContainer>
  // ....
  <Stack.Navigator>
    // ...
    <Stack.Screen
      name="Screen4"
      component={Screen4}
      //  Declare it in Screen Component
      //  options={{
      //    header: (props) => (
      //      <Header {...props} title="Screen 04" type={{ right: 'close' }} />
      //    ),
      //  }}
    />
    // ...
  </Stack.Navigator>
</NavigationContainer>;

// ...
Screen4.tsx
import {
  AnimatedScrollView,
  Header,
  useHeaderAnimation,
} from '@oguzturker8/header';

function Screen4({ navigation }: screenNavigation) {
  const { scrollOffset, scrollHandler } = useHeaderAnimation();
  React.useLayoutEffect(() => {
    navigation.setOptions({
      header: (props) => (
        <Header
          {...props}
          title="Screen 04"
          type={{ right: 'close' }}
          animation={{
            animatedValue: scrollOffset,
            background: {
              colorRange: ['blue', 'red'],
              slidingRange: [0, 100],
            },
          }}
        />
      ),
    });
  }, [navigation]);

  return (
    <AnimatedScrollView onScroll={scrollHandler}>
      <View style={styles.container}>
        <Text>Screen4</Text>
        <Button title="Reset stack" onPress={() => navigation.popToTop()} />
        <Text>Screen4</Text>
        {Array.from({ length: 100 }, (_, i) => (
          <Text key={i}>{`${i + 1}. Text`}</Text>
        ))}
      </View>
    </AnimatedScrollView>
  );
}

Properties

Header

Prop Description Type
style Header container style prop.
Includes 5 parts
leftStyle
rightStyle
centerStyle
wrapperStyle
titleStyle
leftStyle?: ViewStyle
rightStyle?: ViewStyle
centerStyle?: ViewStyle
wrapperStyle?: ViewStyle
titleStyle?: TextStyle
title Header title text string
type Decides left and right parts' types LeftType = 'back' - 'close'
RightType = 'back' - 'close'
callback Parts' onPress callbacks onLeft?: () => any
onRight?: () => any
onCenter?: () => any
size Parts' text sizes left?: number
right?: number
center?: number
animation Header animations Described below section

Animation

Animations Description Type
background Header backgroundColor interpolation animation based on ScrollView's scrollOffset. colorRange: string[]
slidingRange: string[]

Contributing

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

License

MIT