App Dev onboarding - mostpros1/repository GitHub Wiki
- https://github.com/mostpros1/repository/wiki/Prerequisites
- https://github.com/mostpros1/repository/wiki/App-resources
- https://github.com/mostpros1/repository/wiki/Using-icons-with-React-Native
Here is an example of how the project might look(this might be outdated by the time you read this):
/tsconfig.json: This file just extends the standard expo typescript config and adds allowJs:True to the compiler options do not change this file unless you know what you are doing.
/react-native.config.tsx: This file is used to handle fonts.
/package.json: This file handles dependencies, project version, project entree(the first file you will see when running the project), project name and some additional scripts used to preview the project before building.
/package-lock.json Never change the content of this file manually, it's content is made when you use npm install in the root directory of the project and is decided by what is in your package.json.
/babel.config.js: This is the config for babel do not change this file unless you know what you are doing.
/app.json: This is used to keep environment variables, the Expo name, the slug and some build properties.
/.gitignore: This file is used to tell what files should not be committed to the repository.
/.easignore: This file is used to tell what files should be ignore when building.
/node_modules: Never change anything in here this is all automatically generated and updated when using the npm install command in the root directory.
/assets: This folder is used for keeping images, fonts, icons and any other non code files you might want in the project.
/app: This folder holds all pages, components, some configuration and almost all code we actually make ourselves more explanation in the next section.
/amplify: Never change anything in here this is all automatically generated and updated when using the amplify pull command.
/.vscode: Not important, its automatically generated by vscode if you use that.
/.expo: This folder is used to hold settings.json and devices.json if we ever need to use those.
/app needs a more in depth explanation so here it is.
/app/Components: This is where you will find every single react component if you want to add something new, make a folder here with the name of the thing you are making and work in there.
/app/hooks: Here we place hooks.
/app/Misschien_Later_Nog: Here you will find anything that we are not using right now but we might wanna use it later.
/app/amplifyconfiguration.json: Do not change this file this is automatically generated by amplify pull.
/app/App.tsx: In here we create our navigation system you will learn more about this later on this page.
/app/aws-exports.js: Do not change this file this is automatically generated by amplify pull.
/app/index.tsx: This is the entree of the project specified in /package.json all we do here is setup App.tsx as our root component which is something we needed to do to make a normal react navigation system work in react-native.
/app/LandigPage.tsx: The page selected as initial route in /app/App.tsx its the first thing you see when you open the app.
/app/types.d.ts: This is a list of all pages in the app with either undefined meaning you are passing no state or you divine a state with a type between swirly brackets like this: {email: string}.
View: A fundamental building block in React Native, similar to <div> in web development. It's used for grouping and styling other components.
SafeAreaView: Ensures that content is displayed within safe boundaries, accounting for notches and device-specific features. Useful to prevent content from being obscured.
ImageBackground: Allows you to set an image as the background for its child components. Useful for creating visually appealing layouts.
PaperProvider: A component from the Material Design library, providing theming capabilities for Material Design components like Card and Button.
Text: Represents text content in React Native. It can be styled and formatted similar to HTML text elements.
Image: Renders images in the app. Supports various image formats and sources, including local and network images.
Icon: Typically used to display icons in the app, enhancing the visual appeal. Can be customized and sourced from various icon libraries.
ScrollView: Enables scrolling for content that overflows the screen. Useful for displaying long lists or content that doesn't fit in the viewport.
Pressable: A touchable wrapper around components, providing touch feedback and handling onPress events. Can be used to create interactive elements.
TextInput: A component for users to input text. It's similar to the HTML input element and is essential for forms and user input.
NavigationContainer: The root component for navigation in a React Native app. It manages the navigation state and provides navigation context to its descendants.
Stack.Navigator: Part of the React Navigation library, it defines a stack-based navigation system. Screens are added to the stack, and users can navigate back and forth.
Stack.Screen: Represents a screen within a Stack.Navigator. Each screen is a unique component in the navigation stack and can be configured with various options.
- Create a .tsx file with a function and a default export in it somewhere in the /app directory like so:
- Navigate to /app/types.d.ts and add your route to the RootStackParamList with an undefined type like so(this type should only be changed if you want to pass a state to another file):
- Navigate to /app/App.tsx and import the component you made in step 1 using the following format
import [Name can be whatever you want] from "/file/path/to/componentat the top of the page like so:
- Add a <Stack.Screen/> element inside of the <Stack.Navigator> </Stack.Navigator> with a name parameter(This will be the name you made in /app/types.d.ts) and a component parameter(this will be the name u created for your import in step 3) like so:
congratulations you have added a route to the app!!
There are two ways to do this, here's how:
Option one: using a element with a function inside of it.
-
Add {navigation} in the function that's the highest in the hierarchy of the current file like "1" in the picture above
-
Make a element with onPress={() => navigation.navigate('Name of the route you want to navigate to')} inside of it like "2" in the picture above
Option two: Navigating from a function.
- Follow step one of option one
- Put navigation.navigate('Name of the route you want to navigate to')} in your function