Skip to content

Instantly share code, notes, and snippets.

@AmyrAhmady
Created March 27, 2020 11:05
Show Gist options
  • Save AmyrAhmady/b97294832bec2a34d107b133d3114371 to your computer and use it in GitHub Desktop.
Save AmyrAhmady/b97294832bec2a34d107b133d3114371 to your computer and use it in GitHub Desktop.
import React from 'react';
import { View, Text, SafeAreaView } from 'react-native';
import BottomSheet from 'reanimated-bottom-sheet'
import { widthPercentageToDP as wp, heightPercentageToDP as hp } from 'react-native-responsive-screen';
export default class dummyPage extends React.Component {
constructor(props) {
super(props);
}
renderContent() {
return (
<View style={{ backgroundColor: 'pink', height: hp(36) }}>
<View style={{ margin: wp(3) }}>
<Text>Contents (Swipe up to view!)</Text>
<View style={{ marginTop: hp(3) }}>
<Text>Kar is a good guy, but he wastes his time on KCNR which is kinda already dead.</Text>
<Text>I hope he succeeds in his react-native project and becomes a react-native dev.</Text>
</View>
</View>
</View>
);
}
renderHeader() {
return (
<View style={{
height: hp(4), justifyContent: 'center', alignItems: 'center',
borderTopLeftRadius: 20, borderTopRightRadius: 20, borderWidth: 0.5,
borderColor: '#999', backgroundColor: 'white', overflow: 'hidden'
}}>
<Text>heeeaaaaadeeer</Text>
</View>
);
}
render() {
return (
<View style={{ flex: 1 }}>
<SafeAreaView style={{ flex: 1, backgroundColor: '#f9f9f9', paddingTop: wp(2) }}>
<View style={{
flex: 1, justifyContent: 'center',
alignItems: 'center', backgroundColor: '#006600'
}}>
<Text style={{ color: 'white' }}>Map Map Map!</Text>
</View>
<View style={{ height: hp(30), padding: wp(1.5), backgroundColor: '#ccc' }}>
<View style={{
borderRadius: 10, elevation: 3, backgroundColor: 'white',
margin: wp(2), paddingHorizontal: wp(4), paddingVertical: hp(2)
}}>
<Text style={{ fontWeight: 'bold' }}>Hello, how can I help you dear?</Text>
</View>
</View>
<BottomSheet
snapPoints={[hp(10), hp(40)]}
initialSnap={1}
renderContent={() => this.renderContent()}
renderHeader={() => this.renderHeader()}
/>
</SafeAreaView >
</View>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment