Skip to content

Commit e24c80d

Browse files
committed
Added contentStyle & contentContainerStyle
1 parent 4de275b commit e24c80d

File tree

2 files changed

+69
-20
lines changed

2 files changed

+69
-20
lines changed

README.md

Lines changed: 57 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,46 +15,87 @@
1515
$ npm i react-native-parallax-header --save
1616
```
1717
## Demo
18-
### iPhone X
19-
![iPhone X (Image)](http://g.recordit.co/o24X5s9rFv.gif)
20-
![iPhone X (Color)](http://g.recordit.co/Owbt2X4ZCo.gif)
18+
### iPhone X or XS
19+
![iPhone X (Image)](http://g.recordit.co/iWW0MOia6i.gif)
20+
![iPhone X (Color)](http://g.recordit.co/vDfanKwzy0.gif)
2121

2222
### iPhone 8
23-
![iPhone 8 (Image)](http://g.recordit.co/7dbGiEDx7H.gif)
24-
![iPhone 8 (Color)](http://g.recordit.co/YxXtQjTXMU.gif)
23+
![iPhone 8 (Image)](http://g.recordit.co/g7zcxrsKD6.gif)
24+
![iPhone 8 (Color)](http://g.recordit.co/3JYXSvjFAM.gif)
2525

2626
## Example
2727
```jsx
28+
import Icon from 'react-native-vector-icons/MaterialIcons';
2829
import ReactNativeParallaxHeader from 'react-native-parallax-header';
2930

31+
const IS_IPHONE_X = SCREEN_HEIGHT === || SCREEN_HEIGHT === 896;
32+
const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? (IS_IPHONE_X ? 44 : 20) : 0;
33+
const HEADER_HEIGHT = Platform.OS === 'ios' ? (IS_IPHONE_X ? 88 : 64) : 45;
34+
const NAV_BAR_HEIGHT = HEADER_HEIGHT - STATUS_BAR_HEIGHT;
35+
3036
const viewImages = {
3137
background: require('../../../img/test.jpg'),
3238
};
3339

34-
3540
const styles = StyleSheet.create({
36-
container: {
37-
backgroundColor: Colors.white,
41+
navContainer: {
42+
height: HEADER_HEIGHT,
43+
marginHorizontal: 10,
44+
},
45+
statusBar: {
46+
height: STATUS_BAR_HEIGHT,
47+
backgroundColor: Colors.transparent,
48+
},
49+
navBar: {
50+
height: NAV_BAR_HEIGHT,
51+
justifyContent: 'space-between',
52+
alignItems: 'center',
53+
flexDirection: 'row',
54+
backgroundColor: Colors.transparent,
55+
},
56+
innerContainer: {
57+
flex: 1,
58+
justifyContent: 'center',
59+
alignItems: 'center',
60+
margin: 10,
3861
},
3962
titleStyle: {
40-
fontSize: 16,
63+
color: Colors.white,
64+
fontWeight: 'bold',
65+
fontSize: 18,
4166
},
4267
});
4368

69+
renderNavBar = () => (
70+
<View style={styles.navContainer}>
71+
<View style={styles.statusBar} />
72+
<View style={styles.navBar}>
73+
<TouchableOpacity style={styles.iconLeft} onPress={() => {}}>
74+
<Icon name="add" size={25} color="#fff" />
75+
</TouchableOpacity>
76+
<TouchableOpacity style={styles.iconRight} onPress={() => {}}>
77+
<Icon name="search" size={25} color="#fff" />
78+
</TouchableOpacity>
79+
</View>
80+
</View>
81+
)
82+
4483
render() {
4584
return (
46-
<View style={styles.container}>
85+
<View style={commonStyles.container}>
4786
<ReactNativeParallaxHeader
48-
headerMinHeight={120}
49-
headerMaxHeight={170}
87+
headerMinHeight={HEADER_HEIGHT}
88+
headerMaxHeight={250}
5089
extraScrollHeight={20}
5190
navbarColor={Colors.primary}
52-
title={'Parallax Header :p'}
91+
title="Parallax Header ~"
5392
titleStyle={styles.titleStyle}
5493
backgroundImage={viewImages.background}
5594
backgroundImageScale={1.2}
5695
renderNavBar={this.renderNavBar}
5796
renderContent={this.renderContent}
97+
contentContainerStyle={{ flexGrow: 1 }}
98+
containerStyle={{ flex: 1 }}
5899
/>
59100
</View>
60101
);
@@ -73,7 +114,8 @@ render() {
73114
| `backgroundColor` | `string` | No | This is the color of the parallax background (before scrolling up), **will not be used if `backgroundImage` is specified** | Default color is `#303F9F` |
74115
| `extraScrollHeight` | `number` | No | This is the extra scroll height (after scrolling to bottom & exceed the headerMaxHeight) | Default is `50` |
75116
| `navbarColor` | `string` | No | This is the background color of the navbar (after scroll up) | Default color is `#3498db` |
76-
| `title` | `string` | No | This is the title to be display in the header | Default is empty string `‘’` |
117+
| `title` | `string` | No | This is the title to be display in the header | Default is empty string `‘’` |
77118
| `titleStyle` | `style` | No | This is the title style to override default font size/color | Default to `color: ‘white’ `text and `fontSize: 16` |
78119
| `scrollEventThrottle` | `number` | No | This is the scroll event throttle | Default is `16` |
79-
120+
| `contentContainerStyle` | `style` | No | This is the contentContainerStyle style to override default `<ScrollView>` contentContainerStyle style | Default to null |
121+
| `contentStyle` | `style` | No | This is the inner content style to override default `<View>` style inside `<ScrollView>` component | Default to null |

index.js

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const {
1313
height: SCREEN_HEIGHT,
1414
} = Dimensions.get('window');
1515

16-
const IS_IPHONE_X = SCREEN_HEIGHT === 812;
16+
const IS_IPHONE_X = SCREEN_HEIGHT === 812 || SCREEN_HEIGHT === 896;
1717
const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? (IS_IPHONE_X ? 44 : 20) : 0;
1818
const NAV_BAR_HEIGHT = Platform.OS === 'ios' ? (IS_IPHONE_X ? 88 : 64) : 45;
1919

@@ -281,15 +281,18 @@ class RNParallax extends Component {
281281
}
282282

283283
renderScrollView() {
284-
const { renderContent, scrollEventThrottle } = this.props;
284+
const { renderContent, scrollEventThrottle, contentContainerStyle, containerStyle } = this.props;
285285

286286
return (
287287
<Animated.ScrollView
288288
style={styles.scrollView}
289289
scrollEventThrottle={scrollEventThrottle}
290-
onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }])}
290+
onScroll={Animated.event(
291+
[{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
292+
)}
293+
contentContainerStyle={contentContainerStyle}
291294
>
292-
<View style={{ marginTop: this.getHeaderMaxHeight() }}>
295+
<View style={[{ marginTop: this.getHeaderMaxHeight() }, containerStyle]}>
293296
{renderContent()}
294297
</View>
295298
</Animated.ScrollView>
@@ -316,12 +319,14 @@ RNParallax.propTypes = {
316319
backgroundImage: PropTypes.any,
317320
navbarColor: PropTypes.string,
318321
title: PropTypes.string,
319-
titleStyle: PropTypes.number,
322+
titleStyle: PropTypes.any,
320323
headerMaxHeight: PropTypes.number,
321324
headerMinHeight: PropTypes.number,
322325
scrollEventThrottle: PropTypes.number,
323326
extraScrollHeight: PropTypes.number,
324327
backgroundImageScale: PropTypes.number,
328+
contentContainerStyle: PropTypes.any,
329+
containerStyle: PropTypes.any,
325330
};
326331

327332
RNParallax.defaultProps = {
@@ -336,6 +341,8 @@ RNParallax.defaultProps = {
336341
scrollEventThrottle: SCROLL_EVENT_THROTTLE,
337342
extraScrollHeight: DEFAULT_EXTRA_SCROLL_HEIGHT,
338343
backgroundImageScale: DEFAULT_BACKGROUND_IMAGE_SCALE,
344+
contentContainerStyle: null,
345+
containerStyle: null,
339346
};
340347

341348
export default RNParallax;

0 commit comments

Comments
 (0)