Skip to content

S
safetcut-app
Commit eb7e92e5 by Tonk
Options

add wifi setting screen

parent d2292c1d
Showing with 127 additions and 6 deletions
AppNavigation.js
......@@ -23,14 +23,15 @@ import TimerScreen from './screens/Private/TimerScreen/TimerScreen';
import SettingScreen from './screens/Private/SettingScreen/SettingScreen';
import Setting from './screens/Private/SettingScreen/Setting';
import ShareEmailScreen from './screens/Private/SettingScreen/ShareEmailScreen';
import WifiSelectScreen from './screens/Private/SettingScreen/WifiSelectScreen';
// Notification
import NotificationScreen from './screens/Private/NotificationScreen/NotificationScreen';
// History
import HistoryScreen from './screens/Private/HistoryScreen/HistoryScreen';
import AuthLoadingScreen from './screens/Public/AuthLoadingScreen';
import OnboardingScreen from './screens/Public/OnboardingScreen';
import ForgotPasswordScreen from './screens/Public/ForgotPasswordScreen';
import LoginScreen from './screens/Public/LoginScreen';
......@@ -120,6 +121,7 @@ const SettingStack = createStackNavigator(
Setting: SettingScreen,
SettingData: Setting,
ShareEmail: ShareEmailScreen,
SettingWifi: WifiSelectScreen,
},
{
headerLayoutPreset: 'center',
......
screens/Private/NotificationScreen/NotificationScreen.js
......@@ -14,7 +14,7 @@ import { withNavigationFocus } from 'react-navigation';
const tabHeader = [
{ type: 'all', label: 'All' },
{ type: 'notification', label: 'Notifications' },
{ type: 'notification', label: 'Notification' },
{ type: 'log', label: 'Logging' },
];
const dt2 = require('./notification.json');
......@@ -337,15 +337,35 @@ class NotificationScreen extends React.Component {
const TabStyle = {
textStyle: theme.description,
activeTextStyle: [theme.description, theme.textWhite],
tabStyle: { backgroundColor: 'transparent', borderRadius: 100, margin: 10 },
activeTabStyle: { backgroundColor: color.primary, borderRadius: 100, margin: 10 },
tabStyle: {
backgroundColor: 'transparent',
borderRadius: 100,
marginVertical: 10,
paddingHorizontal: 10,
width: width / 3,
},
activeTabStyle: {
backgroundColor: color.primary,
borderRadius: 100,
marginVertical: 10,
marginHorizontal: 5,
width: width / 3 - 10,
},
style: { backgroundColor: color.defaultBg },
};
return (
<View style={theme.container}>
<Tabs
tabBarUnderlineStyle={{ backgroundColor: 'transparent' }}
renderTabBar={() => <ScrollableTab style={{ backgroundColor: color.defaultBg, borderWidth: 0 }} />}
renderTabBar={() => (
<ScrollableTab
style={{
backgroundColor: color.defaultBg,
borderWidth: 0,
marginTop: 10,
}}
/>
)}
>
{tabHeader.map((item, index) => (
<Tab heading={item.label} {...TabStyle} key={`tab${index}`}>
......
screens/Private/SettingScreen/SettingScreen.js
......@@ -123,7 +123,10 @@ class SettingScreen extends React.Component {
<Icon name="chevron-thin-right" type="Entypo" style={styles.icon} />
</Right>
</ListItem>
<ListItem style={{ borderBottomColor: '#efefef' }}>
<ListItem
onPress={() => this.props.navigation.navigate('SettingWifi')}
style={{ borderBottomColor: '#efefef' }}
>
<Body>
<Text style={[theme.normalText, theme.textDark]}>WiFi</Text>
<Text note numberOfLines={1} style={theme.description}>
......
screens/Private/SettingScreen/WifiSelectScreen.js 0 → 100644
import React from 'react';
import { Text, Icon } from 'native-base';
import { ScrollView, FlatList } from 'react-native-gesture-handler';
import { View, StyleSheet } from 'react-native';
import { theme, color } from '../../../constants/Styles';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import IoniconsHeaderButton from '../../../components/IoniconsHeaderButton';
import { isIphoneX } from '../../../utils/isPhoneX';
const mock = [
{ name: 'wifi1', strength: 5, lock: true, connected: false },
{ name: 'wifi2', strength: 5, lock: true, connected: false },
{ name: 'wifi3', strength: 5, lock: true, connected: false },
{ name: 'wifi4', strength: 5, lock: true, connected: true },
];
export default class WifiSelectScreen extends React.Component {
static navigationOptions = ({ navigation }) => {
return {
title: 'Setting',
headerLeft: (
<HeaderButtons HeaderButtonComponent={IoniconsHeaderButton}>
<Item title="back" iconName="ios-arrow-back" onPress={() => navigation.goBack()} />
</HeaderButtons>
),
};
};
renderWifiList() {
return (
<FlatList
data={mock.filter(x => x.connected === false)}
renderItem={({ item, index }) => this.renderWifiCard(item)}
ListHeaderComponent={() => <Text style={styles.header}>Choose a network</Text>}
keyExtractor={(item, index) => index}
ItemSeparatorComponent={() => <View style={styles.separator} />}
style={{ marginBottom: isIphoneX() ? 100 : 55 }}
/>
);
}
renderWifiCard(item) {
return (
<View
style={[
styles.cardContainer,
{
backgroundColor: item.connected ? 'rgba(238,84,84,0.2)' : color.white,
},
]}
>
<View style={[theme.rowContainer, { justifyContent: 'space-between' }]}>
<View>
<Text style={[theme.smallTitle, theme.textDark]}>{item.name}</Text>
{item.connected ? (
<Text style={[theme.description, { color: color.primary }]}>Connected</Text>
) : null}
</View>
<View style={theme.rowContainer}>
{item.connected ? null : item.lock ? (
<Icon name="lock" type="FontAwesome" style={styles.iconStyle} />
) : null}
<Icon name="wifi" type="FontAwesome" style={styles.iconStyle} />
</View>
</View>
</View>
);
}
render() {
return (
<ScrollView style={[theme.container, {}]}>
<Text style={styles.header}>Connected WiFi</Text>
{this.renderWifiCard(mock.find(x => x.connected === true))}
{this.renderWifiList()}
</ScrollView>
);
}
}
const styles = StyleSheet.create({
separator: {
marginHorizontal: 10,
height: StyleSheet.hairlineWidth,
backgroundColor: 'rgba(226, 230, 239, 0.6)',
},
header: {
...theme.normalText,
marginVertical: 10,
marginLeft: 20,
},
cardContainer: {
flex: 1,
minHeight: 50,
paddingHorizontal: 20,
paddingVertical: 10,
},
iconStyle: {
fontSize: 14,
marginLeft: 10,
},
});
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