CODEWITHSUNDEEP
react-native
Sanjar
Sanjar

Reputation: 13

Please Help React Native Image Header Scroll View

I tried to use react-native-image-header-scroll-view and it's always showing me the same issue "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports". I tried to downgrade the version but still doesn't work.

import React from 'react';
import {
  View,
  Text,
  Image,
  StyleSheet,
  Dimensions,
  StatusBar,
  Platform,
} from 'react-native';
import { HeaderImageScrollView, TriggeringView } from 'react-native-image-header-scroll-view';


const MIN_HEIGHT = Platform.OS === 'ios' ? 90 : 55;
const MAX_HEIGHT = 350;

const CardItemDetails = ({route}) => {
  const itemData = route.params.itemData;

  return (
    <View style={styles.container}>
      <HeaderImageScrollView  maxHeight={MAX_HEIGHT} minHeight={MIN_HEIGHT} renderHeader={() => (<Image source={itemData.image} style={styles.image} />)}>
        <TriggeringView>
          <View>
            <Text style={styles.title}>Overview</Text>
          </View>
        </TriggeringView>
      </HeaderImageScrollView>
    </View>
  );
};

export default CardItemDetails;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  image: {
    height: MAX_HEIGHT,
    width: Dimensions.get('window').width,
    alignSelf: 'stretch',
    resizeMode: 'cover',
  },
  title: {
    fontSize: 20,
  },
  name: {
    fontWeight: 'bold',
  },
  section: {
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#cccccc',
    backgroundColor: 'white',
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
  },
  sectionContent: {
    fontSize: 16,
    textAlign: 'justify',
  },
  categories: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
    flexWrap: 'wrap',
  },
  categoryContainer: {
    flexDirection: 'row',
    backgroundColor: '#FF6347',
    borderRadius: 20,
    margin: 10,
    padding: 10,
    paddingHorizontal: 15,
  },
  category: {
    fontSize: 14,
    color: '#fff',
    marginLeft: 10,
  },
  titleContainer: {
    flex: 1,
    alignSelf: 'stretch',
    justifyContent: 'center',
    alignItems: 'center',
  },
  imageTitle: {
    color: 'white',
    backgroundColor: 'transparent',
    fontSize: 24,
  },
  navTitleView: {
    height: MIN_HEIGHT,
    justifyContent: 'center',
    alignItems: 'center',
    paddingTop: Platform.OS === 'ios' ? 40 : 5,
    opacity: 0,
  },
  navTitle: {
    color: 'white',
    fontSize: 18,
    backgroundColor: 'transparent',
  },
  sectionLarge: {
    minHeight: 300,
  },
});

Upvotes: 1

Views: 1268

Answers (2)

CodingJunkie
CodingJunkie

Reputation: 155

For anyone also facing this issue more recently, the solution was to update the library

npm update react-native-image-header-scroll-view

also ensuring the import was as follows

import ImageHeaderScrollView, { TriggeringView } from 'react-native-image-header-scroll-view';

Upvotes: 0

Vicky
Vicky

Reputation: 157

I found solution your problem. I can see in node_modules > react-native-image-header-scroll-view > lib but i don't find out the HeaderImageScrollView file.

So you can replace the ImageHeaderScrollView instead of HeaderImageScrollView.

Here is Example:

<View style={styles.container}>
      <ImageHeaderScrollView  maxHeight={MAX_HEIGHT} minHeight={MIN_HEIGHT} renderHeader={() => (<Image source={itemData.image} style={styles.image} />)}>
        <TriggeringView>
          <View>
            <Text style={styles.title}>Overview</Text>
          </View>
        </TriggeringView>
      </ImageHeaderScrollView>
    </View>

The above example solve your problems.

Upvotes: 3

Related Questions