React Native Scrollable Navigation Bar

https://github.com/zobeirhamid/react-native-scrollable-navigation-bar
Admin
Respecting navigation bar for scrolling screens.
Tokens:10,873
Snippets:58
Trust Score:7.7
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Project Dependencies

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/README.md

Installs all necessary project dependencies for the Docusaurus website using Yarn. This command should be run once after cloning the repository.

```Shell
$ yarn
```

--------------------------------

### Start Local Development Server

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/README.md

Initiates a local development server for the Docusaurus website. This command automatically opens a browser window and supports live reloading, reflecting most changes without requiring a server restart.

```Shell
$ yarn start
```

--------------------------------

### Run React Native Example Application

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/CONTRIBUTING.md

Commands to start the Metro packager and run the example application on various platforms (Android, iOS, Web). Changes in JavaScript code are reflected without rebuild, while native code changes require a rebuild.

```sh
yarn example start
```

```sh
yarn example android
```

```sh
yarn example ios
```

```sh
yarn example web
```

--------------------------------

### Available Project Scripts

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/CONTRIBUTING.md

Lists and describes the common development scripts defined in the `package.json` file, providing quick access to various tasks like setup, type checking, linting, testing, and running the example application.

```APIDOC
yarn bootstrap: setup project by installing all dependencies and pods.
yarn typescript: type-check files with TypeScript.
yarn lint: lint files with ESLint.
yarn test: run unit tests with Jest.
yarn example start: start the Metro server for the example app.
yarn example android: run the example app on Android.
yarn example ios: run the example app on iOS.
```

--------------------------------

### Install react-native-scrollable-navigation-bar via npm

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/welcome/installation.md

Installs the `react-native-scrollable-navigation-bar` package using npm, making it available for use in your React Native project. This command adds the library to your project's dependencies.

```bash
npm install react-native-scrollable-navigation-bar
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/CONTRIBUTING.md

Installs all required dependencies for the project's packages using Yarn. This is the initial step to set up the development environment.

```sh
yarn
```

--------------------------------

### Build Static Website Content

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/README.md

Generates all static content for the Docusaurus website. The output is placed into the 'build' directory, making it ready for deployment using any static content hosting service.

```Shell
$ yarn build
```

--------------------------------

### Deploy Website to GitHub Pages

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/README.md

A convenient command for building and deploying the Docusaurus website to GitHub Pages. It builds the static content and pushes it to the 'gh-pages' branch. Replace '<Your GitHub username>' with your actual GitHub username.

```Shell
$ GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
```

--------------------------------

### Full Example of Scrollable Navigation Bar Integration in React Native

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/usage/general-method.md

This comprehensive example demonstrates how to integrate the `Container` component with various sub-components like `NavigationBar`, `HeaderTitle`, and custom `View` elements to create a scrollable navigation bar with animated header effects. It showcases the use of `headerHeight`, `HeaderForegroundComponent`, `HeaderBackgroundComponent`, and other props to customize the appearance and behavior of the scrollable UI.

```jsx
function Example(props) {
  function Placeholder(props) {
    return (
      <View style={{ height: 200, margin: 50, backgroundColor: 'grey' }} />
    );
  }

  function NavigationBarComponent(props) {
    return (
      <NavigationBar
        title={'Hello World'}
        titleStyle={{ color: 'black' }}
        backgroundColor={'#f5f5f5'}
        {...props}
      />
    );
  }

  function HeaderNavigationBarComponent(props) {
    return <NavigationBar backgroundColor={'#f5f5f5'} {...props} />;
  }

  function HeaderForegroundComponent(props) {
    return (
      <HeaderTitle
        title={'Hello World'}
        titleStyle={{ color: 'black' }}
        {...props}
      />
    );
  }

  function HeaderBackgroundComponent(props) {
    return <View style={{ height: 300, backgroundColor: '#f5f5f5' }} />;
  }

  function BorderComponent(props) {
    return <Border backgroundColor={'lightgrey'} height={1} />;
  }

  function HeaderBorderComponent(props) {
    return <Border backgroundColor={'lightgrey'} height={1} />;
  }

  return (
    <View style={{ height: 500, width: 300, margin: 'auto' }}>
      <Container
        headerHeight={300}
        HeaderForegroundComponent={HeaderForegroundComponent}
        HeaderBackgroundComponent={HeaderBackgroundComponent}
        HeaderNavigationBarComponent={HeaderNavigationBarComponent}
        NavigationBarComponent={NavigationBarComponent}
        contentContainerStyle={{ backgroundColor: 'white' }}
        borderHeight={1}
        BorderComponent={BorderComponent}
        HeaderBorderComponent={HeaderBorderComponent}
      >
        <Placeholder />
        <Placeholder />
        <Placeholder />
        <Placeholder />
      </Container>
    </View>
  );
}
```

--------------------------------

### Combine Snap and Sticky Components with Collapsible Headers in React Native

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/examples/header-navigation-bar.md

This example showcases the advanced capabilities of the `react-native-scrollable-navigation-bar` library by combining `SnapComponent` and `StickyComponent` within an `AppleStyle` navigation bar. It also demonstrates how to enable collapsible and sticky collapsible behaviors, allowing for highly customizable and dynamic header animations. This setup highlights the library's power in managing multiple interactive header elements.

```jsx
function Example(props) {
  function Placeholder(props) {
    return (
      <View style={{ height: 200, margin: 50, backgroundColor: 'grey' }} />
    );
  }

  function SnapComponent() {
    return <View style={{ height: 50, backgroundColor: 'darkgreen' }} />;
  }

  function StickyComponent() {
    return <View style={{ height: 50, backgroundColor: 'red' }} />;
  }

  return (
    <View style={{ height: 500, width: 300, margin: 'auto' }}>
      <AppleStyle
        title={'Hello World'}
        borderColor={'darkred'}
        StickyComponent={StickyComponent}
        stickyHeight={50}
        SnapComponent={SnapComponent}
        snapHeight={50}
        collapsible
        stayCollapsed
        stickyCollapsible
        //stickyStayCollapsed
        headerHeight={300}
      >
        <Placeholder />
        <Placeholder />
        <Placeholder />
        <Placeholder />
      </AppleStyle>
    </View>
  );
}
```

--------------------------------

### Implementing a Snap Component in React Native Navigation Bar

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/examples/regular-navigation-bar.md

This example demonstrates the 'SnapComponent', a UI element that appears directly under the navigation bar but vanishes after the initial scroll, providing a temporary visual cue or interaction area.

```jsx
function Example(props) {
  function Placeholder(props) {
    return (
      <View style={{ height: 200, margin: 50, backgroundColor: 'grey' }} />
    );
  }

  function SnapComponent() {
    return <View style={{ height: 50, backgroundColor: 'darkgreen' }} />;
  }

  return (
    <View style={{ height: 500, width: 300, margin: 'auto' }}>
      <AppleStyle
        title={'Hello World'}
        borderColor={'green'}
        SnapComponent={SnapComponent}
        snapHeight={50}
      >
        <Placeholder />
        <Placeholder />
        <Placeholder />
        <Placeholder />
      </AppleStyle>
    </View>
  );
}
```

--------------------------------

### Implement a basic React Native Apple-style navigation bar

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/examples/regular-navigation-bar.md

Demonstrates how to use the `AppleStyle` component from `react-native-scrollable-navigation-bar` to create a standard navigation bar with a title. This example shows a non-scrollable, fixed navigation bar, suitable for simple header implementations.

```jsx
import { AppleStyle } from 'react-native-scrollable-navigation-bar';

function Example(props) {
  function Placeholder(props) {
    return (
      <View style={{ height: 200, margin: 50, backgroundColor: 'grey' }} />
    );
  }

  return (
    <View style={{ height: 500, width: 300, margin: 'auto' }}>
      <AppleStyle title={'Hello World'}>
        <Placeholder />
        <Placeholder />
        <Placeholder />
        <Placeholder />
      </AppleStyle>
    </View>
  );
}
```

--------------------------------

### Combining Snap and Sticky Components with Collapse Animations

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/examples/regular-navigation-bar.md

This snippet showcases the library's ability to combine multiple animation features, specifically integrating 'StickyComponent' and 'SnapComponent' with various collapsible behaviors, demonstrating a powerful and flexible navigation bar design.

```jsx
function Example(props) {
  function Placeholder(props) {
    return (
      <View style={{ height: 200, margin: 50, backgroundColor: 'grey' }} />
    );
  }

  function SnapComponent() {
    return <View style={{ height: 50, backgroundColor: 'darkgreen' }} />;
  }

  function StickyComponent() {
    return <View style={{ height: 50, backgroundColor: 'red' }} />;
  }

  return (
    <View style={{ height: 500, width: 300, margin: 'auto' }}>
      <AppleStyle
        title={'Hello World'}
        borderColor={'darkred'}
        StickyComponent={StickyComponent}
        stickyHeight={50}
        SnapComponent={SnapComponent}
        snapHeight={50}
        collapsible
        stayCollapsed
        stickyCollapsible
        //stickyStayCollapsed
      >
        <Placeholder />
        <Placeholder />
        <Placeholder />
        <Placeholder />
      </AppleStyle>
    </View>
  );
}
```

--------------------------------

### Import Components and Hooks from react-native-scrollable-navigation-bar

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/welcome/installation.md

Imports various UI components and utility hooks from the `react-native-scrollable-navigation-bar` library. This allows you to use elements like `Container`, `NavigationBar`, `HeaderTitle`, and hooks such as `useAnimatedValue` in your React Native application.

```jsx
import {
  Container,
  NavigationBar,
  HeaderTitle,
  Border,
  StatusBar,
  AppleStyle,
  constants,
  useAnimatedValue,
  useHasReachedTransitionPoint,
  useMeasurements,
  Transitioner,
  Appearer,
} from 'react-native-scrollable-navigation-bar';
```

--------------------------------

### Create a collapsible React Native Apple-style navigation bar

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/examples/regular-navigation-bar.md

Illustrates how to make the `AppleStyle` navigation bar collapse when scrolling down and reappear when scrolling up by setting the `collapsible` prop to `true`. This enhances screen real estate during content viewing, providing a cleaner user interface.

```jsx
import { AppleStyle } from 'react-native-scrollable-navigation-bar';

function Example(props) {
  function Placeholder(props) {
    return (
      <View style={{ height: 200, margin: 50, backgroundColor: 'grey' }} />
    );
  }

  return (
    <View style={{ height: 500, width: 300, margin: 'auto' }}>
      <AppleStyle title={'Hello World'} collapsible>
        <Placeholder />
        <Placeholder />
        <Placeholder />
        <Placeholder />
      </AppleStyle>
    </View>
  );
}
```

--------------------------------

### Implement Regular Image Background with AppleStyle

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/examples/image-background.md

This example demonstrates how to set up a static image background for the header using the `AppleStyle` component. It's crucial to set `headerBackgroundColor` to `transparent` to allow the image to be visible.

```jsx
import { AppleStyle } from 'react-native-scrollable-navigation-bar';

function Example(props) {
  function Placeholder(props) {
    return (
      <View style={{ height: 200, margin: 50, backgroundColor: 'grey' }} />
    );
  }

  function HeaderBackgroundComponent(props) {
    return (
      <Image
        source={{
          uri: '/react-native-scrollable-navigation-bar/img/paris.jpg',
        }}
        style={{ width: 300, height: 300 }}
      />
    );
  }

  return (
    <View style={{ height: 500, width: 300, margin: 'auto' }}>
      <AppleStyle
        headerHeight={300}
        title={'Hello World'}
        HeaderBackgroundComponent={HeaderBackgroundComponent}
        headerBackgroundColor={'transparent'}
        headerTitleColor={'white'}
      >
        <Placeholder />
        <Placeholder />
        <Placeholder />
        <Placeholder />
      </AppleStyle>
    </View>
  );
}
```

--------------------------------

### Implement a collapsible sticky component with React Native Apple-style navigation bar

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/examples/regular-navigation-bar.md

Illustrates how to make the `StickyComponent` itself collapsible along with the main navigation bar. By setting `stickyCollapsible`, the sticky component will hide and show with the navigation bar, optimizing screen space and maintaining visual consistency.

```jsx
import { AppleStyle } from 'react-native-scrollable-navigation-bar';

function Example(props) {
  function Placeholder(props) {
    return (
      <View style={{ height: 200, margin: 50, backgroundColor: 'grey' }} />
    );
  }

  function StickyComponent() {
    return <View style={{ height: 50, backgroundColor: 'red' }} />;
  }

  return (
    <View style={{ height: 500, width: 300, margin: 'auto' }}>
      <AppleStyle
        title={'Hello World'}
        borderColor={'darkred'}
        StickyComponent={StickyComponent}
        stickyHeight={50}
        stickyCollapsible
      >
        <Placeholder />
        <Placeholder />
        <Placeholder />
        <Placeholder />
      </AppleStyle>
    </View>
  );
}
```

--------------------------------

### Implement a React Native Apple-style navigation bar that stays collapsed

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/examples/regular-navigation-bar.md

Shows how to keep the `AppleStyle` navigation bar hidden at all times using the `stayCollapsed` prop. This is particularly useful when combined with a `StickyComponent` to maintain a consistent layout where the navigation bar is not needed upfront.

```jsx
import { AppleStyle } from 'react-native-scrollable-navigation-bar';

function Example(props) {
  function Placeholder(props) {
    return (
      <View style={{ height: 200, margin: 50, backgroundColor: 'grey' }} />
    );
  }

  return (
    <View style={{ height: 500, width: 300, margin: 'auto' }}>
      <AppleStyle title={'Hello World'} collapsible stayCollapsed>
        <Placeholder />
        <Placeholder />
        <Placeholder />
        <Placeholder />
      </AppleStyle>
    </View>
  );
}
```

--------------------------------

### Add a regular sticky component to a React Native Apple-style navigation bar

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/examples/regular-navigation-bar.md

Demonstrates how to attach a `StickyComponent` directly below the `AppleStyle` navigation bar. This component remains visible and fixed, providing persistent content or controls. The `stickyHeight` prop defines its size and ensures proper layout.

```jsx
import { AppleStyle } from 'react-native-scrollable-navigation-bar';

function Example(props) {
  function Placeholder(props) {
    return (
      <View style={{ height: 200, margin: 50, backgroundColor: 'grey' }} />
    );
  }

  function StickyComponent() {
    return <View style={{ height: 50, backgroundColor: 'red' }} />;
  }

  return (
    <View style={{ height: 500, width: 300, margin: 'auto' }}>
      <AppleStyle
        title={'Hello World'}
        borderColor={'darkred'}
        StickyComponent={StickyComponent}
        stickyHeight={50}
      >
        <Placeholder />
        <Placeholder />
        <Placeholder />
        <Placeholder />
      </AppleStyle>
    </View>
  );
}
```

--------------------------------

### Implement a plain header navigation bar with AppleStyle

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/examples/header-navigation-bar.md

Demonstrates how to use the `AppleStyle` component to create a basic header navigation bar with a fixed `headerHeight`. This setup provides a static header that does not collapse or hide on scroll.

```jsx
import { AppleStyle } from 'react-native-scrollable-navigation-bar';
```

```jsx
function Example(props) {
  function Placeholder(props) {
    return (
      <View style={{ height: 200, margin: 50, backgroundColor: 'grey' }} />
    );
  }

  return (
    <View style={{ height: 500, width: 300, margin: 'auto' }}>
      <AppleStyle title={'Hello World'} headerHeight={300}>
        <Placeholder />
        <Placeholder />
        <Placeholder />
        <Placeholder />
      </AppleStyle>
    </View>
  );
}
```

--------------------------------

### Configure Header Icons in AppleStyle Navigation Bar

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/examples/icons.md

This example illustrates how to use `headerLeftIcons` and `headerRightIcons` to display different icons before the `transitionPoint` in the `AppleStyle` component. These icons are typically visible when the header is in its expanded state. It also shows how to combine them with a custom `HeaderBackgroundComponent`.

```jsx
import { AppleStyle } from 'react-native-scrollable-navigation-bar';
import Ionicons from 'react-native-vector-icons/Ionicons';
```

```jsx
function Example(props) {
  function Placeholder(props) {
    return (
      <View style={{ height: 200, margin: 50, backgroundColor: 'grey' }} />
    );
  }

  function HeaderBackgroundComponent(props) {
    return (
      <Image
        source={{
          uri: '/react-native-scrollable-navigation-bar/img/paris.jpg',
        }}
        style={{ width: 300, height: 300 }}
      />
    );
  }

  return (
    <View style={{ height: 500, width: 300, margin: 'auto' }}>
      <AppleStyle
        headerHeight={300}
        title={'Hello World'}
        HeaderBackgroundComponent={HeaderBackgroundComponent}
        headerBackgroundColor={'transparent'}
        headerTitleColor={'white'}
        headerLeftIcons=[
          <Ionicons name={'ios-rocket'} size={24} style={{ color: 'white' }} />,
          <Ionicons name={'ios-heart'} size={24} style={{ color: 'white' }} />,
        ]
        headerRightIcons=[
          <Ionicons name={'ios-heart'} size={24} style={{ color: 'white' }} />,
          <Ionicons name={'ios-rocket'} size={24} style={{ color: 'white' }} />,
        ]
        leftIcons=[
          <Ionicons name={'ios-rocket'} size={24} style={{ color: 'black' }} />,
          <Ionicons name={'ios-heart'} size={24} style={{ color: 'black' }} />,
        ]
        rightIcons=[
          <Ionicons name={'ios-heart'} size={24} style={{ color: 'black' }} />,
          <Ionicons name={'ios-rocket'} size={24} style={{ color: 'black' }} />,
        ]
      >
        <Placeholder />
        <Placeholder />
        <Placeholder />
        <Placeholder />
      </AppleStyle>
    </View>
  );
}
```

--------------------------------

### Create a sticky component that stays collapsed with React Native Apple-style navigation bar

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/examples/regular-navigation-bar.md

Shows how to keep the `StickyComponent` hidden at all times, similar to the `stayCollapsed` prop for the main navigation bar, by using `stickyStayCollapsed`. This ensures the sticky component is not visible unless explicitly revealed, providing a clean initial view.

```jsx
import { AppleStyle } from 'react-native-scrollable-navigation-bar';

function Example(props) {
  function Placeholder(props) {
    return (
      <View style={{ height: 200, margin: 50, backgroundColor: 'grey' }} />
    );
  }

  function StickyComponent() {
    return <View style={{ height: 50, backgroundColor: 'red' }} />;
  }

  return (
    <View style={{ height: 500, width: 300, margin: 'auto' }}>
      <AppleStyle
        title={'Hello World'}
        borderColor={'darkred'}
        StickyComponent={StickyComponent}
        stickyHeight={50}
        stickyCollapsible
        stickyStayCollapsed
      >
        <Placeholder />
        <Placeholder />
        <Placeholder />
        <Placeholder />
      </AppleStyle>
    </View>
  );
}
```

--------------------------------

### Add a regular sticky component to AppleStyle navigation bar

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/examples/header-navigation-bar.md

Demonstrates integrating a `StickyComponent` that remains visible just below the navigation bar. This example shows a non-collapsible sticky component, providing a fixed element that scrolls with the content but stays anchored below the header.

```jsx
import { AppleStyle } from 'react-native-scrollable-navigation-bar';
```

```jsx
function Example(props) {
  function Placeholder(props) {
    return (
      <View style={{ height: 200, margin: 50, backgroundColor: 'grey' }} />
    );
  }

  function StickyComponent() {
    return <View style={{ height: 50, backgroundColor: 'red' }} />;
  }

  return (
    <View style={{ height: 500, width: 300, margin: 'auto' }}>
      <AppleStyle
        title={'Hello World'}
        borderColor={'darkred'}
        StickyComponent={StickyComponent}
        stickyHeight={50}
        headerHeight={300}
      >
        <Placeholder />
        <Placeholder />
        <Placeholder />
        <Placeholder />
      </AppleStyle>
    </View>
  );
}
```

--------------------------------

### Implement Carousel in AppleStyle Header

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/examples/image-background.md

Demonstrates how to integrate a horizontal image carousel into the `AppleStyle` navigation bar's header background. This example utilizes a `ScrollView` with `pagingEnabled` to create a swipeable gallery, showcasing the flexibility of the `HeaderBackgroundComponent` prop for rich header content.

```jsx
function Example(props) {
  function Placeholder(props) {
    return (
      <View style={{ height: 200, margin: 50, backgroundColor: 'grey' }} />
    );
  }

  function HeaderBackgroundComponent(props) {
    return (
      <ScrollView
        horizontal
        pagingEnabled
        showsHorizontalScrollIndicator={false}
      >
        <Image
          source={{
            uri: '/react-native-scrollable-navigation-bar/img/paris.jpg',
          }}
          style={{ width: 300, height: 300 }}
        />
        <Image
          source={{
            uri: '/react-native-scrollable-navigation-bar/img/paris.jpg',
          }}
          style={{ width: 300, height: 300 }}
        />
      </ScrollView>
    );
  }

  return (
    <View style={{ height: 500, width: 300, margin: 'auto' }}>
      <AppleStyle
        headerHeight={300}
        title={'Hello World'}
        HeaderBackgroundComponent={HeaderBackgroundComponent}
        headerBackgroundColor={'transparent'}
        headerTitleColor={'white'}
      >
        <Placeholder />
        <Placeholder />
        <Placeholder />
        <Placeholder />
      </AppleStyle>
    </View>
  );
}
```

--------------------------------

### Get Animated Value with useAnimatedValue Hook in React Native

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/API/useAnimatedValue.md

Demonstrates how to import and use the `useAnimatedValue` hook from the `react-native-scrollable-navigation-bar` library to obtain an `Animated.Value` instance. This value is commonly used to link scroll positions to animated UI elements.

```tsx
import { useAnimatedValue } from 'react-native-scrollable-navigation-bar';
const animatedValue: Animated.Value = useAnimatedValue();
```

--------------------------------

### Implement Fade Out Image Background with AppleStyle

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/examples/image-background.md

This example demonstrates how to enable a fade-out effect for the header image background. When `fadeOut` is enabled, the image will gradually disappear as the user scrolls, revealing the `backgroundColor` of the container underneath.

```jsx
import { AppleStyle } from 'react-native-scrollable-navigation-bar';

function Example(props) {
  function Placeholder(props) {
    return (
      <View style={{ height: 200, margin: 50, backgroundColor: 'grey' }} />
    );
  }

  function HeaderBackgroundComponent(props) {
    return (
      <Image
        source={{
          uri: '/react-native-scrollable-navigation-bar/img/paris.jpg',
        }}
        style={{ width: 300, height: 300 }}
      />
    );
  }

  return (
    <View
      style={{
        height: 500,
        width: 300,
        margin: 'auto',
        backgroundColor: 'beige',
      }}
    >
      <AppleStyle
        headerHeight={300}
        title={'Hello World'}
        HeaderBackgroundComponent={HeaderBackgroundComponent}
        headerBackgroundColor={'transparent'}
        headerTitleColor={'white'}
        backgroundColor={'white'}
        fadeOut
      >
        <Placeholder />
        <Placeholder />
        <Placeholder />
        <Placeholder />
      </AppleStyle>
    </View>
  );
}
```

--------------------------------

### Publish New Project Versions to npm

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/CONTRIBUTING.md

Publishes new versions of the package to npm using `release-it`. This command automates tasks such as bumping the version based on semantic versioning, creating tags, and managing releases.

```sh
yarn release
```

--------------------------------

### Implementing iOS Search Bar with AppleStyle and Refs

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/examples/search-bar.md

Demonstrates how to implement an iOS-style search bar animation using `AppleStyle` from `react-native-scrollable-navigation-bar` and `SearchBar` from `react-native-elements`. It manages focus and blur events between the `AppleStyle` container and the `SearchBar` using React `useRef` hooks.

```jsx
function Example(props) {
  const ref = useRef(null);
  const inputRef = useRef(null);

  function Placeholder(props) {
    return (
      <View style={{ height: 200, margin: 50, backgroundColor: 'grey' }} />
    );
  }

  function SnapComponent() {
    return (
      <SearchBar
        ref={inputRef}
        platform="ios"
        lightTheme
        placeholder="Type Here..."
        onFocus={() => {
          if (ref.current) {
            ref.current.focus();
          }
        }}
        onBlur={() => {
          if (ref.current) {
            ref.current.blur();
          }
        }}
        containerStyle={{ backgroundColor: 'transparent' }}
      />
    );
  }

  return (
    <View style={{ height: 500, width: 300, margin: 'auto' }}>
      <AppleStyle
        headerHeight={300}
        title={'Hello World'}
        SnapComponent={SnapComponent}
        snapHeight={72}
        ref={ref}
        onBlur={() => {
          if (inputRef.current) {
            inputRef.current.blur();
          }
        }}
      >
        <Placeholder />
        <Placeholder />
        <Placeholder />
        <Placeholder />
      </AppleStyle>
    </View>
  );
}
```

--------------------------------

### Execute Project Unit Tests

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/CONTRIBUTING.md

Runs the unit tests for the project using Jest. It's recommended to add tests for new changes to ensure functionality and prevent regressions.

```sh
yarn test
```

--------------------------------

### Importing Core Components for Scrollable Navigation Bar

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/usage/general-method.md

This snippet demonstrates how to import the essential components (`Container`, `NavigationBar`, `HeaderTitle`, `StatusBar`) from the `react-native-scrollable-navigation-bar` library, which are necessary to implement scrollable navigation bar functionalities in a React Native application.

```jsx
import {
  Container,
  NavigationBar,
  HeaderTitle,
  StatusBar,
} from 'react-native-scrollable-navigation-bar';
```

--------------------------------

### Importing Components for iOS Search Bar

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/examples/search-bar.md

Imports necessary components from `react-native-scrollable-navigation-bar` and `react-native-elements` to build an iOS-style search bar.

```jsx
import { AppleStyle } from 'react-native-scrollable-navigation-bar';
import { SearchBar } from 'react-native-elements';
```

--------------------------------

### Import AppleStyle Component

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/usage/predefined-styles.md

Imports the `AppleStyle` component from the `react-native-scrollable-navigation-bar` package, making it available for use in React Native applications.

```jsx
import { AppleStyle } from 'react-native-scrollable-navigation-bar';
```

--------------------------------

### NavigationBar Component Props API Documentation

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/API/NavigationBar.md

Comprehensive API documentation for all configurable properties of the `NavigationBar` component. This includes properties for setting the title, background color, height, text styling, and managing left and right icon arrays.

```APIDOC
NavigationBar Component Props:

- title:
    Type: string
    Default: ''
    Required: NO
    Description: The main title text displayed in the navigation bar.

- backgroundColor:
    Type: string
    Default: 'transparent'
    Required: NO
    Description: The background color of the navigation bar.

- height:
    Type: number
    Default: constants.NAVIGATION_BAR_HEIGHT
    Required: NO
    Description: The height of the navigation bar.

- titleStyle:
    Type: textStyle (React Native TextStyle)
    Default: {fontSize: 16, fontWeight: '600', color: 'black'}
    Required: NO
    Description: Custom style object for the title text.

- leftIcons:
    Type: React.ReactElement[]
    Default: []
    Required: NO
    Description: An array of React elements (e.g., icons) to be rendered on the left side of the navigation bar.

- rightIcons:
    Type: React.ReactElement[]
    Default: []
    Required: NO
    Description: An array of React elements (e.g., icons) to be rendered on the right side of the navigation bar.
```

--------------------------------

### Transitioner Component Props Reference

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/API/Transitioner.md

This section details the available props for the `Transitioner` React Native component, including their types, default values, and whether they are required. These props control the component's appearance and behavior.

```APIDOC
Transitioner Component Props:

style
  - Type: ViewStyle
  - Default: {}
  - Required: NO

distance
  - Type: number
  - Default: useMeasurements().navigationBarHeight
  - Required: NO

offset
  - Type: number
  - Default: props.distance
  - Required: NO
```

--------------------------------

### Import AppleStyle and StatusBar for UI Control

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/examples/image-background.md

Imports the `AppleStyle` component and React Native's `StatusBar` component, preparing the environment for dynamic status bar styling based on scroll events within the navigation bar.

```jsx
import { AppleStyle } from 'react-native-scrollable-navigation-bar';
import { StatusBar } from 'react-native';
```

--------------------------------

### AppleStyle Component Properties and Inheritance

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/API/AppleStyle.md

This entry details the full set of customizable properties (props) available for the AppleStyle component, a React Native UI element. It includes information on data types, default values, and whether each prop is required. The component also inherits all properties and methods from the base Container component.

```APIDOC
AppleStyle Props:

title:
  type: string
  default: ''
  required: NO
  description: The main title text displayed in the navigation bar.

headerTitle:
  type: string
  default: props.title
  required: NO
  description: The title text displayed specifically in the header section. Defaults to the main title.

backgroundColor:
  type: string
  default: 'white'
  required: NO
  description: The background color of the overall component.

titleColor:
  type: string
  default: 'black'
  required: NO
  description: The color of the main title text.

headerTitleColor:
  type: string
  default: props.titleColor
  required: NO
  description: The color of the header title text. Defaults to the main title color.

navigationBarBackgroundColor:
  type: string
  default: '#f5f5f5'
  required: NO
  description: The background color specifically for the navigation bar area.

headerBackgroundColor:
  type: string
  default: props.navigationBarBackgroundColor
  required: NO
  description: The background color specifically for the header area. Defaults to the navigation bar background color.

borderColor:
  type: string
  default: 'lightgrey'
  required: NO
  description: The default border color used by various elements within the component.

navigationBarBorderColor:
  type: string
  default: props.borderColor
  required: NO
  description: The border color specifically for the navigation bar. Defaults to the general border color.

headerBorderColor:
  type: string
  default: props.borderColor
  required: NO
  description: The border color specifically for the header. Defaults to the general border color.

borderHeight:
  type: number
  default: 1
  required: NO
  description: The height of the borders in pixels.

leftIcons:
  type: React.ReactElement[]
  default: []
  required: NO
  description: An array of React elements to display as icons on the left side of the navigation bar.

rightIcons:
  type: React.ReactElement[]
  default: []
  required: NO
  description: An array of React elements to display as icons on the right side of the navigation bar.

headerLeftIcons:
  type: React.ReactElement[]
  default: props.leftIcons
  required: NO
  description: An array of React elements to display as icons on the left side of the header. Defaults to leftIcons.

headerRightIcons:
  type: React.ReactElement[]
  default: props.rightIcons
  required: NO
  description: An array of React elements to display as icons on the right side of the header. Defaults to rightIcons.

Inherits all Container props.
Inherits all Container methods.
```

--------------------------------

### Render AppleStyle Component with Content

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/usage/predefined-styles.md

Demonstrates how to render the `AppleStyle` component within a React Native application. It shows passing `headerHeight` and `title` props, and nesting child components (`Placeholder`) to create a scrollable navigation bar with predefined UI elements.

```jsx
function Example(props) {
  function Placeholder(props) {
    return (
      <View style={{ height: 200, margin: 50, backgroundColor: 'grey' }} />
    );
  }

  return (
    <View style={{ height: 500, width: 300, margin: 'auto' }}>
      <AppleStyle headerHeight={300} title={'Hello World'}>
        <Placeholder />
        <Placeholder />
        <Placeholder />
        <Placeholder />
      </AppleStyle>
    </View>
  );
}
```

--------------------------------

### Perform Code Quality Checks

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/CONTRIBUTING.md

Commands to verify TypeScript types and run ESLint for linting. An additional command is provided to automatically fix formatting errors detected by ESLint.

```sh
yarn typescript
```

```sh
yarn lint
```

```sh
yarn lint --fix
```

--------------------------------

### Import AppleStyle Component

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/examples/image-background.md

Imports the core `AppleStyle` component from the `react-native-scrollable-navigation-bar` library, enabling the use of its scrollable navigation bar features.

```jsx
import { AppleStyle } from 'react-native-scrollable-navigation-bar';
```

--------------------------------

### Conventional Commit Message Types

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/CONTRIBUTING.md

Defines the standard commit message types used in the project, adhering to the conventional commits specification. These types help categorize changes and automate changelog generation.

```APIDOC
fix: bug fixes, e.g. fix crash due to deprecated method.
feat: new features, e.g. add new method to the module.
refactor: code refactor, e.g. migrate from class components to hooks.
docs: changes into documentation, e.g. add usage example for the module.
test: adding or updating tests, e.g. add integration tests using detox.
chore: tooling changes, e.g. change CI config.
```

--------------------------------

### Appearer Component Props

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/API/Appearer.md

Defines the available properties for the Appearer React Native component. This section details the type, default value, and whether each prop is required.

```APIDOC
### `style`
  - type: ViewStyle
  - default: {}
  - required: NO
```

--------------------------------

### Create a collapsible header navigation bar using AppleStyle

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/examples/header-navigation-bar.md

Shows how to make the `AppleStyle` navigation bar collapsible by setting the `collapsible` prop to `true`. The bar automatically hides when scrolling down and reappears when scrolling up, providing a dynamic user experience.

```jsx
import { AppleStyle } from 'react-native-scrollable-navigation-bar';
```

```jsx
function Example(props) {
  function Placeholder(props) {
    return (
      <View style={{ height: 200, margin: 50, backgroundColor: 'grey' }} />
    );
  }

  return (
    <View style={{ height: 500, width: 300, margin: 'auto' }}>
      <AppleStyle title={'Hello World'} collapsible headerHeight={300}>
        <Placeholder />
        <Placeholder />
        <Placeholder />
        <Placeholder />
      </AppleStyle>
    </View>
  );
}
```

--------------------------------

### Using useMeasurements() Hook in React Native

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/API/useMeasurements.md

Demonstrates how to import and destructure the `useMeasurements()` hook to obtain various layout measurements such as status bar height, navigation bar height, header height, and snap points, essential for building dynamic scrollable navigation UIs in React Native.

```TypeScript
import { useMeasurements } from 'react-native-scrollable-navigation-bar';
const {
  statusBarHeight,
  navigationBarHeight,
  headerHeight,
  snapHeight,
  stickyHeight,
  borderHeight,
  transitionPoint,
}: {
  statusBarHeight: number;
  navigationBarHeight: number;
  headerHeight: number;
  snapHeight: number;
  stickyHeight: number;
  borderHeight: number;
  transitionPoint: number;
} = useMeasurements();
```

--------------------------------

### Implement a collapsible sticky component with AppleStyle

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/examples/header-navigation-bar.md

Shows how to make the `StickyComponent` itself collapsible by setting `stickyCollapsible` to `true`. This allows the sticky component to hide and show in sync with the main navigation bar's collapsible behavior.

```jsx
import { AppleStyle } from 'react-native-scrollable-navigation-bar';
```

```jsx
function Example(props) {
  function Placeholder(props) {
    return (
      <View style={{ height: 200, margin: 50, backgroundColor: 'grey' }} />
    );
  }

  function StickyComponent() {
    return <View style={{ height: 50, backgroundColor: 'red' }} />;
  }

  return (
    <View style={{ height: 500, width: 300, margin: 'auto' }}>
      <AppleStyle
        title={'Hello World'}
        borderColor={'darkred'}
        StickyComponent={StickyComponent}
        stickyHeight={50}
        stickyCollapsible
        headerHeight={300}
      >
        <Placeholder />
        <Placeholder />
        <Placeholder />
        <Placeholder />
      </AppleStyle>
    </View>
  );
}
```

--------------------------------

### HeaderTitle Component Props

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/API/HeaderTitle.md

Documents the configurable properties for the `HeaderTitle` React Native component, including its display text, container styling, and text styling. Each prop specifies its type, default value, and whether it is required.

```APIDOC
HeaderTitle Component Props:

title
  type: string
  default: ''
  required: NO
  description: The main text to display in the header.

containerStyle
  type: ViewStyle
  default: {flex: 1, justifyContent: 'flex-end', padding: 15, zIndex: 1}
  required: NO
  description: Style object for the header's container View component.

titleStyle
  type: textStyle
  default: {fontSize: 36, fontWeight: 'bold', color: 'black'}
  required: NO
  description: Style object for the header's title Text component.
```

--------------------------------

### React Native Scrollable Navigation Bar Component API

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/API/Container.md

Comprehensive API documentation for the React Native Scrollable Navigation Bar component, covering its `afterTransitionPoint` property and `focus()`, `blur()` methods.

```APIDOC
afterTransitionPoint:
  type: Function
  default: () => void
  required: NO
  description: A callback function that is executed after a transition point within the scrollable navigation bar.

focus():
  description: Sets the focus on the scrollable navigation bar component.

blur():
  description: Removes the focus from the scrollable navigation bar component.
```

--------------------------------

### Import and Destructure Constants in React Native

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/API/constants.md

This snippet demonstrates how to import and destructure `STATUS_BAR_HEIGHT` and `NAVIGATION_BAR_HEIGHT` constants from the `react-native-scrollable-navigation-bar` library. These constants provide device-specific dimensions crucial for layout adjustments in React Native applications.

```tsx
import { constants } from 'react-native-scrollable-navigation-bar';
const {
  STATUS_BAR_HEIGHT,
  NAVIGATION_BAR_HEIGHT,
}: { STATUS_BAR_HEIGHT: number; NAVIGATION_BAR_HEIGHT: number } = constants;
```

--------------------------------

### Dynamic StatusBar Styling with AppleStyle Transitions

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/examples/image-background.md

Illustrates how to dynamically adjust the React Native `StatusBar` style (e.g., `light-content` or `dark-content`) as the `AppleStyle` navigation bar transitions. The `beforeTransitionPoint` and `afterTransitionPoint` props are used to trigger status bar style changes, ensuring a cohesive user interface during scrolling.

```jsx
function Example(props) {
  function Placeholder(props) {
    return (
      <View style={{ height: 200, margin: 50, backgroundColor: 'grey' }} />
    );
  }

  function HeaderBackgroundComponent(props) {
    return (
      <Image
        source={{
          uri: '/react-native-scrollable-navigation-bar/img/paris.jpg',
        }}
        style={{ width: 300, height: 300 }}
      />
    );
  }

  return (
    <View style={{ height: 500, width: 300, margin: 'auto' }}>
      <AppleStyle
        headerHeight={300}
        title={'Hello World'}
        HeaderBackgroundComponent={HeaderBackgroundComponent}
        headerBackgroundColor={'transparent'}
        headerTitleColor={'white'}
        beforeTransitionPoint={() => {
          if (StatusBar.setBarStyle) {
            StatusBar.setBarStyle('light-content');
          }
        }}
        afterTransitionPoint={() => {
          if (StatusBar.setBarStyle) {
            StatusBar.setBarStyle('dark-content');
          }
        }}
      >
        <Placeholder />
        <Placeholder />
        <Placeholder />
        <Placeholder />
      </AppleStyle>
    </View>
  );
}
```

--------------------------------

### Integrate Snap Component in React Native Navigation Bar

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/examples/header-navigation-bar.md

This snippet demonstrates how to add a `SnapComponent` to a `react-native-scrollable-navigation-bar` using the `AppleStyle` component. The `SnapComponent` is designed to appear initially and then disappear upon scrolling, providing a temporary header area. It requires defining the `SnapComponent` itself and setting its `snapHeight` property.

```jsx
function Example(props) {
  function Placeholder(props) {
    return (
      <View style={{ height: 200, margin: 50, backgroundColor: 'grey' }} />
    );
  }

  function SnapComponent() {
    return <View style={{ height: 50, backgroundColor: 'darkgreen' }} />;
  }

  return (
    <View style={{ height: 500, width: 300, margin: 'auto' }}>
      <AppleStyle
        title={'Hello World'}
        borderColor={'green'}
        SnapComponent={SnapComponent}
        snapHeight={50}
        headerHeight={300}
      >
        <Placeholder />
        <Placeholder />
        <Placeholder />
        <Placeholder />
      </AppleStyle>
    </View>
  );
}
```

--------------------------------

### Container Component Props Reference

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/API/Container.md

Comprehensive API documentation for all properties supported by the `Container` component. This includes various height configurations, animation values, boolean flags for behavior, and custom component renderers, allowing for extensive customization of scrollable navigation patterns.

```APIDOC
Container Component Props:
  Inherits all ScrollView props.

  animatedValue: Animated.Value
    default: new Animated.Value(0)
    required: NO
    description: An Animated.Value instance used for driving animations within the component.

  statusBarHeight: number
    default: constants.STATUS_BAR_HEIGHT
    required: NO
    description: The height of the device's status bar, used for layout calculations.

  navigationBarHeight: number
    default: constants.NAVIGATION_BAR_HEIGHT
    required: NO
    description: The height of the navigation bar component.

  headerHeight: number
    default: constants.NAVIGATION_BAR_HEIGHT
    required: NO
    description: The total height of the header section, including status and navigation bars.

  transitionPoint: number
    default: props.headerHeight - props.navigationBarHeight - props.statusBarHeight
    required: NO
    description: The scroll Y position at which the header's transition effect (e.g., collapse) occurs.

  stickyHeight: number
    default: 0
    required: NO
    description: The height at which the sticky component becomes fixed at the top of the screen.

  snapHeight: number
    default: 0
    required: NO
    description: The height at which the scroll view snaps to a specific position when scrolling stops.

  borderHeight: number
    default: 0
    required: NO
    description: The height of the border component, typically used for visual separation.

  collapsible: boolean
    default: false
    required: NO
    description: A boolean indicating if the header section can collapse on scroll.

  stayCollapsible: boolean
    default: false
    required: NO
    description: If true, the header will remain collapsed after the user stops interacting with it.

  stickyCollapsible: boolean
    default: false
    required: NO
    description: A boolean indicating if the sticky component itself is collapsible.

  stickyStayCollapsible: boolean
    default: false
    required: NO
    description: If true, the sticky component will remain collapsed after interaction.

  StatusBarComponent: React.ComponentType<any>
    default: () => null
    required: NO
    description: A custom React component to render as the status bar.

  HeaderStatusBarComponent: React.ComponentType<any>
    default: () => null
    required: NO
    description: A custom React component to render as the status bar specifically within the header area.

  NavigationBarComponent: React.ComponentType<any>
    default: () => null
    required: NO
    description: A custom React component to render as the main navigation bar.

  HeaderNavigationBarComponent: React.ComponentType<any>
    default: () => null
    required: NO
    description: A custom React component to render as the navigation bar specifically within the header area.

  StickyComponent: React.ComponentType<any>
    default: () => null
    required: NO
    description: A custom React component to render as the sticky element.

  SnapComponent: React.ComponentType<any>
    default: () => null
    required: NO
    description: A custom React component to render as the snap element.

  BorderComponent: React.ComponentType<any>
    default: () => null
    required: NO
    description: A custom React component to render as the border element.

  HeaderBorderComponent: React.ComponentType<any>
    default: () => null
    required: NO
    description: A custom React component to render as the border element specifically within the header.

  HeaderForegroundComponent: React.ComponentType<any>
    default: () => null
    required: NO
    description: A custom React component to render as the foreground content of the header.

  HeaderBackgroundComponent: React.ComponentType<any>
    default: () => null
    required: NO
    description: A custom React component to render as the background content of the header.

  scale: number
    default: 1.1
    required: NO
    description: A scaling factor applied to certain header elements during scroll.

  parallax: number
    default: 0
    required: NO
    description: A value controlling the intensity of the parallax effect for header elements.

  fadeOut: boolean
    default: false
    required: NO
    description: A boolean indicating if header elements should fade out as the user scrolls.

  onBlur: Function
    default: () => void
    required: NO
    description: A callback function triggered when the component loses focus.

  onFocus: Function
    default: () => void
    required: NO
    description: A callback function triggered when the component gains focus.

  beforeTransitionPoint: Function
    default: () => void
    required: NO
    description: A callback function triggered just before the scroll view reaches the defined `transitionPoint`.
```

--------------------------------

### React Native StatusBar Component Props

Source: https://github.com/zobeirhamid/react-native-scrollable-navigation-bar/blob/master/docs/docs/API/StatusBar.md

Documents the available props for the custom React Native StatusBar component, including `backgroundColor` and `height`, and their inheritance behavior from the base React Native StatusBar.

```APIDOC
StatusBar Component Props:

Inherits all props from the React Native StatusBar except translucent, which is automatically set to true.

backgroundColor:
  type: string
  default: transparent
  required: NO

height:
  type: number
  default: constants.STATUS_BAR_HEIGHT
  required: NO
```
Tokens:
Raw