react-native-parallax-background

Installation

npm install --save react-native-parallax-background

Demo

ParallaxBackground Properties

| Prop | Description | |---|---| |uri|string of image url | |maxHeight|height of the image background. |

import {ParallaxBackground} from 'react-native-parallax-background';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <ParallaxBackground
          maxHeight={300}
          uri={'http://your_image_url.png'}
          >
          <View>
            <Text> content </Text>  
          </View>  
        </ParallaxBackground>
      </View>
    );
  }
}

HorizontalWrapper Properties

Note: ParallaxBackground elements must be direct descendants of HorizontalWrapper

| Prop | Description | Defaul| |---|---|---| |offset|index of the children ParallaxBackground component to be showed.|0|

import {HorizontalWrapper, ParallaxBackground} from 'react-native-parallax-background';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <HorizontalWrapper
        offset={1}>
          <ParallaxBackground
            maxHeight={300}
            uri={'http://your_image_url.jpg'}>
            <View><Text> Content 1</Text> </View>  
          </ParallaxBackground>
          <ParallaxBackground
            maxHeight={300}
            uri={'http://your_image_url.jpg'}>
            <View><Text> Content 2</Text> </View>  
          </ParallaxBackground>
          <ParallaxBackground
            maxHeight={300}
            uri={'http://your_image_url.jpg'}>
            <View><Text> Content 3</Text> </View>  
          </ParallaxBackground>
        </HorizontalWrapper>
      </View>
    );
  }
}

References and Credits

• f8app from Facebook Samples
• react-native-parallax-view by Leland Richardson

License

MIT License.