7

React native lists implemented with a stretchy header image

 2 years ago
source link: https://reactnativeexample.com/react-native-lists-implemented-with-a-stretchy-header-image/
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.
neoserver,ios ssh client

Listview

React native lists implemented with a stretchy header image

Dec 01, 2022 1 min read

react-native-reanimated-stretchy

react native lists implemented with a stretchy header image

Motive

I am working on a project that was using react-native-stretchy, but it has type issues and the header component of the SectionList and FlatList were unusable due to implementing the image header inside the header component prop.

With react-native-reanimated-stretchy, the types should work fine, you can use the headerComponent prop, and it uses reanimated for animations

Installation

// npm
npm install react-native-reanimated-stretchy

// yarn
yarn add react-native-reanimated-stretchy

Usage

import * as React from 'react';

import { StyleSheet, View, Text, SafeAreaView } from 'react-native';
import { StretchyScrollView } from 'react-native-reanimated-stretchy';

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <StretchyScrollView
        imageHeight={200}
        contentContainerStyle={styles.content}
        imageSource={require('../assets/image.jpg')}
        foreground={
          <View style={styles.foreground}>
            <Text style={styles.txt}>something here</Text>
          </View>
        }
      >
        {Array(20)
          .fill(0)
          .map((_, i) => (
            <View style={styles.box} key={i}>
              <Text>{i}</Text>
            </View>
          ))}
      </StretchyScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  foreground: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'flex-end',
  },
  box: {
    height: 100,
    backgroundColor: 'pink',
    justifyContent: 'center',
    alignItems: 'center',
    margin: 10,
    borderRadius: 10,
  },
  txt: {
    fontWeight: 'bold',
    fontSize: 24,
    color: 'orange',
  },
  content: {
    backgroundColor: 'gray',
  },
});

Limitations

  • paddingTop of contentContainerStyle will be overriden if passed

Contributing

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

License

GitHub

View Github


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK