Section 12 using native device features camera location and more #30
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…re Components, Styling & Colors - More Information)
…Of Course Goals (in our Demo App)
…d Ripple Effect & iOS alternative)
- Added basic screens (StartGameScreen, GameScreen and GameOverScreen) - Started implementing StartGameScreen - Added a PrimaryButton component
- installed package expo-linear-gradient
…tions with the SafeAreaView) - added switching screens programmatically (StartGameScreen / GameScreen) - Started implementing (layout) GameScreen - added SafeAreaView
- Added a Title component - Moved Colors to a separate file so they can be used globally
…- to the App) - Moved components PrimaryButton & Title to the components/ui folder - Added the NumberContainer component - Added the + & - buttons to the GameScreen - Added logic to generate a random number between 2 values + handle next guesses
… React Native Apps) - Installed expo-fonts & expo-app-loading package - Added and defined the custom fonts - Replaced + & - text with icons for the buttons in GameScreen
- Added the layout & styling for the GameOverScreen including a foreground image
…isplaying a summary screen)
- Logged game rounds - Outputted log data with FlatList - Created a GuessLogItem and added styling
…fferent orientation) - Changed orientation to "default" - Used the dimensions API for static dimensions - Used the useWindowDimensions hook for dynamic dimensions (eg screen rotation)
…oardAvoidingView)
- Conditionally change the layout of the GameScreen depenÏding on the available width
…owDimensions) - used useWindowDimensions on the GameOverScreen to change image styling and made the whole view scrollable
- Added different ways of writing/using platform specific code (files with <fileName>.ios.js/.android.js or the Platform API
- Added models and dummy data - Added CategoriesScreen & output meal categories - Added component CategoryGridTile and setup layout and styling - Set background color in App.json - Set status bar style to light in App.js and show CategoriesScreen
- @react-native/native - react-native-screens - react-native-safe-area-context
…ation & configuring Navigation) - Installed navigation packages (npm install @react-navigation/native & expo install react-native-screens react-native-safe-area-context & npm install @react-navigation/native-stack @react-navigation/botttom-tabs - Setup navigation with Stack & BottomTab
- Hide header for the ExpensesOverview component so we don't have 2 headers (Stack & BottomTab) - Setup global styles (colors) - Created components ExpensesSummary, ExpensesOutput & ExpensesList - Added dummy data to display our components in the AllExpenses & RecentExpensesScreen
- Updated the styling of the ExpensesOutput & ExpensesSummary component - Created a ExpenseItem component and added the styling and layout - Added a helper method to format dates
…s & using route parameters) - Added an IconButton component - Added navigation to the ManageExpense screen when editing or adding an expense use the useNavigation hook - Show the ManageExpense screen as a Modal - Dynamically show the correct navigation header title for the ManageExpenseScreen depending if the client is adding or editing an expense
- Added a custom Button component - Changed the status bar to "light" in the App.js file - Created and use the ExpensesContext (with dummy data) in the AllExpenses, RecentExpenses and ManageExpenses screen - Added a date utility method to get the date minus x days for the RecentExpenses screen - Updated the ExpensesOutput to show the correct content depending whether or not there are expenses and moved the dummy data to the ExpensesContext - Added the layout, styling and functionality (deleting, editing/adding an expense and closing the modal) to the ManageExpenses screen
- Created ExpenseForm & Input components - Handle values being entered in a generic way for the ExpenseForm component - Formattted ManageExpense screen
- Show default values when user wants to edit an expense - Moved the cancel & confirm (Update/Add) buttons to the ExpenseForm component - Updated the Input component to show if it's invallid - Updated utility method getFormattedDate to use the toISOString method - Updated the ExpenseFormComponent to also show errors when the input is invalid & implemented the submitHandler
- Added methods using axios to get, post, put & delete expenses to our Firebase BE - Removed the DUMMY_DATA, added the setExpenses method to the ExpensesContext & reducer - Added a LoadingOverlay component - Connected the methods to get, post, put & delete expense(s) in the Recent/ManageExpenses screens and show the LoadingOverlay when doing calls
- Added an ErrorOverlay component - Show the ErrorOverlay component on the Manage/Recent expenses screens when the calls failed
- Corrected an error in the Input component ( autoCapitalize={false} )
- Added functionality to programmaticaly switch (navigate) between the signUp & login screen in the AuthContent component
- Added method to create (register) and login a user using axios
- Added functionality to register/login a user in their respective screens and handle if there is an error
- Created the AuthContext and wrapped the AuthContextProvider around the Navigation component in App.js
- Added a logout button (headerRight) to the AuthenticatedStack component using the AuthContext
- Installed and used package @react-native-async-storage/async-storage to save, get and remove a token from the device so we can automatically login the user instead of only keeping the token in memory, this way when the user closes the app he doesn't need to login everytime - Updated the Welcome screen to fetch a message (from the db) when the user has logged in and sees the welcome screen - Updated App.js with a Root component so we can fetch the stored token from the device and set it in our authContext, we also extend the Splashscreen (<AppLoading />) using the expo-app-loading package so we don't have flickering
- Set up some views (PlaceItem, PlacesList) and added some empty screens which we will use (AddPlace, AllPlaces, PlaceDetails & Map) - Set up a blue print for the place (class)
…vigation) - installed the navigation packages @react-navigation/native & @react-navigation/native-stack (with npm install) and installed react-native-screens & react-native-safe-area-context (with expo install) - Added (an empty) PlaceFrom component - Added a AddPlace screen - Updated the App.js with the navigation code setup using a Stack ( createNativeStackNavigation() ) and added 2 screens (AllPlaces & AddPlace)
- Created a IconButton component - Added a headerRight IconButton to the AllPlaces screen - Added a global colors file and use it for styling (App.js & PlacesList)
…ackage for native camera access) - Added layout and styling to the PlaceForm component - installed the expo-image-picker package and configured it in app.json (plugins, the package and saying which permission we need, will be displayed on the native side)
… permissions - Created the ImagePicker component & ask for camera permissions and the current PermissionStatus. If we don't have permission we don't launchCameraAsync
- Created a OutlineButton component - Show image preview if a photo has been taken & use our OutlineButton component instead of the default button
… picker) - Added a LocationPicker component (layout & styling) - Added the LocationPicker component to the PlaceForm component
… markers) - Added functionality to get the current user location (if permissions granted) & navigate to the Map screen if the user taps the "Pick on Map" button - Added a getMapPreview utility method to show a map preview with the users location when the user tapped the "Locate user" button (won't show a preview since we don't have an API key) - Installed the react-native-maps package to view the native (iOS & Android) maps - Added the Map screen to the Stack (App.js) - Started implementing the Map screen by showing a MapView and a Marker if the user tapped on the map
- Added a headerRight button (from the Map screen) to save the picked location and navigate to the AddPlace screen - Set the location (preview) in the LocationPicker component that we get from the Map screen as params using the hooks useRoute & useIsFocused
…n the form) - Added a custom Button component - Added handler methods (onTakeImage & onPickLocation) to the PlaceForm and pass them to their respective components (Image & LocationPicker)
- Implemented the savePlaceHandler in PlafeForm.js - Added the getAddress utility method to convert coordinates to an addresss (reverse geocoding) - handleLocation (with useEffect hook) in the LocationPicker component - Updated the Place model - Implemented the AddPlace screen and navigate to the AllPlaces screen with the new place - Implemented the AllPlaces screen and check if there are places when the screen becomes visible or isFocused changed - Added Styling to the PlaceItem
- Installed the SQLite package - Added and implemented the database file using SQLite with methods to init a database, save a place, fetchPlaces and fetchPlaceDetails - Initialized the Database using the useEffect hook in App.js & added the PlaceDetails screen - Implemented the PlaceDetails screen and use the database to fetch the place details - Updated the Map screen to handle receiving a location via the route params - Updated the AllPlaces screens to fetch the places from the DB - Updated the AddPlace screen to save a place to the DB - Updated the PlacesList component to navigate to the PlaceDetails onSelect - Updated the PlaceItem to add the place id onSelect using the bind method - Connected the onPress property with the takeImageHandler for the OutlineButton in ImagePicker - Updated the Place model with an id we get instead of creating our own id in the constructor
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.