A high-performance, cross-platform animated header component for React Native ap...
source link: https://reactnativeexample.com/a-high-performance-cross-platform-animated-header-component-for-react-native-applications/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
A high-performance, cross-platform animated header component for React Native applications
React Native Header
React Native Header is a high-performance, cross-platform animated header component for React Native applications. It provides an easy-to-use interface for developers to quickly create beautiful and dynamic navigation headers.
iOS | Android |
---|---|
Features
- Maintains a similar experience between iOS and Android.
- Uses Reanimated for better animation performance
- Works with ScrollView and FlatList
- Compatible with Expo Go and React Native CLI projects
- Written in TypeScript
Prerequisites
Before you can use react-native-header
, you need to have the following libraries set up in your React Native project:
If you haven’t installed these libraries yet, please follow the installation instructions on their respective documentation pages.
Installation
Once you have react-native-reanimated and react-native-safe-area-context set up in your project, you can install react-native-header
using yarn
or npm
:
yarn add @codeherence/react-native-header
npm install @codeherence/react-native-header
Example
Let’s implement a regular ScrollView with a large header:
First, we import the library:
import {
Header,
LargeHeader,
ScalingView,
ScrollViewWithHeaders,
} from '@codeherence/react-native-header';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
Then we create our header component:
const HeaderComponent = ({ showNavBar }) => (
<Header
showNavBar={showNavBar}
headerCenter={<Text style={{ fontSize: 16, fontWeight: 'bold' }}>react-native-header</Text>}
/>
);
and our large header component:
const LargeHeaderComponent = ({ scrollY }) => (
<LargeHeader>
<ScalingView scrollY={scrollY}>
<Text style={{ fontSize: 14 }}>Welcome!</Text>
<Text style={{ fontSize: 32, fontWeight: 'bold' }}>react-native-header</Text>
<Text style={{ fontSize: 12, fontWeight: 'normal', color: '#8E8E93' }}>
This project displays some header examples using the package.
</Text>
</ScalingView>
</LargeHeader>
);
and finally, use them in a ScrollViewWithHeaders
component like so:
const Example = () => {
const { bottom } = useSafeAreaInsets();
return (
<ScrollViewWithHeaders
HeaderComponent={HeaderComponent}
LargeHeaderComponent={LargeHeaderComponent}
contentContainerStyle={{ paddingBottom: bottom }}
>
<View style={{ padding: 16 }}>
<Text>Some body text...</Text>
<Text>Some body text...</Text>
</View>
</ScrollViewWithHeaders>
);
};
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
GitHub
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK