Commit 025c1436 authored by Trisno's avatar Trisno
parents 533f60a4 4d782529
......@@ -419,7 +419,7 @@ class Auth extends React.Component {
},
title: 'REGISTER'
}} />
<Stack.Screen name="TopUpInfo" component={TopUpInfo} />
<Stack.Screen name="TopUpInfo" component={TopUpInfo} options={{ headerShown: false }}/>
<Stack.Screen name="Reward Detail" component={RewardDetail} />
<Stack.Screen name="Reward Select" component={RewardSelect}
options={{
......
......@@ -222,7 +222,6 @@ class Home extends React.Component {
</TouchableOpacity>
</View>
</View>
<View style={{backgroundColor: 'red'}}>
<SliderBox
images={this.state.images}
onCurrentImagePressed={index => console.log(`image ${index} pressed`)}
......@@ -258,8 +257,6 @@ class Home extends React.Component {
onCurrentImagePressed={(index) => this.props.navigation.navigate('News Detail', {slug: this.state.slugs[index]})}
/>
</View>
</View>
<View style={styles.content}>
<View style={styles.card}>
<Card>
......
......@@ -4,7 +4,7 @@ import { Image } from 'react-native-elements';
import Axios from 'axios';
import { TouchableOpacity, ScrollView } from 'react-native-gesture-handler';
import HTML from 'react-native-render-html';
import { getStatusBarHeight } from 'react-native-status-bar-height';
export default class NewsDetail extends React.Component {
constructor(props) {
super(props);
......@@ -13,21 +13,23 @@ export default class NewsDetail extends React.Component {
subtitle: '',
image: '',
content: '',
image_height: 400
image_height: 400,
statusbar_height: 50
}
}
componentDidMount() {
const screenWidth = Math.round(Dimensions.get('window').width);
const statusBarHeight = getStatusBarHeight();
this.setState({
image_height: screenWidth
image_height: screenWidth,
statusbar_height: statusBarHeight
})
this.get_news_detail(this.props.route.params.slug)
}
get_news_detail(slug) {
Axios.get('https://excelsocrm.ravintoladev.com/cms/v2/detail/' + slug).then(res => {
// console.log(JSON.stringify(res.data))
const detail = res.data;
this.setState({
title: detail.title,
......@@ -40,9 +42,8 @@ export default class NewsDetail extends React.Component {
}
render() {
console.log('Image : ' + this.state.image)
return (
<View style={styles.container}>
<View style={styles.container(this.state.statusbar_height)}>
<View style={styles.header}>
<TouchableOpacity onPress={() => this.props.navigation.goBack()}>
<Image source={require('../assets/icon/back.png')} style={{width: 35, height: 35}} />
......@@ -66,11 +67,11 @@ export default class NewsDetail extends React.Component {
const styles = StyleSheet.create({
container: {
container: (marginTop) => ({
flex: 1,
marginTop: 29,
marginTop: marginTop,
backgroundColor: 'white',
},
}),
header: {
height: 60,
paddingHorizontal: 10,
......
import React from 'react';
import {
View,
StyleSheet,
Text,
StatusBar,
Image,
ScrollView,
TouchableOpacity,
Alert,
ImageBackground,
} from 'react-native';
import { CheckBox, Separator, Grid, Row, Card, Button, Icon, CardItem, Body } from 'native-base';
import { Collapse, CollapseHeader, CollapseBody, AccordionList } from 'accordion-collapse-react-native'
import Axios from 'axios';
import React from 'react';
import { ScrollView, StyleSheet, Text, View, Image } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import HTML from 'react-native-render-html';
import { getStatusBarHeight } from 'react-native-status-bar-height';
export default class TopUpInfo extends React.Component {
constructor(props){
constructor(props) {
super(props);
this.state = {
content:""
topup_info: [],
statusbar_height: 50
}
}
componentDidMount(){
Axios.get('https://excelsocrm.ravintoladev.com/cms/v2/detail/topup-info').then(res => {
let data = res.data
let contents = data.content
componentDidMount() {
const statusBarHeight = getStatusBarHeight();
this.setState({
content:contents
statusbar_height: statusBarHeight
})
Axios.get('https://excelsocrm.ravintoladev.com/cms/v2/list/topup-info').then(res => {
let data = res.data;
this.setState({
topup_info: data.contents
})
}).catch(error => {
let response = error.response.data;
// console.log(response.msg)
Alert.alert(response.msg);
})
}
render() {
const htmlContent = this.state.content;
return (
<ScrollView style={{ backgroundColor:'white'}}>
<View style={{ flex: 1 }}>
<Collapse>
<CollapseHeader>
<Separator bordered style={{backgroundColor:'white'}}>
<Text style={{ fontSize: 12, fontWeight: 'bold' }}>Bank BCA</Text>
</Separator>
</CollapseHeader>
<CollapseBody>
<Card style={{ marginLeft: 10, marginRight: 10 }}>
<CardItem>
<Body style={{ marginLeft: 5 }}>
<HTML html={this.state.content} />
</Body>
</CardItem>
</Card>
</CollapseBody>
</Collapse>
<Collapse>
<CollapseHeader>
<Separator bordered style={{backgroundColor:'white'}}>
<Text style={{ fontSize: 12, fontWeight: 'bold' }}>Bank BNI</Text>
</Separator>
</CollapseHeader>
<CollapseBody>
<Card style={{ marginLeft: 10, marginRight: 10 }}>
<CardItem>
<Body style={{ marginLeft: 5 }}>
<HTML html={this.state.content} />
</Body>
</CardItem>
</Card>
</CollapseBody>
</Collapse>
<Collapse>
<CollapseHeader>
<Separator bordered style={{backgroundColor:'white'}}>
<Text style={{ fontSize: 12, fontWeight: 'bold' }}>Bank MANDIRI</Text>
</Separator>
</CollapseHeader>
<CollapseBody>
<Card style={{ marginLeft: 10, marginRight: 10 }}>
<CardItem>
<Body style={{ marginLeft: 5 }}>
<HTML html={this.state.content} />
</Body>
</CardItem>
</Card>
</CollapseBody>
</Collapse>
<View style={styles.container(this.state.statusbar_height)}>
<View style={styles.header}>
<Text style={styles.headerTitle}>TOPUP INFO</Text>
</View>
<ScrollView>
<View style={styles.content}>
{
this.state.topup_info.map((item, i) => {
return (
<View style={styles.item_container} key={i}>
<View style={{flexDirection: 'row', height: 24, marginBottom: 16}}>
<Text style={styles.item_title}>{item.title}</Text>
<Image style={styles.item_image} source={item.title_thumb ? { uri: item.title_thumb } : null}/>
</View>
<HTML html={item.content} tagsStyles={{ p: { fontFamily: 'Gotham-Light', marginTop: 8, marginBottom: 8, color: '#adadad' }, blockquote: { backgroundColor: "#f1f1f1", padding: 12, paddingBottom: 0, marginTop: 6, color: '#adadad' }, ul: { fontFamily: 'Gotham-Light', marginLeft: 0, color: '#adadad', paddingLeft: 0 }, li: { fontFamily: 'Gotham-Light', marginLeft: 0, color: '#adadad', paddingLeft: 0 } }} />
</View>
)
})
}
</View>
</ScrollView>
</View>
)
}
}
const styles = StyleSheet.create({
container: (marginTop) => ({
flex: 1,
marginTop: marginTop,
backgroundColor: 'white',
}),
header: {
height: 60,
paddingHorizontal: 10,
flexDirection: 'row',
backgroundColor: '#CFB368',
alignItems: 'center'
},
headerTitle: {
flex: 1,
textAlign: 'center',
margin: 20,
fontSize: 23,
alignSelf: 'center',
color: 'white',
fontFamily: 'Gotham-Black'
},
image_container: (height) => ({
height: height,
backgroundColor: 'gray'
}),
image: (height) => ({
width: '100%',
height: height
}),
title: {
textAlign: 'center',
fontFamily: 'Gotham-Black',
fontSize: 22,
marginBottom: 10,
color: '#CFB368'
},
content: {
paddingHorizontal: 20,
paddingVertical: 25
},
item_container: {
borderColor: 'gray',
borderWidth: 1,
borderRadius: 10,
padding: 20,
marginBottom: 20,
color: '#adadad'
},
item_title: {
fontSize: 18,
color: '#adadad',
fontFamily: 'Gotham-Black',
flex: 1,
alignSelf: 'center',
},
item_image: {
width: 96,
height: 24,
alignItems: 'flex-end'
}
})
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment