repository·master·Indexed 42 days ago
https://github.com/zobeirhamid/react-native-scrollable-navigation-barA React Native library for creating highly customizable, high-performance (60 FPS) scrollable navigation bars using the built-in Animated API. Version 3.0.6 provides components like Container, AppleStyle, NavigationBar, and Appearer to implement collapsible and sticky navigation behaviors across all platforms.
The library offers the following key features:
react-native Animated API.Appearer component is used to trigger a fade animation when the user's scroll position reaches a specific transitionPoint. This is useful for showing elements (like a back button or a header) only after the user has scrolled a certain distance.react-native Animated API, meaning no additional heavy dependencies are required for its core functionality.The General Method is intended for scenarios where you have already designed your UI elements and simply want to integrate the scrollable navigation animations. This is achieved by using the Container component and providing your existing UI components as props to the Container API.
To use this method, you must pass your custom components for the following roles to the Container:
NavigationBarComponent: Your custom navigation bar.HeaderNavigationBarComponent: The navigation bar used in the header state.HeaderForegroundComponent: The foreground element of the header.HeaderBackgroundComponent: The background element of the header.BorderComponent: Your custom border component.HeaderBorderComponent: Your custom header border component.import {
Container,
NavigationBar,
HeaderTitle,
StatusBar,
} from 'react-native-scrollable-navigation-bar';
// ... inside your component
<Container
headerHeight={300}
NavigationBarComponent={NavigationBarComponent}
HeaderNavigationBarComponent={HeaderNavigationBarComponent}
HeaderForegroundComponent={HeaderForegroundComponent}
HeaderBackgroundComponent={HeaderBackgroundComponent}
BorderComponent={BorderComponent}
HeaderBorderComponent={HeaderBorderComponent}
>
{/* Your scrollable content goes here */}
<Placeholder />
<Placeholder />
</Container>To generate static content for the documentation website, run the build command. This creates a build directory containing the static files, which can be hosted on any static content hosting service.
$ yarn buildTo begin using react-native-scrollable-navigation-bar, you can access the full documentation at the official website. The library provides high-performance (60 FPS) scroll animations and is designed to work across all platforms using the standard react-native Animated API, meaning no additional heavy dependencies are required.
https://zobeirhamid.github.io/react-native-scrollable-navigation-barYou can deploy the built website directly to the gh-pages branch on GitHub using the yarn deploy command. You must provide your GitHub username via the GIT_USER environment variable. If you are using SSH for Git operations, set USE_SSH=true.
$ GIT_USER=<Your GitHub username> USE_SSH=true yarn deployYou can import the available components, styles, constants, and hooks from the package root. The package exports a variety of tools for building scrollable navigation interfaces, including layout components like Container and NavigationBar, as well as animation hooks like useAnimatedValue.
import {
Container,
NavigationBar,
HeaderTitle,
Border,
StatusBar,
AppleStyle,
constants,
useAnimatedValue,
useHasReachedTransitionPoint,
useMeasurements,
Transitioner,
Appearer,
} from 'react-native-scrollable-navigation-bar';To use an image or custom component as a header background, provide a component to the HeaderBackgroundComponent prop of AppleStyle.
Crucial Requirement: You must set headerBackgroundColor to 'transparent' to ensure the background component is visible.
import { AppleStyle } from 'react-native-scrollable-navigation-bar';
function HeaderBackgroundComponent(props) {
return (
<Image
source={{ uri: 'YOUR_IMAGE_URI' }}
style={{ width: 300, height: 300 }}
/>
);
}
// Inside your render function:
<AppleStyle
headerHeight={300}
title={'Hello World'}
HeaderBackgroundComponent={HeaderBackgroundComponent}
headerBackgroundColor={'transparent'}
headerTitleColor={'white'}
>
{/* Your scrollable content here */}
</AppleStyle>To add the library to your React Native project, use the following npm command:
npm install react-native-scrollable-navigation-barThe documentation website is built with Docusaurus 2. To set up the project and start a local development server, follow these steps:
yarn.yarn start. This will open a browser window and support live reloading for most changes.$ yarn
$ yarn startTo make the navigation bar hide when the user scrolls down and reappear when they scroll up, add the collapsible prop to the AppleStyle component.
import { AppleStyle } from 'react-native-scrollable-navigation-bar';
<AppleStyle title={'Hello World'} collapsible>
<Placeholder />
<Placeholder />
</AppleStyle>