Skip to content

Instantly share code, notes, and snippets.

@ch3ll0v3k

ch3ll0v3k/menu.jsx

Created Feb 23, 2020
Embed
What would you like to do?
import React, { Component } from "react";
import {
Text,
TouchableOpacity,
View,
Image,
ScrollView,
Button,
ImageBackground,
AppState,
Platform,
BackHandler,
ToastAndroid,
Dimensions,
} from "react-native";
import { Avatar, Badge, Icon, withBadge, ListItem } from 'react-native-elements';
import Constants from 'expo-constants';
import { Notifications } from 'expo';
import * as Permissions from 'expo-permissions';
import TouchableMenuItem from './TouchableMenuItem';
import RootComponent from 'app/screens/RootComponent';
import LocDB from 'app/common/LocDB';
class Menu extends RootComponent /*Component*/{
constructor(props) {
super(props);
this.state = {
menus:[
{ title: 'Home', icon: 'home', routeName:'Home' },
// { title: 'Details', icon: 'info', routeName:'Details' },
// { title: 'Modal', icon: 'verified-user', routeName:'Modal' },
{ title: 'Create group', icon: 'pencil', routeName:'CreateGroup' },
{ title: 'Find group', icon: 'search', routeName:'FindGroup' },
{ title: 'Settings', icon: 'gear', routeName:'SettingsGeneral' },
],
// avatar: {uri:'file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540ch3ll0v3k%252FN-App/ImagePicker/9f9c5d68-23ff-4754-b33e-869454fc833e.jpg'},
avatar: null,
};
this._hardwareBackPressHandler = this._hardwareBackPressHandler.bind(this);
this._backPressHandler = this._backPressHandler.bind(this);
this._lastBackButtonPress = null;
}
_backPressHandler() {
// this.toast(' _backPressHandler ');
return true;
}
async _cleanStorage(){
this.showLoader();
const res = await this.setStorage({});
// this.alert( 'async _cleanStorage()', JSON.stringify(res, null, 2) );
this.hideLoader();
}
_hardwareBackPressHandler() {
const NavStack = this.props.navigation.state.routes[ 0 ];
const NavStackRoutes = NavStack.routes;
// console.json( { index: NavStack.index, NavStackRoutes} );
if(
!NavStackRoutes
|| NavStackRoutes.length <= 2
|| NavStackRoutes[ NavStack.index ].routeName == 'Home'
){
if (this._lastBackButtonPress + 500 >= new Date().getTime()) {
this.toast('Goodbye');
BackHandler.exitApp();
return true;
}
this.props.navigation.toggleDrawer();
this.toast('Double tap to exit');
this._lastBackButtonPress = new Date().getTime();
return true;
}
// there is 1 or more Sub-Nav::Screens in Stack
return false;
}
async componentWillMount(){
console.log(` WILL: MOUNT: ${this.constructor.name} `);
}
async componentDidMount(){
console.log(` DID: MOUNT: ${this.constructor.name} `);
BackHandler.addEventListener('hardwareBackPress', this._hardwareBackPressHandler);
BackHandler.addEventListener('backPress', this._hardwareBackPressHandler);
// this._notificationSubscription = Notifications.addListener(this._handleNotification);
// this.getPermissionAsync();
// TODO: Update data
// this.Api.tools.getUserAvatar( data.message.userId );
// this.setState({ avatar: {uri: res.uri} });
// this.updateStorage({avatar: res.uri}, 'user');
const User = await this.getStorage('user');
// console.json({ User });
if( User.success ){
// this.setState({avatar: {uri: User.data.avatar }});
this.setState({avatar: {uri: User.data.avatar }});
}
}
componentWillUnmount(){
console.log(` WILL: UN-MOUNT: ${this.constructor.name} `);
BackHandler.removeEventListener('hardwareBackPress', this._hardwareBackPressHandler);
BackHandler.removeEventListener('backPress', this._hardwareBackPressHandler);
// Notifications.removeEventListener( this._handleNotification );
// this._notificationSubscription;
}
async getPermissionAsync(){
// if (Constants.platform.ios) {
// const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
// if (status !== 'granted') {
// alert('Sorry, we need camera roll permissions to make this work!');
// }
// }
}
render(){
let { avatar } = this.state;
return(
<View style={{flex: 1, /*marginTop: Constants.statusBarHeight*/ }}>
<View style={{ height: 220, /*backgroundColor: '#333', color: '#fff'*/}}>
<ImageBackground source={require('app/assets/bgs/material-01.jpg')} style={{width: '100%', height: '100%'}}>
<View style={{
flex: 1, alignItems: 'center', adjustContent: 'center',
// backgroundColor: 'rgba(255,255,255, 0.3)'
}}>
<Avatar
rounded
// source={{ uri: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg', }}
source={ avatar }
// icon={{name: 'user-plus', type: 'font-awesome'}}
icon={{name: 'photo', type: 'font-awesome'}}
// size="xlarge"
size={ 170 }
// size="large"
onPress={() => {
// this.alert('OK');
}}
// activeOpacity={0.7}
containerStyle={{ marginTop: 35}}
// title='Title' // userName[0]+userName[1]
// showEditButton={true}
overlayContainerStyle={{
backgroundColor: '#000'
}}
// onEditPress={ ()=>{ this._pickAvatar(); } }
// onLongPress={ ()=>{ this.alert('onLongPress'); } }
/>
<Badge
badgeStyle={{ width: 30, height: 30, borderRadius: 15 }}
containerStyle={{ position: 'absolute', top: 50, left: 180 }}
status="success"
/>
</View>
</ImageBackground>
</View>
<View style={{flex: 1}}>
<ScrollView>
{
this.state.menus.map((item, index)=>{
return <TouchableMenuItem key={item+index} title={item.title} icon={item.icon} onPress={()=>{
this.props.navigation.navigate( item.routeName );
}} />
})
}
<TouchableMenuItem title="Sign-out" icon="arrow-left" onPress={()=>{
this.props.navigation.navigate('SignOut');
}} />
<TouchableMenuItem title="Clean storage" icon="close" onPress={()=>{
this._cleanStorage();
}} />
</ScrollView>
</View>
</View>
)
}
}
import { connect } from 'react-redux';
export default connect((_store)=>{return{_store};}, (_dispatch)=>{return {_dispatch}})( Menu );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment