Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
S
se390-1-fe
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
10
Issues
10
List
Boards
Labels
Service Desk
Milestones
Merge Requests
1
Merge Requests
1
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Operations
Operations
Incidents
Environments
Packages & Registries
Packages & Registries
Container Registry
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Milan John Paul Digiuseppe
se390-1-fe
Commits
be87ea86
Commit
be87ea86
authored
Aug 15, 2020
by
Milan DiGiuseppe
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Map lowered, header refactor, nav refactor
parent
c8d643fa
Changes
11
Hide whitespace changes
Inline
Side-by-side
Showing
11 changed files
with
147 additions
and
220 deletions
+147
-220
src/components/GeoMap.tsx
src/components/GeoMap.tsx
+17
-3
src/components/ScreenHeader.tsx
src/components/ScreenHeader.tsx
+0
-40
src/navigation/AppNavigator.tsx
src/navigation/AppNavigator.tsx
+12
-17
src/navigation/CreateCacheNavigator.tsx
src/navigation/CreateCacheNavigator.tsx
+7
-22
src/navigation/HeaderLeftButton.tsx
src/navigation/HeaderLeftButton.tsx
+20
-0
src/navigation/HomeNavigator.tsx
src/navigation/HomeNavigator.tsx
+36
-5
src/navigation/SavedNavigator.tsx
src/navigation/SavedNavigator.tsx
+0
-39
src/screens/DevScreen.tsx
src/screens/DevScreen.tsx
+2
-32
src/screens/DiscoverScreen.tsx
src/screens/DiscoverScreen.tsx
+42
-47
src/screens/MainDrawer.tsx
src/screens/MainDrawer.tsx
+7
-2
src/screens/SettingsScreen.tsx
src/screens/SettingsScreen.tsx
+4
-13
No files found.
src/components/GeoMap.tsx
View file @
be87ea86
...
...
@@ -4,12 +4,24 @@ import React, {
import
MapView
,
{
LatLng
}
from
'
react-native-maps
'
;
import
{
useDispatch
,
useSelector
}
from
'
react-redux
'
;
import
{
watchPositionAsync
}
from
'
expo-location
'
;
import
{
StyleSheet
}
from
'
react-native
'
;
import
{
StyleSheet
,
ViewStyle
}
from
'
react-native
'
;
import
mapStyleDay
from
'
../../map-styles/MapStyleDay.json
'
;
import
{
geoSearch
}
from
'
../store/caches/CachesActions
'
;
import
{
distanceBetweenCoordinates
}
from
'
../utils/Geography
'
;
import
{
getAuthToken
}
from
'
../store/auth/AuthSelectors
'
;
const
styles
=
StyleSheet
.
create
({
hideGoogleLogo
:
{
...
StyleSheet
.
absoluteFillObject
,
bottom
:
-
28
,
},
lowCenter
:
{
...
StyleSheet
.
absoluteFillObject
,
bottom
:
-
100
,
},
});
interface
UserLocationContext
{
userLocation
:
LatLng
;
}
...
...
@@ -79,7 +91,7 @@ export const GeoMapSearch: React.FC = ({ children }) => {
},
[
userLocation
,
lastGeosearch
,
setLastGeosearch
]);
return
(
<
GeoMap
location
=
{
userLocation
}
>
<
GeoMap
location
=
{
userLocation
}
style
=
{
styles
.
lowCenter
}
>
{
children
}
</
GeoMap
>
);
...
...
@@ -101,6 +113,7 @@ interface GeoMapProps {
location
:
LatLng
;
children
?:
any
;
rotationEnabled
?:
boolean
;
style
?:
ViewStyle
;
}
/**
...
...
@@ -112,6 +125,7 @@ const GeoMap = React.forwardRef<MapView, GeoMapProps>(({
children
,
location
,
rotationEnabled
=
true
,
style
,
},
ref
?)
=>
{
const
mapRef
=
useRef
<
MapView
>
(
null
);
...
...
@@ -125,7 +139,7 @@ const GeoMap = React.forwardRef<MapView, GeoMapProps>(({
<
MapView
ref
=
{
ref
??
mapRef
}
provider
=
{
'
google
'
}
style
=
{
StyleSheet
.
absoluteFillObject
}
style
=
{
style
??
styles
.
hideGoogleLogo
}
customMapStyle
=
{
mapStyleDay
}
showsBuildings
=
{
false
}
showsIndoors
=
{
false
}
...
...
src/components/ScreenHeader.tsx
deleted
100644 → 0
View file @
c8d643fa
import
React
,
{
useCallback
}
from
'
react
'
;
import
{
Header
}
from
'
react-native-elements
'
;
import
{
useNavigation
}
from
'
@react-navigation/native
'
;
import
theme
from
'
../theme
'
;
import
IconButton
from
'
./IconButton
'
;
const
{
colors
,
spacing
}
=
theme
;
const
RightComponent
=
()
=>
{
const
{
navigate
}
=
useNavigation
();
const
onSettingsPress
=
useCallback
(()
=>
navigate
(
'
Settings
'
),
[
navigate
]);
return
(
<
IconButton
icon
=
{
'
cog
'
}
size
=
{
20
}
color
=
{
'
white
'
}
onPress
=
{
onSettingsPress
}
/>
);
};
interface
Props
{
title
:
string
;
}
const
ScreenHeader
:
React
.
FC
<
Props
>
=
({
title
})
=>
(
<
Header
leftContainerStyle
=
{
{
display
:
'
none
'
}
}
centerComponent
=
{
{
text
:
title
,
style
:
{
fontSize
:
32
,
color
:
colors
.
white
,
width
:
'
100%
'
,
},
}
}
rightComponent
=
{
<
RightComponent
/>
}
containerStyle
=
{
{
paddingHorizontal
:
spacing
.
screenPadding
,
backgroundColor
:
colors
.
green
,
}
}
/>
);
export
default
ScreenHeader
;
src/navigation/AppNavigator.tsx
View file @
be87ea86
import
React
from
'
react
'
;
import
{
createStackNavigator
}
from
'
@react-navigation/stack
'
;
import
CreateCacheNavigator
,
{
BackButton
}
from
'
./CreateCacheNavigator
'
;
import
CreateCacheNavigator
from
'
./CreateCacheNavigator
'
;
import
CameraModal
from
'
../screens/create/CameraModal
'
;
import
DevScreen
from
'
../screens/DevScreen
'
;
import
TagScreen
from
'
../screens/TagScreen
'
;
import
HomeNavigator
from
'
./HomeNavigator
'
;
import
HeaderLeftButton
from
'
./HeaderLeftButton
'
;
import
theme
from
'
../theme
'
;
const
Stack
=
createStackNavigator
();
const
AppNavigator
=
()
=>
(
<
Stack
.
Navigator
mode
=
{
'
modal
'
}
screenOptions
=
{
({
route
,
navigation
})
=>
({
headerShown
:
[
'
Settings
'
,
'
TagScreen
'
].
includes
(
route
.
name
),
headerLeft
:
()
=>
(
<
BackButton
isX
onPress
=
{
()
=>
navigation
.
goBack
()
}
/>
),
headerTitleStyle
:
{
fontSize
:
24
},
})
}
screenOptions
=
{
{
headerShown
:
false
}
}
>
<
Stack
.
Screen
name
=
{
'
Home
'
}
...
...
@@ -36,11 +28,14 @@ const AppNavigator = () => (
<
Stack
.
Screen
name
=
{
'
TagScreen
'
}
component
=
{
TagScreen
}
options
=
{
{
title
:
'
Tag
'
}
}
/>
<
Stack
.
Screen
name
=
{
'
DevScreen
'
}
component
=
{
DevScreen
}
options
=
{
({
navigation
})
=>
({
headerShown
:
true
,
headerLeft
:
()
=>
<
HeaderLeftButton
type
=
'close'
onPress
=
{
()
=>
navigation
.
goBack
()
}
/>,
headerStyle
:
{
backgroundColor
:
theme
.
colors
.
green
,
},
headerTitleStyle
:
{
fontSize
:
24
,
color
:
theme
.
colors
.
white
},
})
}
/>
</
Stack
.
Navigator
>
);
...
...
src/navigation/CreateCacheNavigator.tsx
View file @
be87ea86
import
React
from
'
react
'
;
import
{
createStackNavigator
}
from
'
@react-navigation/stack
'
;
import
{
Icon
}
from
'
react-native-elements
'
;
import
{
TouchableOpacity
}
from
'
react-native-gesture-handler
'
;
import
CacheMessageScreen
from
'
../screens/create/CacheMessageScreen
'
;
import
CacheDurationScreen
from
'
../screens/create/CacheDurationScreen
'
;
import
CacheSubmitScreen
from
'
../screens/create/CacheSubmitScreen
'
;
...
...
@@ -9,36 +7,23 @@ import theme from '../theme';
import
CacheTypeScreen
from
'
../screens/create/CacheTypeScreen
'
;
import
GamesScreen
from
'
../screens/create/GamesScreen
'
;
import
OutdoorsScreen
from
'
../screens/create/OutdoorsScreen
'
;
interface
BackButtonProps
{
isX
:
boolean
;
onPress
:
()
=>
void
;
}
export
const
BackButton
:
React
.
FC
<
BackButtonProps
>
=
({
isX
,
onPress
})
=>
(
<
TouchableOpacity
onPress
=
{
onPress
}
style
=
{
{
marginLeft
:
theme
.
spacing
.
screenPadding
}
}
>
<
Icon
name
=
{
isX
?
'
times
'
:
'
chevron-left
'
}
type
=
{
'
font-awesome-5
'
}
/>
</
TouchableOpacity
>
);
import
HeaderLeftButton
from
'
./HeaderLeftButton
'
;
const
Stack
=
createStackNavigator
();
const
CreateCacheNavigator
=
()
=>
(
<
Stack
.
Navigator
screenOptions
=
{
({
navigation
,
route
})
=>
({
headerStyle
:
{
backgroundColor
:
theme
.
colors
.
green
,
},
headerTitleStyle
:
{
fontSize
:
24
,
color
:
theme
.
colors
.
white
},
headerLeft
:
()
=>
(
<
Back
Button
isX
=
{
route
.
name
===
'
CacheType
'
}
<
HeaderLeft
Button
type
=
{
route
.
name
===
'
CacheType
'
?
'
close
'
:
'
back
'
}
onPress
=
{
()
=>
navigation
.
goBack
()
}
/>
),
headerTitleStyle
:
{
fontSize
:
24
},
})
}
>
...
...
src/navigation/HeaderLeftButton.tsx
0 → 100644
View file @
be87ea86
import
React
from
'
react
'
;
import
{
Icon
}
from
'
react-native-elements
'
;
import
theme
from
'
../theme
'
;
interface
Props
{
type
?:
'
back
'
|
'
close
'
;
onPress
:
()
=>
void
;
}
const
HeaderLeftButton
:
React
.
FC
<
Props
>
=
({
type
=
'
back
'
,
onPress
})
=>
(
<
Icon
name
=
{
type
===
'
back
'
?
'
chevron-left
'
:
'
times
'
}
type
=
{
'
font-awesome-5
'
}
color
=
{
theme
.
colors
.
white
}
onPress
=
{
onPress
}
style
=
{
{
paddingHorizontal
:
theme
.
spacing
.
screenPadding
}
}
/>
);
export
default
HeaderLeftButton
;
src/navigation/HomeNavigator.tsx
View file @
be87ea86
import
React
from
'
react
'
;
import
{
createStackNavigator
}
from
'
@react-navigation/stack
'
;
import
DiscoverScreen
from
'
../screens/DiscoverScreen
'
;
import
SavedNavigator
from
'
./SavedNavigator
'
;
import
SettingsScreen
from
'
../screens/SettingsScreen
'
;
import
HeaderLeftButton
from
'
./HeaderLeftButton
'
;
import
theme
from
'
../theme
'
;
import
SavedListScreen
from
'
../screens/SavedListScreen
'
;
import
CacheDetailScreen
,
{
NavParams
}
from
'
../screens/CacheDetailScreen
'
;
import
RevisitCacheScreen
from
'
../screens/RevisitCacheScreen
'
;
import
DevScreen
from
'
../screens/DevScreen
'
;
const
Stack
=
createStackNavigator
();
const
HomeNavigator
=
()
=>
(
<
Stack
.
Navigator
screenOptions
=
{
{
headerShown
:
false
}
}
>
<
Stack
.
Navigator
screenOptions
=
{
({
navigation
})
=>
({
headerLeft
:
()
=>
<
HeaderLeftButton
onPress
=
{
()
=>
navigation
.
goBack
()
}
/>,
headerStyle
:
{
backgroundColor
:
theme
.
colors
.
green
,
},
headerTitleStyle
:
{
fontSize
:
24
,
color
:
theme
.
colors
.
white
},
})
}
>
<
Stack
.
Screen
name
=
{
'
Discover
'
}
component
=
{
DiscoverScreen
}
options
=
{
{
headerShown
:
false
}
}
/>
<
Stack
.
Screen
name
=
{
'
Saved
'
}
component
=
{
SavedNavigator
}
options
=
{
{
title
:
'
Settings
'
}
}
name
=
{
'
SavedList
'
}
component
=
{
SavedListScreen
}
options
=
{
{
title
:
'
Saved
'
}
}
/>
<
Stack
.
Screen
name
=
{
'
CacheDetail
'
}
component
=
{
CacheDetailScreen
}
options
=
{
({
route
})
=>
({
title
:
(
route
.
params
as
NavParams
).
title
})
}
/>
<
Stack
.
Screen
name
=
{
'
RevisitCache
'
}
component
=
{
RevisitCacheScreen
}
options
=
{
({
route
})
=>
({
title
:
(
route
.
params
as
NavParams
).
title
})
}
/>
<
Stack
.
Screen
name
=
{
'
Settings
'
}
component
=
{
SettingsScreen
}
options
=
{
{
title
:
'
Settings
'
}
}
/>
<
Stack
.
Screen
name
=
{
'
Dev
'
}
component
=
{
DevScreen
}
/>
</
Stack
.
Navigator
>
);
...
...
src/navigation/SavedNavigator.tsx
deleted
100644 → 0
View file @
c8d643fa
import
React
from
'
react
'
;
import
{
createStackNavigator
}
from
'
@react-navigation/stack
'
;
import
SavedListScreen
from
'
../screens/SavedListScreen
'
;
import
{
BackButton
}
from
'
./CreateCacheNavigator
'
;
import
CacheDetailScreen
,
{
NavParams
}
from
'
../screens/CacheDetailScreen
'
;
import
RevisitCacheScreen
from
'
../screens/RevisitCacheScreen
'
;
const
Stack
=
createStackNavigator
();
const
SavedNavigator
=
()
=>
(
<
Stack
.
Navigator
screenOptions
=
{
({
navigation
})
=>
({
headerLeft
:
()
=>
(
<
BackButton
isX
=
{
false
}
onPress
=
{
()
=>
navigation
.
goBack
()
}
/>
),
headerTitleStyle
:
{
fontSize
:
24
},
})
}
>
<
Stack
.
Screen
name
=
{
'
SavedList
'
}
component
=
{
SavedListScreen
}
options
=
{
{
title
:
'
Saved Caches
'
}
}
/>
<
Stack
.
Screen
name
=
{
'
CacheDetail
'
}
component
=
{
CacheDetailScreen
}
options
=
{
({
route
})
=>
({
title
:
(
route
.
params
as
NavParams
).
title
})
}
/>
<
Stack
.
Screen
name
=
{
'
RevisitCache
'
}
component
=
{
RevisitCacheScreen
}
options
=
{
({
route
})
=>
({
title
:
(
route
.
params
as
NavParams
).
title
})
}
/>
</
Stack
.
Navigator
>
);
export
default
SavedNavigator
;
src/screens/DevScreen.tsx
View file @
be87ea86
import
React
,
{
useCallback
}
from
'
react
'
;
import
{
StyleSheet
,
View
}
from
'
react-native
'
;
import
{
useDispatch
,
useSelector
}
from
'
react-redux
'
;
import
{
getAuthToken
}
from
'
../store/auth/AuthSelectors
'
import
{
reverseGeocodeAsync
}
from
'
expo-location
'
;
import
{
useNavigation
}
from
'
@react-navigation/native
'
;
import
{
getAuthToken
}
from
'
../store/auth/AuthSelectors
'
;
import
{
geoSearch
}
from
'
../store/caches/CachesActions
'
;
import
{
signOutAsync
}
from
'
../store/auth/AuthActions
'
;
import
GeoButton
from
'
../components/GeoButton
'
;
import
theme
from
'
../theme
'
;
import
{
setUserLatLng
,
getCurrentPosition
}
from
'
../store/location/LocationActions
'
;
import
{
getCurrentPosition
}
from
'
../store/location/LocationActions
'
;
const
styles
=
StyleSheet
.
create
({
fullscreen
:
{
...
...
@@ -26,22 +25,12 @@ const DevScreen: React.FC = () => {
const
dispatch
=
useDispatch
();
const
idToken
=
useSelector
(
getAuthToken
);
const
onClose
=
useCallback
(()
=>
navigation
.
goBack
(),
[
navigation
]);
const
onGeosearch
=
useCallback
(
async
()
=>
{
const
userLocation
=
await
getCurrentPosition
();
dispatch
(
geoSearch
(
userLocation
,
'
1
'
,
idToken
));
navigation
.
navigate
(
'
Discover
'
);
},
[
dispatch
,
navigation
]);
const
onTokyo
=
useCallback
(()
=>
{
dispatch
(
setUserLatLng
({
latitude
:
35.6679191
,
longitude
:
139.4606805
,
}));
navigation
.
navigate
(
'
Discover
'
);
},
[
dispatch
,
navigation
]);
const
onReverseGeocode
=
useCallback
(
async
()
=>
{
const
userLocation
=
await
getCurrentPosition
();
const
results
=
await
reverseGeocodeAsync
(
userLocation
);
...
...
@@ -55,10 +44,6 @@ const DevScreen: React.FC = () => {
alert
(
`
${
name
}
${
street
}
${
city
}
${
region
}
${
country
}
`
);
// eslint-disable-line no-alert
},
[]);
const
onSignout
=
useCallback
(()
=>
{
dispatch
(
signOutAsync
());
},
[
dispatch
,
onClose
]);
return
(
<
View
style
=
{
styles
.
fullscreen
}
>
<
GeoButton
...
...
@@ -66,26 +51,11 @@ const DevScreen: React.FC = () => {
onPress
=
{
onGeosearch
}
style
=
{
styles
.
button
}
/>
<
GeoButton
title
=
{
'
Tokyo
'
}
onPress
=
{
onTokyo
}
style
=
{
styles
.
button
}
/>
<
GeoButton
title
=
{
'
Reverse Geocode
'
}
onPress
=
{
onReverseGeocode
}
style
=
{
styles
.
button
}
/>
<
GeoButton
title
=
{
'
Sign Out
'
}
onPress
=
{
onSignout
}
style
=
{
styles
.
button
}
/>
<
GeoButton
title
=
{
'
Close
'
}
onPress
=
{
onClose
}
style
=
{
styles
.
button
}
/>
</
View
>
);
};
...
...
src/screens/DiscoverScreen.tsx
View file @
be87ea86
...
...
@@ -22,6 +22,15 @@ const styles = StyleSheet.create({
width
:
'
100%
'
,
height
:
'
100%
'
,
},
buttonContainer
:
{
width
:
'
100%
'
,
paddingHorizontal
:
theme
.
spacing
.
screenPadding
,
flexDirection
:
'
row
'
,
justifyContent
:
'
space-between
'
,
alignItems
:
'
center
'
,
position
:
'
absolute
'
,
bottom
:
theme
.
spacing
.
large
,
},
iconButton
:
{
shadowColor
:
theme
.
colors
.
black
,
shadowOffset
:
{
...
...
@@ -32,21 +41,6 @@ const styles = StyleSheet.create({
shadowRadius
:
3.84
,
elevation
:
5
,
},
avatarButton
:
{
position
:
'
absolute
'
,
left
:
theme
.
spacing
.
large
,
top
:
theme
.
spacing
.
xlarge
,
},
createButton
:
{
position
:
'
absolute
'
,
alignSelf
:
'
center
'
,
bottom
:
theme
.
spacing
.
large
,
},
savedButton
:
{
position
:
'
absolute
'
,
right
:
theme
.
spacing
.
large
,
bottom
:
theme
.
spacing
.
large
,
},
});
// utils to generate caches for quick testing
...
...
@@ -72,7 +66,7 @@ const DiscoverScreen: React.FC = () => {
const
onCreatePress
=
useCallback
(()
=>
navigate
(
'
Create
'
),
[
navigate
]);
const
onSavedPress
=
useCallback
(()
=>
navigate
(
'
Saved
'
),
[
navigate
]);
const
onSavedPress
=
useCallback
(()
=>
navigate
(
'
Saved
List
'
),
[
navigate
]);
const
onSave
=
useCallback
((
cache
:
Cache
)
=>
{
dispatch
(
saveCache
({
...
cache
,
found
:
new
Date
().
valueOf
()
}));
...
...
@@ -85,7 +79,6 @@ const DiscoverScreen: React.FC = () => {
navigate
(
'
CacheDetail
'
,
{
id
:
cache
.
id
,
title
:
'
Cache
'
}
as
NavParams
);
},
[
navigate
]);
// const [drawerOpen, setDrawerOpen] = useState<boolean>(false);
const
drawerRef
=
useRef
(
null
);
const
onDrawerOpen
=
useCallback
(()
=>
drawerRef
.
current
!
.
open
(),
[
drawerRef
]);
const
onDrawerClose
=
useCallback
(()
=>
drawerRef
.
current
!
.
close
(),
[
drawerRef
]);
...
...
@@ -116,36 +109,38 @@ const DiscoverScreen: React.FC = () => {
<
UserLocationMarker
/>
</
GeoMapSearch
>
</
UserLocationProvider
>
<
View
style
=
{
[
styles
.
avatarButton
,
styles
.
iconButton
]
}
>
<
Avatar
rounded
size
=
{
'
medium
'
}
source
=
{
{
uri
:
userImageUrl
}
}
onPress
=
{
onDrawerOpen
}
/>
</
View
>
<
View
style
=
{
[
styles
.
createButton
,
styles
.
iconButton
]
}
>
<
Icon
name
=
{
'
feather-alt
'
}
type
=
{
'
font-awesome-5
'
}
reverse
raised
onPress
=
{
onCreatePress
}
color
=
{
theme
.
colors
.
green
}
size
=
{
30
}
containerStyle
=
{
{
margin
:
0
}
}
/>
</
View
>
<
View
style
=
{
[
styles
.
savedButton
,
styles
.
iconButton
]
}
>
<
Icon
name
=
{
'
book
'
}
type
=
{
'
font-awesome-5
'
}
raised
onPress
=
{
onSavedPress
}
color
=
{
theme
.
colors
.
green
}
size
=
{
30
}
containerStyle
=
{
{
margin
:
0
}
}
/>
<
View
style
=
{
styles
.
buttonContainer
}
>
<
View
style
=
{
styles
.
iconButton
}
>
<
Avatar
rounded
size
=
{
64
}
source
=
{
{
uri
:
userImageUrl
}
}
onPress
=
{
onDrawerOpen
}
/>
</
View
>
<
View
style
=
{
styles
.
iconButton
}
>
<
Icon
name
=
{
'
feather-alt
'
}
type
=
{
'
font-awesome-5
'
}
reverse
raised
onPress
=
{
onCreatePress
}
color
=
{
theme
.
colors
.
green
}
size
=
{
36
}
containerStyle
=
{
{
margin
:
0
}
}
/>
</
View
>
<
View
style
=
{
styles
.
iconButton
}
>
<
Icon
name
=
{
'
book
'
}
type
=
{
'
font-awesome-5
'
}
raised
onPress
=
{
onSavedPress
}
color
=
{
theme
.
colors
.
green
}
size
=
{
30
}
containerStyle
=
{
{
margin
:
0
}
}
/>
</
View
>
</
View
>
</
View
>
</
Drawer
>
...
...
src/screens/MainDrawer.tsx
View file @
be87ea86
...
...
@@ -46,6 +46,11 @@ const MainDrawer: React.FC<Props> = ({ onClose }) => {
navigate
(
'
Settings
'
);
},
[
onClose
,
navigate
]);
const
onDevPress
=
useCallback
(()
=>
{
onClose
();
navigate
(
'
Dev
'
);
},
[
onClose
,
navigate
]);
const
onSignout
=
useCallback
(()
=>
{
dispatch
(
signOutAsync
());
},
[
dispatch
,
onClose
]);
...
...
@@ -64,9 +69,9 @@ const MainDrawer: React.FC<Props> = ({ onClose }) => {
{
icon
:
'
wrench
'
,
title
:
'
Developer
'
,
onPress
:
on
Settings
Press
,
onPress
:
on
Dev
Press
,
},
]),
[
onSettingsPress
]);
]),
[
onSettingsPress
,
onDevPress
]);
return
(
<
View
style
=
{
styles
.
drawer
}
>
...
...
src/screens/SettingsScreen.tsx
View file @
be87ea86
import
React
,
{
useCallback
}
from
'
react
'
;
import
React
from
'
react
'
;
import
{
useSelector
}
from
'
react-redux
'
;
import
{
View
,
StyleSheet
}
from
'
react-native
'
;
import
{
Avatar
}
from
'
react-native-elements
'
;
import
{
useNavigation
}
from
'
@react-navigation/native
'
;
import
GeoText
from
'
../components/GeoText
'
;
import
theme
from
'
../theme
'
;
import
GeoButton
from
'
../components/GeoButton
'
;
import
{
getUserName
,
...
...
@@ -20,11 +19,8 @@ const styles = StyleSheet.create({
});
const
SettingsScreen
=
()
=>
{
const
{
navigate
}
=
useNavigation
();
const
onDevPress
=
useCallback
(()
=>
navigate
(
'
DevScreen
'
),
[
navigate
]);
const
userName
:
string
=
useSelector
(
getUserName
);
const
userImageUrl
:
string
=
useSelector
(
getUserImageUrl
);
const
userName
=
useSelector
(
getUserName
);
const
userImageUrl
=
useSelector
(
getUserImageUrl
);
return
(
<
View
style
=
{
{
flex
:
1
,
justifyContent
:
'
space-between
'
}
}
>
...
...
@@ -36,16 +32,11 @@ const SettingsScreen = () => {
size
=
{
'
xlarge
'
}
/>
<
GeoText
text
=
{
userName
}
text
=
{
userName
!
}
variant
=
{
'
formHeader
'
}
style
=
{
{
marginTop
:
theme
.
spacing
.
small
}
}
/>
</
View
>
<
GeoButton
title
=
{
'
Dev Screen
'
}
onPress
=
{
onDevPress
}
style
=
{
{
marginBottom
:
theme
.
spacing
.
medium
}
}
/>
</
View
>
);
};
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment