HungerWarning

Overview

Hunger Warning is an application which will provide a place to order a variety of cuisines.

Concepts Used

• Figma files and assets usage

• Relative path vs Absolute path and their usage

• Internal StyleSheets

• ScaledSheet is a react native component preset in Library, take the same stylesObject a regular StyleSheet will take, plus a special (optional) annotation that will automatically apply the scale functions used to scale the App UIs accross different devices.

• Image containers: faced a scenario in which whenever I was removing the borderWidth of the image, Image was stretchng from the left end. Resolved this by surrounding it in a View.
  

• Layout with flex-box: align-self; justifyContent; flexDirection

• Adding custom fonts: downloaded the respective font family, included in assets.
  Created react-native.config.js file to allows us to set up different configuration files for different environments.

• Margins to align elements verticaly and horizontaly.

• TouchableOpacity, TouchableHighlight and it's difference with Pressable.

• resizeMode: Prop of Image view which determines how to resize the image when the frame doesn't match the raw image dimensions.
  Values accepted:{ cover,contain, stretch,repeat,center}

• Image path using source and require, URI as well

• zIndex: specifies the stack order of elements(an element with greater stack order will keep in front of the element which have lower stack order

• Stack Navigation: To move from 1 screen to another by passing the props to the child components

• Tab Navigation nested inside Stack Navigation to provide tabs on a particular screen for further navigation.
  Transparent tab navigator contains only icons as tabs without label and color changes for the active screen

• Added forgot password link using Linking.openURL: Linking is a react native Library which lets you open the URL with any of the installed app

• Implemented the Login, Signup, Signout feature using firebase authentication

• Separate tabs for login and signup section build using useState hook which changes the button label if the state is set to login.
  A separate authentication method gets called for login and sign up whenever user click on the button.

• If a user is logged in, the Main Screen will be visible which includes a list of food items
  While, if the user is signed out then the Get Started screen will be opened. This has been achieved using the onAuthStateChanged(), it checks the userState and if the userState hasn't changed then set that user otherwise return null. If the user is returned then, redirect to Main Screen else, redirects to Get Started Screen

• Data which is visible in the food menu is getting fetched from the API using GET method.

• Networking: fetched data from the API to load it inside the app

• Search feature(user can searh for the food item): Response fetched from API got converted into json and then that data have been filtered using .filter() which only works on array and returns the result which is satisfying the function criteria.
  .map() is also used with .filter to return the values in an array format where the first parameter is the value and the second parameter returs the index where the value resides

• We need the data from API as soon as the app renders, so we kept this function inside the useEffect() hook
  Similarly, when the user needs to be checked if it's logged in or not, that function as well is inside useEffect()

• Add new line jsx - {'\n\n'}

Errors/Warnings

• Unable to Load Script. Make sure you're either running Metro('run npx react-native start') or that your bundle 'index.android.bundle' is packaged correctly for release

  Unable to Load Script. Make sure you're either running Metro('run npx react-native start') or that your bundle 'index.android.bundle' is packaged correctly for release

• SyntaxError: /home/saurav/reactNative_Projects/HungerWarning/App.js: Private names are only allowed in property accesses (obj.#FF4B3A) or in in expressions (#FF4B3A in obj).

  Installed the extension color heighlight in VSCode

• The action 'NAVIGATE' with payload {"name":"loginSignUp"} was not handled by any navigator.

  Screen name was defined different and the screen name which was getting refered had different screen name

• Got a component with the name 'loginSignUp' for the screen 'LogIn'. React Components must start with an uppercase letter. If you're passing a regular function and not a component, pass it as children to 'Screen' instead. Otherwise capitalize your component's name.

  All the screen components should start with uppercase

• source={require('./assets/images/animeLady.png')} | ^

  Folders for the files have been changed due to which the parent directory of the referred asset have also been changed.

• Error: Got an invalid value for 'component' prop for the screen 'MainScreen'. It must be a valid React Component.

  export default appname was missing

• Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
  You might have mismatching versions of React and the renderer (such as React DOM)
  You might be breaking the Rules of Hooks
  You might have more than one copy of React in the same app

  Here I declared the state variable outside the function component and was setting the value in a component and using it in different component. So, I resolved it by creating the state valriable in one function component and passed it to another component as a prop.
  

Learnings

• Button from React Native library is not much customizable so, we use either pressable or touchable
• Avoid using absolute: position - It's rigid and make it difficult to write layouts that respond well to changing content
• One needs to link the assets to the project by running the command: "$ npx react-native-asset" as it automatically install native dependencies related to assets.

• To improve code readability by giving meaningful names to styleSheets

• Stack Navigator and it dependencies Installation: don't copy dependencies from other projects and do it fresh in the current project

• KeyboardAwareScrollView: used to avoid the overlapping of the input elements due to keyboard. It let us to scroll over the whole screen and focus on the element you are working.

• Simplify the code as much as possible , it improves readability and easy to understand.
• Overriden the default style of the ScrollView by giving custom styling via contentContainerStyle which wraps all the child elements
• Change the focus to next textInput when the submit buttom is pressed for the previous textInput using useRef hook and onSubmitEditing callback with .current and .focus()
• Implemented Login and Sign Up using Firebase Authentiation. Firebase provides multiple ways to login or sign up in the app inluding email paswword, anonymously, using soial media handles.
• useState() is a react native hook which returns an array with 2 values, first the state value and the seond one is the function whih updates the state value
  useState() take an argument to initializes the state
  Hooks are the alternative to states in Class components and be used with in the function components only
  Hooks should be plcaed and called from the top level as they need to be exeuted in the same sequene every time app renders
  
• useRef: It allows you to directly creates a reference to the DOM element. It’s similar to document.getElementById and the ref created will act as the id of the element
  
• useEffect: its the hook whih lets you perform the side effects in funtion components. Using this, we tell the react that this component needs to do something after first render and every render. so, whenever there is some computational things we need in our app, we separate those in useEffet method so that it doesn't delay the app rendering.
  
• onChangeText prop of TextInput: it's a callback function which iscalled when the text's input changes. changeText is passed as a single string argument to the callback handler. To use the text input value and refer it somewhere you need to use changeText and assign it with stateVariable. Use that state variable with in the code
• value prop of the text input lets you forcibly set the initial value in the inputText

• To chek if the user is currently signed in or not in the application, firebase provides a method called onAuthStatechanged which allows you to subscribe the users current authentiation state and receive an event whatever the state changes
  Important, onAuthStatehanged is async method which runs after the connetion with the firebase established
  If the user returned within the handler is null then it means that the user is signed out currently otherwise they are signedin and a UI is returned

• EmailPassword sign-in: user can both register and sign using the following methods:

  1. createUserWithEmailAndPassword which creates the user if they are not the existing ones and
  2. if that is the existing user then .signInWithEmailPassword() method is used to sign them in.

• Post the above mentioned methods' execution,
  .then(): this is a promise whih executed only if the promise is resolved and if the promise is rejeted then .catch() will be exeuted which handles the errors and there is .finally() which always executes

  What so ever the method you use to login/sign-up, you need to enable that method in the firebase console as well.

• We can style the placeholder text as well, following props have been used in this project:
  • PlaceholderColor
  • placeholder fontfamily
    
• To make a horizontal scrollView, you need to Pass the horizontal={true} prop to the ScrollView Component.
• Always write a clean code
• Separate all the screens in different files.
• Try to abstract out views and components that can be re-used.
• When using external APIs, these APIs use some sort of keys and secrets and one should not push them to github as anyone can use them via your account.
• Any React Native application created using 'create-react-app' supports environment valriables out of the box, it reads variable that begin with REACT_APP and make them available through process env.
  To Store API keys, create a new file called .env in the root directory of React Application. Then, prefix the API key name with REACT_APP like: REACT_APP_API_KEY="key" and to access the API Key in any file in React app using process.env like: const api_key=process.env.REACT_APP_API_KEY.
  

  Make sure that you add .env file to the .gitignore file to prevent git from tracking
  .env file needs to be configured first to inject the custom environment variables into the React Native environment. To do so, there are many packages which can be used to achieve it such as react-native-config, dotenv.
  

• Ignore a file in git: just add the file name in .gitignore file
• Underlay color: The color of the underlay that will show through when the touch is active.