Skip to content

S
safetcut-app
Commit e987c33c by OuiAtichat
Options

add safescrollview to bottomtabs

parent 92b026dd
Showing with 100 additions and 74 deletions
AppNavigation.js
import React from 'react';
import { Icon, View } from 'native-base';
// import { } from 'react-native';
import {
createStackNavigator,
createAppContainer,
createBottomTabNavigator,
createSwitchNavigator,
SafeAreaView,
} from 'react-navigation';
import { BottomNavigation, BottomNavigationTab } from 'react-native-ui-kitten';
......@@ -109,49 +111,65 @@ const BottomNavigationTabs = props => {
];
return (
<View style={{ backgroundColor: '#f3f3f3' }}>
<View
style={{
backgroundColor: 'white',
borderTopLeftRadius: 15,
borderTopRightRadius: 15,
}}
>
<View style={{ paddingHorizontal: 25 }}>
<BottomNavigation
{...props}
// style={{ marginTop: 5 }}
selectedIndex={props.navigation.state.index}
onSelect={onTabSelect}
indicatorStyle={{ borderRadius: 5 }}
>
{BottomTabs.map((tab, index) => (
<BottomNavigationTab
key={index + tab.label}
title={tab.label}
titleStyle={{ fontFamily: 'Avenir_Roman' }}
icon={props => {
const color = props.tintColor;
delete props.tintColor; // To remove warning
return (
<Icon
style={{
marginTop: 5,
textAlign: 'center',
fontSize: 20,
color,
}}
type={tab.icon.type || 'Ionicons'}
name={tab.icon.name}
/>
);
}}
/>
))}
</BottomNavigation>
</View>
<SafeAreaView
style={{
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
borderTopLeftRadius: 15,
borderTopRightRadius: 15,
backgroundColor: 'white',
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 6,
},
shadowOpacity: 0.39,
shadowRadius: 8.3,
elevation: 13,
}}
>
<View style={{ paddingHorizontal: 25 }}>
<BottomNavigation
// {...props}
style={{ marginTop: 1 }}
selectedIndex={props.navigation.state.index}
onSelect={onTabSelect}
indicatorStyle={{ borderRadius: 5 }}
>
{BottomTabs.map((tab, index) => (
<BottomNavigationTab
key={index + tab.label}
title={tab.label}
titleStyle={{
fontFamily: 'Avenir_Roman',
fontSize: 11,
fontWeight: '500',
marginVertical: 0,
marginBottom: 2,
}}
icon={props => {
let color = props.tintColor;
delete props.tintColor; // To remove warning
return (
<Icon
style={{
marginTop: 5,
textAlign: 'center',
fontSize: 20,
color,
}}
type={tab.icon.type || 'Ionicons'}
name={tab.icon.name}
/>
);
}}
/>
))}
</BottomNavigation>
</View>
</View>
</SafeAreaView>
);
};
const MainApp = createBottomTabNavigator(
......@@ -160,7 +178,7 @@ const MainApp = createBottomTabNavigator(
One: FirstStack,
Two: SecondStack,
Tree: ThirdStack,
Four: FourthStack,
Four: { screen: FourthStack, navigationOptions: { tabBarVisible: false } },
},
{
initialRouteName: 'SmartMeter',
......@@ -193,7 +211,7 @@ const AppStack = createSwitchNavigator(
Main: MainApp,
},
{
initialRouteName: 'AuthLoading',
initialRouteName: 'Main',
}
);
......
screens/Private/PageFour.js
......@@ -27,7 +27,7 @@ export default class PageFour extends Component {
render() {
return (
<View>
<View style={{ flex: 1, backgroundColor: '#000' }}>
<Text> Logout demo </Text>
<Button
onPress={() => {
......
screens/Private/SmartMeterScreen/SmartMeterScreen.js
import React, { Component } from 'react';
import { Text } from 'native-base';
import { Text, Footer } from 'native-base';
import { Image, FlatList, View } from 'react-native';
import { connect } from 'react-redux';
import { increment, decrement } from '../../../reduxStore/actions';
......@@ -64,33 +64,41 @@ class SmartMeterScreen extends Component {
render() {
return (
<FlatList
contentContainerStyle={{ backgroundColor: '#f3f3f3', paddingHorizontal: 15 }}
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 });
}}
/>
)}
/>
<>
<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' }} />
</>
);
}
}
......
screens/Public/AuthLoadingScreen.js
......@@ -23,7 +23,7 @@ export default class AuthLoadingScreen extends Component {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<ActivityIndicator size="large" color="#f44c4c" />
<StatusBar barStyle="default" />
<StatusBar hidden />
</View>
);
}
......
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