eduardo
/
katoikia-app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

top bar navigation profile

This commit is contained in:
Maria Sanchez 2022-08-24 20:38:31 -06:00
parent 5991ee9471
commit b7f6bc70bb
3 changed files with 58 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
mobile-ui/components/AreaComun.js
View File

@ -144,13 +144,13 @@ export default function AreaComun({navigation}){
<FormControl isRequired> <FormControl isRequired>
<FormControl.Label>Hora de inicio</FormControl.Label> <FormControl.Label>Hora de inicio</FormControl.Label>
<View > <View >
<DateTimePicker mode="time" is24Hour={true} value={time} onChangeStart={onChangeStart}/> <DateTimePicker mode="datetime" is24Hour value={time} onChangeStart={onChangeStart}/>
</View> </View>
</FormControl> </FormControl>
<FormControl isRequired> <FormControl isRequired>
<FormControl.Label>Hora de finalización</FormControl.Label> <FormControl.Label>Hora de finalización</FormControl.Label>
<View > <View >
<DateTimePicker mode="time" is24Hour={true} value={endTime} onChangeEnd={onChangeEnd}/> <DateTimePicker mode="datetime" is24Hour value={endTime} onChangeEnd={onChangeEnd}/>
</View> </View>
</FormControl> </FormControl>

101
mobile-ui/components/Profile.js
View File

@ -4,9 +4,11 @@ import {
Box, Button, Box, Button,
Center, FormControl, Heading, ScrollView, VStack Center, FormControl, Heading, ScrollView, VStack
} from "native-base"; } from "native-base";
import { Dimensions, StyleSheet, TextInput } from "react-native"; import { Dimensions, StyleSheet, TextInput, useWindowDimensions } from "react-native";
import { UserContext } from "../context/UserContext"; import { UserContext } from "../context/UserContext";
import {SceneMap, TabView} from 'react-native-pager-view'; import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
const { Navigator, Screen } = createMaterialTopTabNavigator();
export default function Profile({ navigation }) { export default function Profile({ navigation }) {
@ -16,20 +18,21 @@ export default function Profile({ navigation }) {
const [email, setEmail] = useState(); const [email, setEmail] = useState();
const [password, setPassword] = useState(); const [password, setPassword] = useState();
const [index, setIndex] = useState(0); const [index, setIndex] = useState(0);
const layout = useWindowDimensions();
const [routes] = useState([{ // const [routes] = useState([{
key: "first", // key: "first",
title: 'Información' // title: 'Información'
}, { // }, {
key: "second", // key: "second",
title: 'Contraseña'}]) // title: 'Contraseña'}])
const userData = useContext(UserContext) const userData = useContext(UserContext)
const id = userData.user._id; const id = userData.user._id;
console.log(userData.user); console.log(userData.user);
const ProfileView = () => { const ProfileView = () => (
<ScrollView width='100%' h='550' ml='36' _contentContainerStyle={{ <ScrollView width='100%' h='550' ml='36' _contentContainerStyle={{
px: "20px", px: "20px",
@ -79,9 +82,9 @@ export default function Profile({ navigation }) {
</ScrollView> </ScrollView>
} )
const PasswordView = () => { const PasswordView = () => (
<ScrollView width='100%' h='550' ml='36' _contentContainerStyle={{ <ScrollView width='100%' h='550' ml='36' _contentContainerStyle={{
px: "20px", px: "20px",
@ -126,41 +129,41 @@ export default function Profile({ navigation }) {
</ScrollView> </ScrollView>
} )
const initialLayout = { // const initialLayout = {
width: Dimensions.get('window').width // width: Dimensions.get('window').width
} // }
const renderScene = SceneMap({ // const renderScene = SceneMap({
first: ProfileView, // first: ProfileView,
second: PasswordView // second: PasswordView
}) // })
const renderTabBar = props => { // const renderTabBar = props => {
const inputRange = props.navigationState.routes.map((x, i) => i); // const inputRange = props.navigationState.routes.map((x, i) => i);
return <Box flexDirection="row"> // return <Box flexDirection="row">
{props.navigationState.routes.map((route, i) => { // {props.navigationState.routes.map((route, i) => {
const opacity = props.position.interpolate({ // const opacity = props.position.interpolate({
inputRange, // inputRange,
outputRange: inputRange.map(inputIndex => inputIndex === i ? 1 : 0.5) // outputRange: inputRange.map(inputIndex => inputIndex === i ? 1 : 0.5)
}); // });
const color = index === i ? useColorModeValue('#000', '#e5e5e5') : useColorModeValue('#1f2937', '#a1a1aa'); // const color = index === i ? useColorModeValue('#000', '#e5e5e5') : useColorModeValue('#1f2937', '#a1a1aa');
const borderColor = index === i ? 'cyan.500' : useColorModeValue('coolGray.200', 'gray.400'); // const borderColor = index === i ? 'cyan.500' : useColorModeValue('coolGray.200', 'gray.400');
return <Box borderBottomWidth="3" borderColor={borderColor} flex={1} alignItems="center" p="3" cursor="pointer"> // return <Box borderBottomWidth="3" borderColor={borderColor} flex={1} alignItems="center" p="3" cursor="pointer">
<Pressable onPress={() => { // <Pressable onPress={() => {
console.log(i); // console.log(i);
setIndex(i); // setIndex(i);
}}> // }}>
<Animated.Text style={{ // <Animated.Text style={{
color // color
}}>{route.title}</Animated.Text> // }}>{route.title}</Animated.Text>
</Pressable> // </Pressable>
</Box>; // </Box>;
})} // })}
</Box>; // </Box>;
}; // };
const updateInfo = async() => { const updateInfo = async() => {
@ -208,14 +211,12 @@ export default function Profile({ navigation }) {
return ( return (
<Center>
<TabView navigationState={{ <Navigator>
index, <Screen name="Perfil" component={ProfileView} />
routes <Screen name="Contraseña" component={PasswordView} />
}} renderScene={renderScene} renderTabBar={renderTabBar} onIndexChange={setIndex} initialLayout={initialLayout} style={{
marginTop: StatusBar.currentHeight </Navigator>
}} />;
</Center>
) )

8
mobile-ui/package.json
View File

@ -17,8 +17,10 @@
"eject": "expo eject" "eject": "expo eject"
}, },
"dependencies": { "dependencies": {
"@react-native-community/datetimepicker": "4.0.0",
"@react-native-community/masked-view": "^0.1.11", "@react-native-community/masked-view": "^0.1.11",
"@react-navigation/bottom-tabs": "^6.3.2", "@react-navigation/bottom-tabs": "^6.3.2",
"@react-navigation/material-top-tabs": "^6.2.3",
"@react-navigation/native": "^6.0.11", "@react-navigation/native": "^6.0.11",
"@react-navigation/native-stack": "^6.7.0", "@react-navigation/native-stack": "^6.7.0",
"@react-navigation/stack": "^6.2.2", "@react-navigation/stack": "^6.2.2",
@ -31,16 +33,16 @@
"react-dom": "17.0.1", "react-dom": "17.0.1",
"react-native": "0.64.3", "react-native": "0.64.3",
"react-native-gesture-handler": "~2.1.0", "react-native-gesture-handler": "~2.1.0",
"react-native-pager-view": "5.4.9",
"react-native-reanimated": "~2.3.1", "react-native-reanimated": "~2.3.1",
"react-native-safe-area-context": "3.3.2", "react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.10.1", "react-native-screens": "~3.10.1",
"react-native-simple-time-picker": "^1.3.11", "react-native-simple-time-picker": "^1.3.11",
"react-native-svg": "12.1.1", "react-native-svg": "12.1.1",
"react-native-tab-view": "^3.1.1",
"react-native-table-component": "^1.2.2", "react-native-table-component": "^1.2.2",
"react-native-web": "0.17.1", "react-native-web": "0.17.1",
"universal-cookie": "^4.0.4", "universal-cookie": "^4.0.4"
"@react-native-community/datetimepicker": "4.0.0",
"react-native-pager-view": "5.4.9"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.12.9" "@babel/core": "^7.12.9"