top bar navigation profile
This commit is contained in:
parent
5991ee9471
commit
b7f6bc70bb
|
@ -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>
|
||||||
|
|
|
@ -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>
|
|
||||||
|
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
|
@ -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"
|
||||||
|
|
Loading…
Reference in New Issue