I couldn't understand about how to use this library in my project of react-native !!

[Prateek743]

Could anyone plesae provide an example code to use it in my own project !!

[z4o4z]

Hi @Prateek743, you can find examples in the storybook folder. Also here you can find real-world example: https://github.com/z4o4z/events-aggregator-client/blob/master/src/screens/Event/index.js

[Prateek743]

Hi @z4o4z

Sorry, But the real world example you posted https://github.com/z4o4z/events-aggregator-client/blob/master/src/screens/Event/index.js doesn't even import the react-native-parallax-library !! Am i missing something ?

Your help would be very much appreciated, I am a newbie in mobile world and specially in react-native !!

[z4o4z]

@Prateek743 You right, this file doesn't import the react-native-parallax-scroll, but if you will look into styles.js you can find, that ParallaxScroll component become just Scroll component and use in the file above

[z4o4z]

export const Scroll = styled(ParallaxScroll).attrs({
  contentContainerStyle: {
    minWidth: '100%',
    minHeight: '100%',
  },
})`
  margin-top: ${Expo.Constants.statusBarHeight}px;
  margin-bottom: -${Expo.Constants.statusBarHeight}px;
  background-color: ${backgroundColor};
`;

the code below the same as folowing:

function Scroll(props) {
  return <ParallaxScroll contentContainerStyle={{ minWidth: '100%', minHeight: '100%', }} style={{...someStyles}} {...props} />
}

[Prateek743]

My screen is this -

My code for the screen is - This is the first screen of my react native project

import React from 'react';
import { ScrollView, View } from 'react-native';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from './reducers';
import { Header } from './components/common'
import LibraryList from './components/LibraryList';
import LoginForm from './components/LoginForm';

const App = () => {
  return(
    <Provider store={createStore(reducers)}>
    <View style={{ flex: 1 }}>
    <Header headerText="Post" />
         <ScrollView>
           <LoginForm />
           <LibraryList />
         </ScrollView>
     </View>
     </Provider>
  );
};

export default App;

Now i want my screen to be something like this with the parallax scroll upto header : -

I know it is wrong. What i wanted to do is When i Scroll My library list these should happen - 1) The LibraryList should be scrolled to the top of the screen upto the Header. 2) The LoginForm should completely gets in background ( and should not get visible ) under the LibraryList. 3) The LibraryList whcih is a FlatList should be scrollable. 4) The button above the LibraryList must get faded gradually as i started to scroll the LibraryList to the header ( Uptill noew the button logic is placed inside my LoginForm ).

I used your Library and i got result like this shown in the gif -

The Code for the above screen is -

import React from 'react'; import { ScrollView, View } from 'react-native'; import { Provider } from 'react-redux'; import { createStore } from 'redux'; import reducers from './reducers'; import { Header } from './components/common' import LibraryList from './components/LibraryList'; import LoginForm from './components/LoginForm'; import ParallaxScroll from '@monterosa/react-native-parallax-scroll';

const App = () => { return(

} headerHeight={50} isHeaderFixed={false} parallaxHeight={250} renderParallaxBackground={({ animatedValue }) => } renderParallaxForeground={({ animatedValue }) => } parallaxBackgroundScrollSpeed={5} parallaxForegroundScrollSpeed={2.5} >

); };

export default App;

How do i get the desired result ?

[Prateek743]

Sorry the last code doesn't get posted right - Here it is -

import React from 'react';
import { ScrollView, View } from 'react-native';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from './reducers';
import { Header } from './components/common'
import LibraryList from './components/LibraryList';
import LoginForm from './components/LoginForm';
import ParallaxScroll from '@monterosa/react-native-parallax-scroll';

const App = () => {
  return(
    <Provider store={createStore(reducers)}>
     <ParallaxScroll
      renderHeader={({ animatedValue }) => <Header headerText="Post" animatedValue={animatedValue} />}
      headerHeight={50}
      isHeaderFixed={false}
      parallaxHeight={250}
      renderParallaxBackground={({ animatedValue }) => <LoginForm animatedValue={animatedValue} />}
      renderParallaxForeground={({ animatedValue }) => <LibraryList animatedValue={animatedValue} />}
      parallaxBackgroundScrollSpeed={5}
      parallaxForegroundScrollSpeed={2.5}
    >
    </ParallaxScroll>
     </Provider>
  );
};

export default App;

[z4o4z]

So, try to do something like this:

import React from 'react';
import { ScrollView, View } from 'react-native';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from './reducers';
import { Header } from './components/common'
import LibraryList from './components/LibraryList';
import LoginForm from './components/LoginForm';
import ParallaxScroll from '@monterosa/react-native-parallax-scroll';

const App = () => {
  return(
    <Provider store={createStore(reducers)}>
     <ParallaxScroll
      renderHeader={({ animatedValue }) => <Header headerText="Post" animatedValue={animatedValue} />}
      headerHeight={50}
      isHeaderFixed={false}
      parallaxHeight={250}
      renderParallaxForeground={({ animatedValue }) => <LoginForm animatedValue={animatedValue} />}
      parallaxForegroundScrollSpeed={2.5}
    >
      <LibraryList  />
    </ParallaxScroll>
     </Provider>
  );
};

export default App;

[Prateek743]

Hi @z4o4z ,

Thankyou so much for your great help, with your help i am able to achieve this -

The code for the above is this -

import React from 'react';
import { ScrollView, View } from 'react-native';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from './reducers';
import { Header } from './components/common'
import LibraryList from './components/LibraryList';
import LoginForm from './components/LoginForm';
import ParallaxScroll from '@monterosa/react-native-parallax-scroll';

const App = () => {
  return(
    <Provider store={createStore(reducers)}>
     <ParallaxScroll
      renderHeader={({ animatedValue }) => <Header headerText="Post" animatedValue={animatedValue} />}
      headerHeight={50}
      isHeaderFixed={true}
      parallaxHeight={250}
      fadeOutParallaxBackground={true}
      renderParallaxBackground={({ width=110, height=500, animatedValue }) => <LoginForm width={width} height={height} animatedValue={animatedValue} />}
      parallaxBackgroundScrollSpeed={5}
    >
      <LibraryList  />
    </ParallaxScroll>
     </Provider>
  );
};

export default App;

But what i want is little bit different -

1. The scrolling should not be there on the LoginForm at all and only be there on the LibraryList
2. There is some extra space between Login Form and LibraryList as you can see in the below screenshot
3. And when the list is small like only till Schedule Post then there is no scrolling at all on the whole screen, how can i overcome that ?

Could you please please help me on this also, would be a big favour for me !!

[Prateek743]

Also in above code If i use the LoginForm in renderParallaxBackground then i am no longer be able to click on the TextInput of the Form and type on them !!

How can i use the TextInputs while still using LoginForm in the Background !!

[z4o4z]

@Prateek743 you can't use any interactive elements in the background (known RN limitation - we can't pass clicks throw scrollable view).

1. If I understood right, you don't want to scroll LoginForm component at all(the same as header fixed on the top)? If this true, you can render LoginForm within renderHeader prop and the code will look something like this:

   
   import React, { Fragment } from 'react';
   import { ScrollView, View } from 'react-native';
   import { Provider } from 'react-redux';
   import { createStore } from 'redux';
   import reducers from './reducers';
   import { Header } from './components/common'
   import LibraryList from './components/LibraryList';
   import LoginForm from './components/LoginForm';
   import ParallaxScroll from '@monterosa/react-native-parallax-scroll';

const App = () => { return(

} headerHeight={300} isHeaderFixed={true} >

); };

export default App;

2. Looks like you have wrong sizes for `LoginForm`
3. Why do you need scrollable functionality for the small lists?

[Prateek743]

@z4o4z I wanted to do something like this -

[z4o4z]

I think you are using the wrong component, you can try to use this one: https://github.com/ninamanalo19/react-native-sliding-up-panel instead of ParallaxScroll

[Prateek743]

@z4o4z Thankyou so much for your help !! :)