Skip to content

Instantly share code, notes, and snippets.

@fachryansyah
Last active January 25, 2020 17:34
Show Gist options
  • Save fachryansyah/f6303af34460f2e0dbdfa91a62e3e3cc to your computer and use it in GitHub Desktop.
Save fachryansyah/f6303af34460f2e0dbdfa91a62e3e3cc to your computer and use it in GitHub Desktop.
import React, { Component } from 'react'
import {
View,
StyleSheet,
Dimensions,
Text,
Image,
ScrollView
} from 'react-native'
class DetailScreen extends Component {
constructor(props) {
super(props)
}
render() {
const { navigation } = this.props;
const item = navigation.getParam('item', 'NO ITEM')
return (
<>
<View>
<ScrollView>
<Image style={styles.imageCover} source={{ uri: item.cover }} />
<View style={styles.card}>
<Text style={styles.textSerial}>{item.serial}</Text>
<Text style={styles.textChara}>{item.title}</Text>
<Text style={styles.textSubTitle}>Pengisi suara: {item.dubber}</Text>
<Text style={styles.textSubTitle}>Diperankan oleh: Suzu Hirose</Text>
<Text style={styles.textHeader}>Description: </Text>
<Text style={styles.textDescription}>
{item.description}
</Text>
</View>
</ScrollView>
</View>
</>
)
}
}
const SCREEN_WIDTH = Dimensions.get('window').width
const SCREEN_HEIGHT = Dimensions.get('window').height
const styles = StyleSheet.create({
imageCover: {
resizeMode: 'cover',
height: SCREEN_HEIGHT / 2,
},
card: {
backgroundColor: 'white',
padding: 26,
paddingTop: 46,
borderTopLeftRadius: 28,
borderTopRightRadius: 28,
width: SCREEN_WIDTH,
top: -26,
},
textChara: {
fontSize: 28,
fontWeight: '700',
color: '#353535'
},
textSerial: {
fontSize: 20,
marginBottom: 16,
fontWeight: '700',
color: '#7e7f7c'
},
textSubTitle: {
fontSize: 16,
color: '#212121'
},
textHeader: {
fontSize: 24,
marginTop: 28,
fontWeight: '700',
color: '#353535'
},
textDescription: {
fontSize: 16,
color: '#212121'
}
})
export default DetailScreen
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment