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.Label>Hora de inicio</FormControl.Label>
<View >
<DateTimePicker mode="time" is24Hour={true} value={time} onChangeStart={onChangeStart}/>
<DateTimePicker mode="datetime" is24Hour value={time} onChangeStart={onChangeStart}/>
</View>
</FormControl>
<FormControl isRequired>
<FormControl.Label>Hora de finalización</FormControl.Label>
<View >
<DateTimePicker mode="time" is24Hour={true} value={endTime} onChangeEnd={onChangeEnd}/>
<DateTimePicker mode="datetime" is24Hour value={endTime} onChangeEnd={onChangeEnd}/>
</View>
</FormControl>

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

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

8
mobile-ui/package.json
View File

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