search

codeherence / react-native-header

A high-performance, cross-platform animated header component for React Native applications.
MIT License
237 stars 20 forks source link

Search bar and filters area #32

Closed marijang closed 5 months ago

marijang commented 5 months ago

Do you plan to implement header search and header filters? Just like react navigation?

e-younan commented 5 months ago

You can add your own custom components to the headers in this library. In this case, you would want to add a TextInput to the LargeHeaderComponent or LargeHeaderSubtitleComponent to implement search.

marijang commented 5 months ago

Cool:D

You have only fade in header when large title comes to top? How to achieve like react navigation that title slide ?

e-younan commented 5 months ago

Do you mind providing a video displaying what you are referencing?

marijang commented 5 months ago

ok like if you have githum mobile app so you can see example on all pages. Also i have situation that in left header i have Back icon and content like avatar and user name.

so actualy i want to see only back icon but when i scroll large title i want avatar and user name show in header. I don7t want to put into center...

HOw to achive that? Simulator Screenshot - iPhone 15 - 2024-04-26 at 19 14 28

marijang commented 5 months ago

ad github example... IMG_6090

e-younan commented 5 months ago

For the back icon + avatar and username, you can do the following in your Header component:

import {
  FadingView,
  Header,
  ScrollHeaderProps,
} from '@codeherence/react-native-header';

const HeaderComponent = ({ showNavBar }: ScrollHeaderProps) => {
  const { styles } = useStyles(stylesheet);

  return (
    <Header
      showNavBar={showNavBar}
      headerLeft={
        <>
          <BackButton />
          { /* The "FadingView" is exported from the library as a convenience component. */ }
          <FadingView style={{ flexDirection: 'row', gap: 6 }}  opacity={showNavBar}>
            <Image
              source={{ uri: instrument.logo_url }}
              style={styles.headerLogo}
              contentFit="contain"
              contentPosition="center"
            />
            <Body numberOfLines={1}>username</Body>
          </FadingView>
        </>
      }
    />
  );
};

Obviously, adjust the code above to work with your implementation.

For the initial animation you asked about, I am still confused on what exactly you are referencing. Are you talking about when the user presses the back button, the header will animate its contents?

marijang commented 5 months ago

Works like a charm:D

How to expand space for left content?

marijang commented 5 months ago

Simulator Screenshot - iPhone 15 - 2024-04-26 at 20 26 56

Title is cutted

marijang commented 5 months ago

also how to change background color? By the way code is great!:D

e-younan commented 5 months ago

Simulator Screenshot - iPhone 15 - 2024-04-26 at 20 26 56

Title is cutted

There is default styling to make the headerLeft and headerRight components have a flex of 1. You need to adjust their styles (i.e., headerStyleLeft and headerStyleRight) accordingly if you want the left side to take up more room.

e-younan commented 5 months ago

also how to change background color? By the way code is great!:D

You can adjust the style of the header via headerStyle. If you want to animate the background colour when the user scrolls, you can use the SurfaceComponent prop for more complex interactions.

e-younan commented 5 months ago

ad github example...

IMG_6090

This animation is not supported at the moment. You could easily implement this by using the scrollY that is provided to the HeaderComponent and LargeHeaderComponent - it's just a simple translation.

marijang commented 5 months ago

Yep it will be cool to be in packgage it will be great:D That will be new feature:D

marijang commented 5 months ago

also my suggestion is to add search maybe filters and buttons in package:D

e-younan commented 5 months ago

Yep it will be cool to be in packgage it will be great:D That will be new feature:D

Feel free to open a PR introducing this feature! I will close this issue for now, if you are having any issues in the future, feel free to open another one. :)