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