react-native-parallax-background

KO | EN

gitlite — search

#javascript #react #ai #llm #go #android #macos #java #windows #cli #vue #awesome-list #security #open-source

react-native-parallax-background

(★ 11)

Parallax view with header image

react-native-parallax-background 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# react-native-parallax-background

## Installation

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

## Demo

![Demo](https://raw.githubusercontent.com/danny8903/react-native-parallax-background/master/demo.gif)

## `ParallaxBackground` Properties
#
| Prop | Description |
|---|---|
|**`uri`**|string of image url |
|**`maxHeight`**|height of the image background. |

```js
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|

```js
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](https://github.com/fbsamples/f8app) from Facebook Samples
- [react-native-parallax-view](https://github.com/lelandrichardson/react-native-parallax-view) by Leland Richardson

## License

[MIT License](http://opensource.org/licenses/mit-license.html).

react-native-parallax-background

react-native-parallax-background 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

react-native-parallax-background

react-native-parallax-background 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README