React Native Image Header Scroll View Doesn’t Scroll Down

I have a scrolling image view header component (<ImageHeaderScrollView>) in my details screen in my … Read more React Native Image Header Scroll View Doesn’t Scroll Down

I have a scrolling image view header component (<ImageHeaderScrollView>) in my details screen in my app that allows for images to appear at the header and then I can also scroll down or up as I please. but for some reason when I try to go down it just won’t allow me to and keeps going back up (spring effect makes it go back up and doesn’t allow you to see what’s at the bottom of the screen)

I don’t understand what I am doing incorrectly. why won’t the <ImageHeaderScrollView> allow me to scroll?

here is my code:

const DetailsScreen = ({route}) => {
return (
    <View style={styles.container}>
      <StatusBar barStyle="light-content" />
       <ImageHeaderScrollView
        maxHeight={MAX_HEIGHT}
        minHeight={MIN_HEIGHT}
        maxOverlayOpacity={0.6}
        minOverlayOpacity={0.3}
        renderHeader={() => (
          <Swiper autoplay height={350} activeDotColor="rgb(255,165,0)">
     
            <Image
              style={styles.image}
              source={{
                uri:details.ShopHeaderImg
              }}
            />

        </Swiper>
        )}
        renderForeground={() => (
          <View style={styles.titleContainer}>
            <Text style={styles.imageTitle}>{details.name}</Text>
          </View>
        )}
        renderFixedForeground={() => (
          <Animatable.View style={styles.navTitleView} ref={navTitleView}>
            <Text style={styles.navTitle}>{details.name}</Text>
          </Animatable.View>
        )}>
        <TriggeringView
          style={styles.section}
          onHide={() => navTitleView.current.fadeInUp(300)}
          onDisplay={() => navTitleView.current.fadeOut(100)}>
          <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
            <Feather name="phone" style={styles.title}/>
            <Text style={{marginRight:250}}>|</Text>
                      
            <View style={{flexDirection: 'row', alignItems: 'flex-end'}}>
              <FontAwesome name="star" size={16} color="#FF6347" />
              <Text style={{marginHorizontal: 2}}>{details.ratings}</Text>
              <Text>({details.reviews})</Text>
            </View>
          </View>
        </TriggeringView>
        <View style={[styles.section, styles.sectionLarge]}>
          <Text style={styles.sectionContent}>{details.summary}</Text>
        </View>

        <View style={styles.section}>
          
           {/*categories.map((category,index)=> (
            <View style={styles.categoryContainer} key={index}>
                <FontAwesome name="tag" size={16} color="#fff" />
                <Text style={styles.category}>{category}</Text>
              </View>
           ))*/}
          <MapView
          provider={PROVIDER_GOOGLE} 
          style={styles.map}
          region={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.015,
            longitudeDelta: 0.0121,
          }}
        >
        </MapView>
         
        </View>

        <View style={[styles.actionSection, {height: 100,flexDirection:'row'}]}>
        <TouchableOpacity
          style={styles.commandButton}
          onPress={() => {}}
          >
            <Text style={{color:"#FF0000",fontSize:18}}>
              Order Now
            </Text>
          </TouchableOpacity>

          <TouchableOpacity
          style={[styles.commandButton,{marginLeft:50}]}
          onPress={() => {}}
          >
       
            <Text style={{color:"#FF0000",fontSize:18}}>
              Chat with us
            </Text>
          </TouchableOpacity>
         
        </View>
      </ImageHeaderScrollView>
    </View>
  );
};

export default DetailsScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  image: {
    height: MAX_HEIGHT,
    width: Dimensions.get('window').width,
    alignSelf: 'stretch',
    resizeMode: 'cover',
  },
  map: {
    height:"100%"
  },
  title: {
    fontSize: 20,
  },
  name: {
    fontWeight: 'bold',
  },
  section: {
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#cccccc',
    backgroundColor: 'white',
  },
  actionSection: {
    height:25,
    padding: 20,
    borderBottomWidth: 0,
    borderBottomColor: '#cccccc',
    
  },
  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: '#FF0000',
    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: 100,
  },
  commandButton: {
    width:150,
    padding: 15,
    borderRadius: 10,
   
    borderColor:"#FF0000",
    alignItems: 'center',
    marginTop: 10,
  },
});
}

Source: CSS – Stack Overflow



Leave a Reply

Your email address will not be published. Required fields are marked *