kyaroru / rnparallax Goto Github PK

Hi, the library works fine except for this issue.

render() {
        return (
            <View style={styles.mainContainer}>
                <ReactNativeParallaxHeader
                    headerMinHeight={100}
                    headerMaxHeight={250}
                    extraScrollHeight={0}
                    navbarColor={AppConfigurations.branding.appThemeColour}
                    backgroundImage={require('./../../images/kiosk-starter-page/background.jpg')}
                    backgroundImageScale={1}
                    renderNavBar={this.renderNavBar}
                    renderContent={this.renderContent}
                />
            </View>
        );
    }

renderNavBar() {
        return(
            <View style={{flex: 1, flexDirection: 'column', justifyContent: 'flex-end', padding: 20}}>
                <Text>{this.state.userName}</Text>
            </View>
        )
    }

State is simply an empty string and the following error gets printed.

Also, is there a way to add an blur overlay or gradient over the parallax image? Thank you.

Hey guy!
Can you tell me : How to cal current header height after scrool up or down?
I need it to cal some size of another item in screen:(
Thank a lot

There is a problem in Example. Can you share full codes of example? Also, i want to add Tab below Image. How should i edit this example?

My Tab Codes:

<ScrollableTabView
    style={styles.container}
    renderTabBar={()=><DefaultTabBar backgroundColor='rgba(255, 255, 255, 0.7)' />}
    tabBarPosition='overlayTop'
  >
    <ScrollView tabLabel='iOS'>
      <Icon name='logo-apple' color='black' size={300} style={styles.icon} />
      <Icon name='ios-phone-portrait' color='black' size={300} style={styles.icon} />
      <Icon name='logo-apple' color='#DBDDDE' size={300} style={styles.icon} />
      <Icon name='ios-phone-portrait' color='#DBDDDE' size={300} style={styles.icon} />
    </ScrollView>
    <ScrollView tabLabel='Android'>
      <Icon name='logo-android' color='#A4C639' size={300} style={styles.icon} />
      <Icon name='logo-android' color='black' size={300} style={styles.icon} />
      <Icon name='logo-android' color='brown' size={300} style={styles.icon} />
    </ScrollView>
  </ScrollableTabView>

Used of RefreshControl in FlatList or Scrollview inside the renderContent not able to re-loading the data.

How do i add RefreschControl in ReactNativeParallaxHeader???

I need to automate scroll to certain y position. Then i use scrollToOffset function from FlatList. but it doesnt work in here.

So is there any other way to do that?

Hi

I have this issue wherein the title props is immediately displayed in the parallax header. Is there a way that the title will only be displayed once I scroll?

Hello,
thank you so much for nice plugin, but it can not apple data list to renderContent. it is said undefined example

constructor(props) { super(props); this.state = { users: [ { id: 1, fullName: 'Ritesh Deshmukh', url: require('@assets/8.jpg'), }, ] }; }

it is said undefined users

renderContent() {
return (
<FlatList
data={this.state.users}
keyExtractor={(item, index) => item + index || item.id || index.toString()}
listKey={(index) => index.toString()}
refFlatlist={(ref) => { this.refFlatlist = ref; }}
onEndReachedThreshold={2.5}
scrollEnabled={false}
showsHorizontalScrollIndicator={false}
renderItem={({ item }) => (

)}
/>

    );
}

Hi, Thank you for an awesome plugin.

I have an interesting challenge where I am curios to know how to handle the following case.

I have a view where content exceeds the view with an expanded header by a small amount. When you scroll to the bottom of the screen, the header is in transition between the expanded header and the collapsed header. The content cannot scroll more unless you add more space below to compensate for the height of the header.

The other caveat here is that in the view I have a button that needs to stick to the bottom of the screen on larger devices but when displayed on smaller devices it should scroll as normal to the end, taking into consideration of the height of the header collapsing.

Hi, i am using this RNParallax module it's working fine. But i want to customize the backgroundImage. My questions is:-

1. BackgroundImage is not displaying while passing uri in android devices.
2. How to remove title in backgroundImage and how to display the title only if header is visible?

Code:-

  <ReactNativeParallaxHeader
            headerMinHeight={64}
            headerMaxHeight={250}
            extraScrollHeight={20}
            navbarColor="#3498db"
            alwaysShowTitle={false}
            // alwaysShowNavBar={this.state.showNavBar}
            // title="Parallax Header"
            titleStyle={styles.titleStyle}
            backgroundImage={{
              uri:
                'https://images.unsplash.com/photo-1500322969630-a26ab6eb64cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMjU4fQ&w=1000&q=80',
            }}
            backgroundImageScale={1.2}
            renderNavBar={this.renderNavBar.bind(this)}
            renderContent={this.renderContent.bind(this)}
            containerStyle={styles.container}
            contentContainerStyle={styles.contentContainer}
            innerContainerStyle={styles.container}
            navbarColor="black"
            scrollViewProps={{
              onScrollBeginDrag: () => console.log('onScrollBeginDrag'),
              onScrollEndDrag: () => console.log('onScrollEndDrag'),
            }}
          />

Versions:-
react-native: "0.61.4"
react-native-parallax-header: "^1.1.3"

Screenshots:-
iOS:-

Android:-

Hello,

I am using this library via renderContent prop, its perfectly working on iOS, but not on android despite scrollenabled=false

This is my using order:

<RNParallaxHeader
....
renderContent={renderContent}
/>




 const renderContent = () => {
    return (
...

<<ScrollableTabView>
  <View>
    <Flatlist
          ...
         scrollEnabled=false
         renderItem={this.renderItems}
     />
  </View>
</ScrollableTabView>

)
}




renderItems=()=> { 

return (
<ListItem ... />
)

}

Its working exactly how i want at iOS, but on android its not working.

Any suggestion ?

How we can avoid this ?

https://i.imgur.com/pVbzeYK.png

I want to darken the back image a little, how can i do that?

https://camo.githubusercontent.com/2c57c48d34be620d9d51d37176d423d4e994fcfe/68747470733a2f2f692e6779617a6f2e636f6d2f32343334336532313237623865343739613532663462633538353365663435372e676966

Hello Kyaroru thank you, you save my life but you can help build parallax same gif.
Thank you so much.

Can I do something like this?

I have an app where I use fullscreen background image and I have ReactNativeParallaxHeader inside of the ImageBackground like:

<ImageBackground source={images.background} style={{ flex: 1, width: null, height: null }}...>
  <ReactNativeParallaxHeader .../>
</ImageBackground>

Currently this library creates fullscreen <View style={styles.container}> container with hardcoded background color:

container: {
    backgroundColor: 'white',
    flex: 1,
  },

This container hides my background image completely. I did not find any ways to bypass this, except modifying the library source code by setting container backgroundColor to "transparent".

So maybe change the default value to transparent or make it configurable through props?

Hello,

I want to use refreshControl with my FlatList, but it doesn't work.
When I remove ReactNativeParallaxHeader, the refreshControl works
Can you help me ?

Thanks

import React from 'react';
import {
  View,
  Text,
  Image,
  TouchableOpacity,
  Alert,
  FlatList,
  Dimensions,
  Platform,
  StyleSheet,
  RefreshControl
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import ReactNativeParallaxHeader from 'react-native-parallax-header';

import styles from './style';
import shop from '../../services/api/shop';
import HeaderComponent from '../../components/Header';
import IconComponent from '../../components/Icon';

const {width, height} = Dimensions.get('window');
const IS_IPHONE_X = height === 812 || height === 896;
const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? (IS_IPHONE_X ? 44 : 20) : 0;
const HEADER_HEIGHT = Platform.OS === 'ios' ? (IS_IPHONE_X ? 98 : 100) : 74;
const NAV_BAR_HEIGHT = HEADER_HEIGHT - STATUS_BAR_HEIGHT;

const stylesHeader = StyleSheet.create({
  container: {
    flex: 1,
  },
  contentContainer: {
    flexGrow: 1,
  },
  navContainer: {
    height: HEADER_HEIGHT,
    marginHorizontal: 10,
  },
  statusBar: {
    height: STATUS_BAR_HEIGHT,
    backgroundColor: 'transparent',
  },
  navBar: {
    height: NAV_BAR_HEIGHT,
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row',
    backgroundColor: 'transparent',
  },
  titleStyle: {
    color: 'white',
    fontSize: 25,
  },
  iconLeft: {
    alignItems: 'center',
    justifyContent: 'center'
  }
});


export default class ShopScreen extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      shops: [],
      isFetching: false,
      isLoaded: false
    };
  }

  // API : set shops to state
  componentWillMount() {
    shop.getShops()
      .then(shops => {
        console.log('2', shops);

        this.setState({shops: shops})
      })
      .catch((error) => {
        console.log(error);
        Alert.alert('Erreur', 'Impossible de récupérer les shops')
      })
      .finally(() => this.setState({isLoaded: true}));
  }

  test() {
    shop.getShops()
      .then(shops => this.setState({shops: shops}))
      .catch((error) => Alert.alert('Erreur', 'Impossible de récupérer les shops'))
      .finally(() => this.setState({isLoaded: true, isFetching: false}));
  }

  _onRefresh() {
    console.log('refresh');
    this.setState({ isFetching: true }, function() { this.test() });
   }

  _showDetail(shop) {
    this.props.navigation.navigate('Product', {shop: shop});
  }

  _goBasket() {
    this.props.navigation.navigate('Order');
  }

  _renderItem(shop) {
    return (
      <View style={styles.card}>
        <TouchableOpacity onPress={() => this._showDetail(shop)}>
          <Image style={styles.image} source={shop.image} />
          <View style={styles.container}>
            <Text style={styles.title}>{shop.name}</Text>
            <Text style={styles.time}>{`10-15 min`}</Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }

  renderNavBar = () => (
    <View style={stylesHeader.navContainer}>
      <View style={stylesHeader.statusBar} />
      <View style={stylesHeader.navBar}>
        <TouchableOpacity style={stylesHeader.iconLeft} onPress={() => {}}>
          <IconComponent
            style={{color: 'white', marginRight: 0}}
            iosName={`ios-options`}
            androidName={`md-options`}
            size={30} />
        </TouchableOpacity>
        <TouchableOpacity style={stylesHeader.iconRight} onPress={() => this._goBasket()}>
          <IconComponent
            style={{color: 'white', marginRight: 0}}
            iosName={`ios-basket`}
            androidName={`md-basket`}
            size={30} />
        </TouchableOpacity>
      </View>
    </View>
  )

  render() {
    const { shops, isLoaded } = this.state;
    return (
      <View style={styles.container}>
        <ReactNativeParallaxHeader
          headerMinHeight={HEADER_HEIGHT}
          headerMaxHeight={120}
          extraScrollHeight={20}
          navbarColor="#34C47C"
          backgroundColor="#34C47C"
          title="Shop"
          titleStyle={stylesHeader.titleStyle}
          renderNavBar={this.renderNavBar}
          renderContent={() => {
            return(
              <View style={styles.container}>
                <View style={styles.container}>
                  <FlatList
                    data={shops}
                    refreshControl={
                       <RefreshControl
                        refreshing={this.state.isFetching}
                        onRefresh={this._onRefresh}
                       />
                     }
                    keyExtractor = {(item, index) => index.toString()}
                    renderItem={({item}) => this._renderItem(item)} />
                </View>
              </View>
            );
          }}
          containerStyle={stylesHeader.container}
          contentContainerStyle={stylesHeader.contentContainer}
          innerContainerStyle={stylesHeader.container}
          scrollViewProps={{
            onScrollBeginDrag: () => console.log('onScrollBeginDrag'),
            onScrollEndDrag: () => console.log('onScrollEndDrag')
          }}
        />
      </View>
    );
  }
}

@kyaroru :
Hi, I tried the form here is the example link: https://snack.expo.io/r1Ck3agvM
As you can see, it does not allow the elements in the tab to be scrolled.
I would also like the tab to crash when the toolbar reaches the minimum height.
That is, it should scroll only the elements of the tab, without scrolling the tab.
How can I do?

Hi, I have this problem with status Bar on android. I cant set transparent when i have image.

How can i fix this problem?

and my code:

how can i do like this link: https://codeburst.io/react-native-parallax-scroll-with-tabs-721feec463c5

Hi,

I tried to run this on my test app and kept getting the 'TypeError: renderContent is not a function'.

I haven't made any changes to your code, could you please assist with this?

Can we have an option to get FlatList instead of ScrollView for Items, to get the performant scroll on large content

`{this.state.datas.map((data, i) => {
return (

                <ReactNativeParallaxHeader key={data.id}
                  headerMinHeight={HEADER_HEIGHT}
                  headerMaxHeight={100}
                  extraScrollHeight={40}
                  navbarColor="#6518F4"
                  title={data.title}
                  titleStyle={styles.titleStyle}
                  backgroundImage={{uri: data.image}}
                  backgroundImageScale={1.2}
                  renderNavBar={this.renderNavBar}
                  renderContent={() => {
                    return(
                      <View style={styles.container}>
                        <View style={styles.container}>
                        <Text>adasd</Text>
                        <Text>adasd</Text>
                        <Text>adasd</Text>
                        <Text>adasd</Text>
                        <Text>adasd</Text>

                        </View>
                      </View>
                    );
                  }}
                  containerStyle={styles.container}
                  contentContainerStyle={styles.contentContainer}
                  innerContainerStyle={styles.container}
                  scrollViewProps={{
                    onScrollBeginDrag: () => console.log('onScrollBeginDrag'),
                    onScrollEndDrag: () => console.log('onScrollEndDrag'),
                  }}
                />
                 
                     );
                 })}`

Is the example source code for iPhone X or XS (Using alwaysShowTitle={false} & alwaysShowNavBar={false}) available?

Thanks

作者 我想问一下 如果数据比较多的情况下 有没有一个回到顶部的方法或者事件啊 我这边尝试了几种还是不行

Could you fix your example and import the right stuff or add an example file... Sorry for the title but I don't know if this was done on purpose or you guys are so lazy/careless to do that

According to README, titleStyle's proptypes is style. Unfortunately, when I try to change fontFamily and fontSize style attribute value into titleStyle props, I got Warning: Failed prop type of type 'object', expected number warning message.

Hello,

How to use swipe to refresh?

Thank in advance!

It looks like extraScrollHeight is not functional. The default is 50, but changing it to e.g. 80 has no effect.

Hi
Is it possible to use a component instead of the title, for example a button that moves according to the header resize?

example: https://github.com/i6mi6/react-native-parallax-scroll-view/blob/master/demo.ios.0.17.2.gif

There are like 60px beneath the parallax header where the content is, that no matter what or how I swipe, it won't detect my swipe, but 60ish below that it will.

My current setup is this one, height is the screen's height.

headerMinHeight={height * 0.3} 
headerMaxHeight={height / 2}

Rest is pretty default as the example.

What could be the reason of this weird behavior?

thanks^^

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

Once you have installed CI on this repository, you’ll need to re-trigger Greenkeeper’s initial Pull Request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

Hello mate!

Please add types for this awesome component!

Thanks in advance 👍

I'm trying to make this background header clickable breaking my head off and I couldn't achieve it, at least in Android, haven't tested in iOS yet, but i need to make it work on both either way.

Attempted using a TouchableOpacity within Animated.View, outside of the Animated.Image, even making an AnimatedTouchable but still, wasn't able to make it work.

Any ideas?

Hello,
It seems I'm not able to apply an overlay to the background image.
As I'm using an image with a lot of white and I do not want to change the text color to be black, I was looking for a way to darken the image.

How can I achieve that?

Thank you beforehand.

I see couple of warnings while using the component, would be nice to update it to fix these:

Animated: 'useNativeDriver' was not specified. This is a required option and must be explicitly set to trueorfalse``
Animated.event now requires a second argument for options

I want add refreshControl with react native, but when i surround ReactNativeParallaxHeader with scrollView the parallax effect is not working!
can anyone help!?