Created
April 28, 2019 18:48
-
-
Save Sande3p/a3d4c721e359428e38d639bb553f7737 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from 'react'; | |
import { | |
Dimensions, | |
Image, | |
ListView, | |
PixelRatio, | |
StyleSheet, | |
Text, | |
View, | |
} from 'react-native'; | |
import ParallaxScrollView from 'react-native-parallax-scroll-view'; | |
/** | |
* Loading component | |
*/ | |
export default class ParallaxScroll extends Component { | |
constructor(props) { | |
super(props); | |
this.state = { | |
dataSource: new ListView.DataSource({ | |
rowHasChanged: (r1, r2) => r1 !== r2 | |
}).cloneWithRows([ | |
'Simplicity Matters', | |
'Hammock Driven Development', | |
'Value of Values', | |
'Are We There Yet?', | |
'The Language of the System', | |
'Design, Composition, and Performance', | |
'Clojure core.async', | |
'The Functional Database', | |
'Deconstructing the Database', | |
'Hammock Driven Development', | |
'Value of Values' | |
]) | |
}; | |
} | |
render() { | |
const { onScroll = () => {} } = this.props; | |
return ( | |
<ListView | |
ref="ListView" | |
style={styles.container} | |
dataSource={ this.state.dataSource } | |
renderRow={(rowData) => ( | |
<View key={rowData} style={ styles.row }> | |
<Text style={ styles.rowText }> | |
{ rowData } | |
</Text> | |
</View> | |
)} | |
renderScrollComponent={props => ( | |
<ParallaxScrollView | |
onScroll={onScroll} | |
headerBackgroundColor="#333" | |
stickyHeaderHeight={ STICKY_HEADER_HEIGHT } | |
parallaxHeaderHeight={ PARALLAX_HEADER_HEIGHT } | |
backgroundSpeed={10} | |
renderBackground={() => ( | |
<View key="background"> | |
<Image source={{uri: 'https://images.unsplash.com/photo-1556093695-a0e0a94515dd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60', | |
width: window.width, | |
height: PARALLAX_HEADER_HEIGHT}}/> | |
<View style={{position: 'absolute', | |
top: 0, | |
width: window.width, | |
backgroundColor: 'rgba(0,0,0,.4)', | |
height: PARALLAX_HEADER_HEIGHT}}/> | |
</View> | |
)} | |
renderForeground={() => ( | |
<View key="parallax-header" style={ styles.parallaxHeader }> | |
<Image style={ styles.avatar } source={{ | |
uri: 'https://images.unsplash.com/profile-1547648304142-77a334c36d7f?dpr=2&auto=format&fit=crop&w=128&h=128&q=60&crop=faces&bg=fff', | |
width: AVATAR_SIZE, | |
height: AVATAR_SIZE | |
}}/> | |
<Text style={ styles.sectionSpeakerText }> | |
Talks by Rich Hickey | |
</Text> | |
<Text style={ styles.sectionTitleText }> | |
CTO of Cognitec, Creator of Clojure | |
</Text> | |
</View> | |
)} | |
renderStickyHeader={() => ( | |
<View key="sticky-header" style={styles.stickySection}> | |
<Text style={styles.stickySectionText}>Scrolling title text</Text> | |
</View> | |
)} | |
renderFixedHeader={() => ( | |
<View key="fixed-header" style={styles.fixedSection}> | |
<Text style={styles.fixedSectionText} | |
onPress={() => this.refs.ListView.scrollTo({ x: 0, y: 0 })}> | |
Scroll to top | |
</Text> | |
</View> | |
)}/> | |
)} | |
/> | |
); | |
} | |
} | |
const window = Dimensions.get('window'); | |
const AVATAR_SIZE = 120; | |
const ROW_HEIGHT = 60; | |
const PARALLAX_HEADER_HEIGHT = 350; | |
const STICKY_HEADER_HEIGHT = 70; | |
const styles = StyleSheet.create({ | |
container: { | |
flex: 1, | |
backgroundColor: 'black' | |
}, | |
background: { | |
position: 'absolute', | |
top: 0, | |
left: 0, | |
width: window.width, | |
height: PARALLAX_HEADER_HEIGHT | |
}, | |
stickySection: { | |
height: STICKY_HEADER_HEIGHT, | |
width: 300, | |
justifyContent: 'flex-end' | |
}, | |
stickySectionText: { | |
color: 'white', | |
fontSize: 20, | |
margin: 10 | |
}, | |
fixedSection: { | |
position: 'absolute', | |
bottom: 10, | |
right: 10 | |
}, | |
fixedSectionText: { | |
color: '#999', | |
fontSize: 20 | |
}, | |
parallaxHeader: { | |
alignItems: 'center', | |
flex: 1, | |
flexDirection: 'column', | |
paddingTop: 100 | |
}, | |
avatar: { | |
marginBottom: 10, | |
borderRadius: AVATAR_SIZE / 2 | |
}, | |
sectionSpeakerText: { | |
color: 'white', | |
fontSize: 24, | |
paddingVertical: 5 | |
}, | |
sectionTitleText: { | |
color: 'white', | |
fontSize: 18, | |
paddingVertical: 5 | |
}, | |
row: { | |
overflow: 'hidden', | |
paddingHorizontal: 10, | |
height: ROW_HEIGHT, | |
backgroundColor: 'white', | |
borderColor: '#ccc', | |
borderBottomWidth: 1, | |
justifyContent: 'center' | |
}, | |
rowText: { | |
fontSize: 20 | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment