Skip to content

S
safetcut-app
Commit 7b6c80f0 by OuiAtichat
Options

delete unnecessary config

parent e987c33c
Showing with 98 additions and 64 deletions
AppNavigation.js
import React from 'react';
import { Icon, View } from 'native-base';
// import { } from 'react-native';
import {
createStackNavigator,
createAppContainer,
......@@ -12,8 +11,8 @@ import { BottomNavigation, BottomNavigationTab } from 'react-native-ui-kitten';
import SmartMeterScreen from './screens/Private/SmartMeterScreen/SmartMeterScreen';
import SmartMeterDetailScreen from './screens/Private/SmartMeterScreen/SmartMeterDetailScreen';
import CameraScreen from './screens/Private/CameraScreen';
// import HomeScreen from './screens/Private/HomeScreen';
import PageOne from './screens/Private/PageOne';
import PageTwo from './screens/Private/PageTwo';
import PageTree from './screens/Private/PageTree';
......@@ -30,10 +29,12 @@ import SendEmailScreen from './screens/Public/SendEmailScreen';
const defaultNavigationOptions = {
headerStyle: {
backgroundColor: '#f44c4c',
borderColor: 'transparent',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
fontFamily: 'Avenir_Roman',
},
};
......@@ -44,9 +45,19 @@ const SmartMeterStack = createStackNavigator(
},
{
headerLayoutPreset: 'center',
defaultNavigationOptions,
}
);
const CameraStack = createStackNavigator(
{
Camera: CameraScreen,
},
{
mode: 'modal',
headerLayoutPreset: 'center',
navigationOptions: {
tabBarLabel: 'Home',
// tabBarVisible: false,
tabBarVisible: false,
},
defaultNavigationOptions,
}
......@@ -58,7 +69,6 @@ const FirstStack = createStackNavigator(
},
{
headerLayoutPreset: 'center',
navigationOptions: { tabBarLabel: 'First' },
defaultNavigationOptions,
}
);
......@@ -69,7 +79,6 @@ const SecondStack = createStackNavigator(
},
{
headerLayoutPreset: 'center',
navigationOptions: { tabBarLabel: 'Second' },
defaultNavigationOptions,
}
);
......@@ -80,7 +89,6 @@ const ThirdStack = createStackNavigator(
},
{
headerLayoutPreset: 'center',
navigationOptions: { tabBarLabel: 'Third' },
defaultNavigationOptions,
}
);
......@@ -91,7 +99,6 @@ const FourthStack = createStackNavigator(
},
{
headerLayoutPreset: 'center',
navigationOptions: { tabBarLabel: 'Fourth' },
defaultNavigationOptions,
}
);
......@@ -123,16 +130,17 @@ const BottomNavigationTabs = props => {
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 6,
height: 5,
},
shadowOpacity: 0.39,
shadowRadius: 8.3,
elevation: 13,
shadowOpacity: 0.3,
shadowRadius: 6.27,
elevation: 10,
}}
>
<View style={{ paddingHorizontal: 25 }}>
<BottomNavigation
// {...props}
{...props}
style={{ marginTop: 1 }}
selectedIndex={props.navigation.state.index}
onSelect={onTabSelect}
......@@ -172,13 +180,13 @@ const BottomNavigationTabs = props => {
</SafeAreaView>
);
};
const MainApp = createBottomTabNavigator(
const WithBottomTabStack = createBottomTabNavigator(
{
SmartMeter: SmartMeterStack,
One: FirstStack,
Two: SecondStack,
Tree: ThirdStack,
Four: { screen: FourthStack, navigationOptions: { tabBarVisible: false } },
Four: FourthStack,
},
{
initialRouteName: 'SmartMeter',
......@@ -190,6 +198,16 @@ const MainApp = createBottomTabNavigator(
}
);
const MainStack = createStackNavigator(
{
WithBottomTab: WithBottomTabStack,
Camera: CameraStack,
},
{
defaultNavigationOptions: { header: null },
}
);
const IntroStack = createStackNavigator(
{
Login: LoginScreen,
......@@ -208,7 +226,7 @@ const AppStack = createSwitchNavigator(
{
AuthLoading: AuthLoadingScreen,
Intro: IntroStack,
Main: MainApp,
Main: MainStack,
},
{
initialRouteName: 'Main',
......
screens/Private/HomeScreen.js → screens/Private/CameraScreen.js
import React, { Component } from 'react';
import { Text, View, TextInput } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { HeaderButtons, HeaderButton, Item } from 'react-navigation-header-buttons';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../components/IoniconsHeaderButton';
const IoniconsHeaderButton = props => <HeaderButton {...props} IconComponent={Ionicons} iconSize={30} color="#fff" />;
export default class HomeScreen extends Component {
export default class CameraScreen extends Component {
static navigationOptions = ({ navigation }) => ({
title: 'Home',
title: 'Camera',
headerLeft: (
<HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
<Item title="menu" iconName="ios-menu" onPress={() => console.log('menu')} />
......@@ -15,7 +13,7 @@ export default class HomeScreen extends Component {
),
headerRight: (
<HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
<Item title="search" iconName="ios-search" onPress={() => alert('search')} />
<Item title="close" iconName="ios-close" onPress={() => navigation.pop()} />
</HeaderButtons>
),
});
......
screens/Private/PageFour.js
import React, { Component } from 'react';
import { AsyncStorage } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { Container, Header, Button, Content, ActionSheet, Text, View } from 'native-base';
import { Button, ActionSheet, Text, View } from 'native-base';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../components/IoniconsHeaderButton';
......@@ -27,7 +26,7 @@ export default class PageFour extends Component {
render() {
return (
<View style={{ flex: 1, backgroundColor: '#000' }}>
<View style={{ flex: 1, backgroundColor: '#f3f3f3' }}>
<Text> Logout demo </Text>
<Button
onPress={() => {
......
screens/Private/SmartMeterScreen/SmartMeterDetailScreen.js
......@@ -93,11 +93,12 @@ export default class SmartMeterDetailScreen extends Component {
<Icon name="ios-notifications" style={{ color: '#fff' }} />
<Badge
badgeStyle={{
width: 11,
height: 11,
width: 12,
height: 12,
borderWidth: 2,
backgroundColor: '#f8e71c',
borderColor: '#f44c4c',
borderRadius: 6,
}}
containerStyle={{ position: 'absolute', top: -2, right: -4 }}
/>
......
screens/Private/SmartMeterScreen/SmartMeterScreen.js
......@@ -7,6 +7,7 @@ import { color } from '../../../constants/Styles';
import MeterCard from '../../../components/MeterCard';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
import { isIphoneX } from '../../../utils/isPhoneX';
const Meter = [
{
......@@ -49,7 +50,7 @@ class SmartMeterScreen extends Component {
),
headerRight: (
<HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
<Item title="add" iconName="ios-add" onPress={() => alert('add')} />
<Item title="add" iconName="ios-add" onPress={() => navigation.navigate('Camera')} />
</HeaderButtons>
),
});
......@@ -64,41 +65,38 @@ class SmartMeterScreen extends Component {
render() {
return (
<>
<FlatList
style={{
flex: 1,
backgroundColor: '#f3f3f3',
paddingHorizontal: 15,
}}
// contentContainerStyle={{}}
data={Meter}
keyExtractor={item => item.deviceName}
ListEmptyComponent={() => (
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<Text>No Device Connected</Text>
</View>
)}
ListHeaderComponent={() => (
<Text style={{ fontSize: 16, color: color.grey3, marginVertical: 20 }}>Smart meter</Text>
)}
renderItem={({ item, index }) => (
<MeterCard
key={index + item.deviceName}
deviceName={item.deviceName}
description={item.description}
img={item.img}
isOnline={item.isOnline}
isOn={item.isOn}
index={index + 1}
onPressEachCard={() => {
this.props.navigation.navigate('SmartMeterDetail', { deviceName: item.deviceName });
}}
/>
)}
/>
<View style={{ backgroundColor: '#f3f3f3' }} />
</>
<FlatList
style={{
flex: 1,
backgroundColor: '#f3f3f3',
paddingHorizontal: 15,
}}
contentContainerStyle={{ paddingBottom: isIphoneX() ? 90 : 55 }} //iPhoneX BottomSpace = 34
data={Meter}
keyExtractor={item => item.deviceName}
ListEmptyComponent={() => (
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<Text>No Device Connected</Text>
</View>
)}
ListHeaderComponent={() => (
<Text style={{ fontSize: 16, color: color.grey3, marginVertical: 20 }}>Smart meter</Text>
)}
renderItem={({ item, index }) => (
<MeterCard
key={index + item.deviceName}
deviceName={item.deviceName}
description={item.description}
img={item.img}
isOnline={item.isOnline}
isOn={item.isOn}
index={index + 1}
onPressEachCard={() => {
this.props.navigation.navigate('SmartMeterDetail', { deviceName: item.deviceName });
}}
/>
)}
/>
);
}
}
......
utils/isPhoneX.js 0 → 100644
import { Dimensions, Platform } from 'react-native';
export function isIphoneX() {
const dim = Dimensions.get('window');
return (
// This has to be iOS
Platform.OS === 'ios' &&
// Check either, iPhone X or XR
(isIPhoneXSize(dim) || isIPhoneXrSize(dim))
);
}
export function isIPhoneXSize(dim) {
return dim.height == 812 || dim.width == 812;
}
export function isIPhoneXrSize(dim) {
return dim.height == 896 || dim.width == 896;
}
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