unioil-loyalty-rn-app/app/screens/myprofile/index.js

86 lines
2.5 KiB
JavaScript

import React from 'react';
import { Text } from 'react-native';
import { Container } from 'native-base';
import { connect } from "react-redux";
import { Tabs } from '../../components/tab';
import CustomHeader from '../../components/header.js';
import Elements from '../../components/elements.js';
import Theme from '../../components/theme.style';
import Tab1 from './profile/profile';
import Tab2 from './card';
import Tab3 from './transaction/transaction';
import CustomSafeArea from '../../components/safeArea.component.js';
class MyProfile extends React.PureComponent {
constructor(props) {
super(props)
}
state = {
px: 0,
pg: null
}
componentDidMount() {
this.init()
}
init = async () => {
let t = this.props.route.params && this.props.route.params.tab ? this.props.route.params.tab : ''
let x = 0
if(t == 'ProfileCardTab') x = 1
else if(t == 'ProfileTransactionsTab') x = 2
this.setState({ pg: x })
}
TabHead = (title, icon) => {
return (
<TabHeading textStyle={{color: 'red'}} style={{flexDirection: 'column', padding: 15, backgroundColor: Theme.colors.primary}}>
<Elements.icon name={icon} size={25} />
<Text style={{fontSize: 13, padding: 5, color: Theme.colors.lightGray, fontFamily: 'Arial'}}>{title}</Text>
</TabHeading>
)
}
sceneMap = () => {
const listofTabs = {
first: () => <Tab1 navigation={this.props} />,
second: () => <Tab2 navigation={this.props} />,
third: () => <Tab3 navigation={this.props} />
}
return listofTabs;
}
routes = () => {
const listofTabBar = [
{ key: 'first', title: 'Profile', activeIcon: "activeaccount", inActiveIcon: "inactiveaccount" },
{ key: 'second', title: 'My Card', activeIcon: "activecard", inActiveIcon: "inactivecard" },
{ key: 'third', title: 'Transactions', activeIcon: "activehistory", inActiveIcon: "history" },
];
return listofTabBar
}
render() {
const { tab } = this.props.route.params;
return (
<CustomSafeArea>
<CustomHeader title="My Profile" onBackPress={() => this.props.navigation.goBack()} menu={false} navigation={this.props} />
<Container style={{ flex: 1, backgroundColor: this.props.app_theme?.theme.dark ? this.props.app_theme?.theme.colors.background : Theme.colors.white }}>
<Tabs tab={tab} renderScene={this.sceneMap()} routes={this.routes()}/>
</Container>
</CustomSafeArea>
)
}
}
const mapStateToProps = (state) => {
return {
app_theme: state.appThemeReducer.theme
}
}
export default connect(mapStateToProps, null)(MyProfile);