Full Stack React Native with NodeJS & ExpressJS

In this section we will see what we will learn.

. In this lesson, we will examine the component created in the App.js file. Thus, we will examine the basic structure of a React Native component in detail.

In this tutorial we will continue working in the App component, which is the main component of the application.

In this lesson we will look at style operations in more depth.

In this lesson we will create a new layout in the application.

In this course we will learn how to use the flexbox structure with React Native.

In this course, we will examine the use of flexbox with React Native in more depth.

In this lesson we will try to create a page layout using flexbox and other style features.

In this tutorial we will start to examine React Native events.

In this tutorial we will try to display the values entered in textInput.

In the last lesson, we learned how to use the elements in the list on the screen. In this lesson, we will deal with style operations. While doing this, we will learn some different styling features between iOS and Android devices.

In this lesson, we will learn the ScrollView component that we can use to create scrollable screens.

In this tutorial we will learn how to use the FlatList component to create a list.

In this course, we will continue to work with React Native components.

In this lesson, we will create the TextInput component.

In this tutorial we will learn how to delete created list elements using the Pressable component.

In this tutorial we will make some style corrections. Some of these operations are applied differently on Android and iOS devices. We will learn how to do them in this tutorial.

In this lesson we will create a modal. We will use the TextInput component to do this. We will open the structure with a button and close it with another button.

In this lesson, we will complete the Modal opening and closing operations.

In this lesson, we will learn how to add an image to the application. To do this, we will use the Image component.

In this lesson we will complete the application

In this lesson we summarize this chapter

In this lesson, we explain which topics we will learn in the section. We introduce the application we developed.

. In this tutorial we will not start building the application.

In this lesson, we will start an application from scratch. Thus, we will reinforce what we have learned.

. In this lesson, we will create the screens we will use in the application. We will also design a custom button that we will use in these screens.

. In this tutorial, we will style edit the part of the application that we have created so far. Here we will try to get a proper display for both Android and iOS devices.

In this lesson we will work with the TextInput component. We will create its style properties and working system.

In this tutorial we will create the appearance of the MainButton component

In this tutorial we will learn how to design the background of an application. While doing this, we will also learn how to use Linear Gradient in React Native.

In this tutorial we will learn the Image Background component that we can use to create a background image.

In this lesson we will try to advance the application logic. We will create the functions that the buttons we use in the application are executed.

In this tutorial, we will try to bring an alert to the screen when a non-valid value is entered in the TextInput component.

. In this lesson, we will change the screen when a value is entered into the TextInput component according to the criteria we set. We are talking about a screen transition here. There are third-party libraries used for screen navigation in React Native applications. But we haven't learned them yet, so we'll use a programmatic method for the page transition.

In this lesson we will start creating the GameHomeScreen.

. In this lesson, we will determine the colors we will use throughout the application. We will complete these colors in a separate file. We will use these colors as a constant in the part of the application we want.

In this tutorial we will create functions and components that will work for the device to guess the number.

In this lesson, we will create plus and minus buttons. With the help of these buttons, we will make the device guess the number we entered.

In this lesson, we will do the necessary operations to switch to the Game Over screen. To go to this screen, the device must guess correctly.

In this lesson we will focus on two topics. One is the use of icons in the application. We will use a separate library for this.

In this lesson, we will learn how to use the Expo Splash Screen package. We will use this package in the font family loading process.

. In this tutorial we will start creating the Game Over screen.

In this tutorial we will dynamically capture data from the Game Over screen. Also, when we press the New Game button, we will open a new game.

In this lesson, we will display the guesses made by the device using the FlatList component.

. In this lesson, we will use FlatList to ensure that the values ​​we bring to the screen have a nice appearance.

. In this lesson, we will look at the sections that need to be edited. Then, we will remind you what we learned in this section.

We will explain which topics we will cover in the chapter.

. In this tutorial we will learn how to dynamically adjust the width of a component.

I'll teach you how to use the Dimensions API.

We will continue to work with the Dimensions API

In this tutorial, we will ensure that mobile devices display apps properly when used in both portrait and landscape positions. There are new features we will use for this. We will learn all of these gradually in the chapter.

. In this tutorial we will manage the keyboard that opens when a value is entered with the TextInput component. We will use the Keyboard Avoiding View component to manage this.

In this tutorial, we will adjust the appearance of the Game Home Screen when we use the devices in landscape orientation.

. In this lesson we will edit the GameOverScreen component. Here, when we use it in landscape position, we will ensure that the appearance on the page is smooth. We will use the useWindowDimensions hook to do this.

In this section, we learned what we need to do to ensure that mobile devices have a proper screen appearance in vertical and horizontal use. But we haven't started writing different codes for each platform yet. We only set the screen appearances when the devices are used in vertical and horizontal positions. In this lesson, we will start writing platform-specific code.

In this tutorial we will add statusbar to the application and complete the application.

We will show the topics we will cover in the chapter.

In this lesson we will start developing the application.

. In this lesson, we will create files and folders that we will use in the application. The application will first make use of fake data in the application. We will also create this data.

. In this lesson, we will try to show the category types on device screens.

In this lesson, we will apply special style operations to the category titles that appear on the screen. While doing this, we will see and manage some differences between iOS and Android operating systems.

In this tutorial, we will start using the React Navigation library.

. In this lesson we will switch between two screens.

In this lesson, we will make some explanations about the React Navigation features we have used so far.

In this lesson, we will learn how to pass parameters between routes.

. In this lesson, we will try to display the dishes according to the selected category.

In this tutorial we will access the information about the meals in the MealCard component. Then we will create a nice looking card structure. We will also learn different ways of using images to do this.

In this lesson, we will learn some features that we can use in the Image component. We will explain what we need to do to use an image from an internet source.

In this tutorial we will edit the Header section on the screens.

In this tutorial, we will learn how to dynamically change the title using the Options property.

. In this tutorial we will create a screen with detailed information about the meals.

In this lesson we will start creating the detail screen.

in this lesson we will learn different methods of creating buttons in the Header section.

In this lesson we will learn a new type of Navigator. The name of the type I will learn is Drawer Navigator.

In this lesson, we will learn to customize Darwer Navigator. Then I will use “bottom tabs” navigators in the same application.

. In this tutorial we will continue with the Meal App application. In the previous lessons we learned to use different navigation libraries. Now we will learn to use them nested in the Meal App application.

In this lesson we will try to finalize the application.

We will show the topics we will cover in the chapter.

In this tutorial we will start using Context API in our application.

. In this lesson, we will learn how to manage the data we create using the useContext hook.

. In this lesson, we will try to show the meals we added to our favorites on the Favorite screen.

. In this section we will develop a new application. This application will be a material tracking application. We will follow the purchase transactions made by a construction company. You can adapt it in any way you want.

. In this lesson we will install the application. We will install the navigation packages we will use in the application. We will also try to create the general folder structure.

In this tutorial we will create the navigation structure in the application.

In this lesson, we will organize the sections where we do navigation operations.

In this tutorial we will create the components we will use in the application. We will also create fake data that we will use in the components.

In this lesson, we will start creating the MaterialList component.

In this tutorial we will start creating screen layouts.

In this tutorial we will try to organize the RenderMaterial component.

. In this tutorial we will add a button to the header section. This button will allow a new material purchase to be added to the list.

In this lesson we will try to make programmatic switching between screens.

In this lesson we will start editing the Edit Material screen. This screen view will be different when the plus button is pressed, it will be different when the material is pressed.

. In this tutorial we will start creating the buttons we will use on the Edit Material screen.

In this tutorial we will manage the state of the application with the Context API and the useReducer hook. We have already shown you how to use the Context API, now we will use it together with the useReducer hook.

In this lesson we will continue where we left off. In the last lesson, he created the ADD case. In this lesson, we will create Update and Delete cases.

. In this tutorial we will start using the Context structure we created. Previously, we were using the data in the FakeData file directly in our components. Now we will use them with the Context API.

In this lesson, we will try to activate the buttons that appear on the Edit Material screen.

In this section we will make our application more dynamic. We will enter data for new materials using TextInput components. We will store this data in a database. We will use Firebase for this. In this tutorial we will create a custom input component.

In this lesson we will do the styling of input and MaterialForm components.

In this lesson, we will try to capture the data entered into the TextInput component.

In this lesson, we will do the necessary operations to send the entered data to the desired location. There is no Form component in React Native, but we can define this process as the Form Submit process.

In this lesson, we will go into the subject of material editing. We will ensure that the information of the material we want to edit comes to the textInput component.

In this lesson, we will do data validation.

. In this lesson, we will start working with Firebase. Here we will learn how to create a database.

. In this lesson, we will post data to the database we created in Firebase.

In this lesson we will work Fetching Data from Firebase

Up until this lesson, we used all the data we used in the application from the FakeData file. We used the Context API to manage them. But now we have a database. We need to use it. While using this, we will manage the state of the application with the Context API.

In this lesson we will work with ID. Because we have two different ID information in the application. We create one of them ourselves. The other comes from Firebase. This can cause a problem. We need to fix this

In this tutorial we will do deleting and updating operations. We will ensure that these operations work in the same way both in the application and in Firebase.

In this lesson we will manage the loading process that occurs when performing operations such as deleting, updating or adding data.

In this lesson, we will manage the Error status.

In this lesson, we will explain the topics we will see in the chapter.

. In this lesson, we will start creating the application. But I have already written some codes. These will be the codes we will use when creating the components. We do not need to write them from scratch.

In this lesson, we will explain how the authentication process works with Firebase. First, you must have a device to request.

. In this tutorial, we will start creating the structure we will use to send data from the Signup screen to Firebase. We will also create a navigation between the Login and Signup screens.

. In this tutorial, we will try to create a new user using the function we created in the last lesson.

In this tutorial, we will start creating the function that allows me to log in to the application using the registered user information.

In this lesson, we will perform error handling.

In this tutorial we will start using Context API to manage the authentication system.

In the last lesson, we set up the Context structure. In this lesson, we will do signup and login operations using the functions we created here.

In this lesson, we will activate the necessary functions to log out of the system safely.

In this section we will explain the topics we will cover.

In this lesson, we will start creating the screen components that we will use in the application. In addition, we will create the component that will display all the flavor points.

In this lesson, we will start creating the TastyCard component.

In this tutorial we will start building the navigation system in the application. To do this, we will complete one more screen component.

In this lesson, I will create a button that will allow me to switch between AllTastes and AddTastes. Then we will define the colors that we will use throughout the application.

In this lesson, we will create the TasteForm component. We will try to use the camera in this component. We will do this with a special package that allows you to benefit from native device features. This package will be an expo package.

In this lesson, we will try to take a picture using the ImagePicker package and use it.

In this lesson, we will try to perform operations that we cannot do with our virtual iOS device with a real iOS device.

In this lesson, we will ensure that the pictures you have taken are displayed on the device screens.

In this tutorial, we will create the component where we will keep the location information.

In this tutorial we will start creating functions to access the location information of the devices.

In the last lesson, we accessed location information by using expo's location library.

In this lesson, we will try to show our location on the map using location information.

In this lesson, we will try to create an interactive map. We will make it work when the "Find a Map" button is pressed.

In this lesson, we will try to display the information of the location you have selected on the interactive map.

In this lesson, we will capture all the information about the food we want to share. This information is used in the TasteForm component.

in this lesson we will make latitude and longitude information readable. what do we mean by this? we will try to create an address information that we can understand using the coordinates we obtained.

In this lesson, we will try to bring all the location information to the All Tastes screen.

In this lesson, we will edit the information we use in the TastyCard component to make the screen look more smooth.