0.1.2 • Published 6 years ago
react-native-parallax-background v0.1.2
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