diff --git a/src/content/10/en/part10a.md b/src/content/10/en/part10a.md index 808b1e40226..b5c29fcfe2d 100644 --- a/src/content/10/en/part10a.md +++ b/src/content/10/en/part10a.md @@ -104,6 +104,8 @@ After you have set up the emulator and it is running, start the Expo development In addition to emulators, there is one extremely useful way to develop React Native applications with Expo, the Expo mobile app. With the Expo mobile app, you can preview your application using your actual mobile device, which provides a bit more concrete development experience compared to emulators. To get started, install the Expo mobile app by following the instructions in the [Expo's documentation](https://docs.expo.io/get-started/installation/#2-expo-go-app-for-ios-and). Note that the Expo mobile app can only open your application if your mobile device is connected to the same local network (e.g. connected to the same Wi-Fi network) as the computer you are using for development. +The latest Expo Go app available in the app store (Android Play Store & iOS App Store) are for SDK 51 and are **not compatible** with this material. We recommend to install the SDK 50 version from the official Expo Go website : [expo.dev](https://expo.dev/go) + When the Expo mobile app has finished installing, open it up. Next, if the Expo development tools are not already running, start them by running npm start. You should be able to see a QR code at the beginning of the command output. Open the app by scanning the QR code, in Android with Expo app or in iOS with the Camera app. The Expo mobile app should start building the JavaScript bundle and after it is finished you should be able to see your application. Now, every time you want to reopen your application in the Expo mobile app, you should be able to access the application without scanning the QR code by pressing it in the Recently opened list in the Projects view. diff --git a/src/content/10/en/part10b.md b/src/content/10/en/part10b.md index d3169863001..7358dc21866 100644 --- a/src/content/10/en/part10b.md +++ b/src/content/10/en/part10b.md @@ -842,7 +842,9 @@ Validate the sign-in form so that both username and password fields are required The current implementation of the TextInput component should display an error message if a touched field has an error. Emphasize this error message by giving it a red color. -On top of the red error message, give an invalid field a visual indication of an error by giving it a red border color. Remember that if a field has an error, the TextInput component sets the TextInput component's error prop as true. You can use the value of the error prop to attach conditional styles to the TextInput component. +On top of the red error message, give an invalid field a visual indication of an error by giving it a red border color. + +If you are using the [TextInput](https://callstack.github.io/react-native-paper/docs/components/TextInput/) component from [react-native-paper](https://callstack.github.io/react-native-paper/), remember that if a field has an error, the TextInput component sets the TextInput component's error prop as true. You can use the value of the error prop to attach conditional styles to the TextInput component. Here's what the sign-in form should roughly look like with an invalid field: diff --git a/src/content/10/en/part10c.md b/src/content/10/en/part10c.md index 41cdc399d25..10566b13a00 100644 --- a/src/content/10/en/part10c.md +++ b/src/content/10/en/part10c.md @@ -544,7 +544,7 @@ Because AsyncStorage keys are global, it is usually a good idea to add We can add an item to the storage using the [AsyncStorage.setItem](https://react-native-async-storage.github.io/async-storage/docs/api#setitem) method. The first argument of the method is the item's key and the second argument its value. The value must be a string, so we need to serialize non-string values as we did with the JSON.stringify method. The [AsyncStorage.getItem](https://react-native-async-storage.github.io/async-storage/docs/api/#getitem) method can be used to get an item from the storage. The argument of the method is the item's key, of which value will be resolved. The [AsyncStorage.removeItem](https://react-native-async-storage.github.io/async-storage/docs/api/#removeitem) method can be used to remove the item with the provided key from the storage. -**NB:** [SecureStore](https://docs.expo.dev/versions/latest/sdk/securestore/) is similar persisted storage as the AsyncStorage but it encrypts the stored data. This makes it more suitable for storing more sensitive data such as the user's credit card number. +**NB:** [SecureStore](https://docs.expo.dev/versions/latest/sdk/securestore/) is similar to AsyncStorage as a form of persisted storage, but it encrypts the stored data. This makes it more suitable for storing more sensitive data such as the user's credit card number. @@ -776,7 +776,7 @@ The hook's implementation is quite simple but it improves the readability and ma ```javascript // ... -import useAuthStorage from '../hooks/useAuthStorage'; // highlight-line +import useAuthStorage from '../useAuthStorage'; // highlight-line const useSignIn = () => { const authStorage = useAuthStorage(); //highlight-line diff --git a/src/content/10/en/part10d.md b/src/content/10/en/part10d.md index 10ae80bf80e..7c7fae20b26 100644 --- a/src/content/10/en/part10d.md +++ b/src/content/10/en/part10d.md @@ -14,7 +14,7 @@ Now that we have established a good foundation for our project, it is time to st To start testing code of any kind, the first thing we need is a testing framework, which we can use to run a set of test cases and inspect their results. For testing a JavaScript application, [Jest](https://jestjs.io/) is a popular candidate for such testing framework. For testing an Expo based React Native application with Jest, Expo provides a set of Jest configuration in a form of [jest-expo](https://github.com/expo/expo/tree/master/packages/jest-expo) preset. In order to use ESLint in the Jest's test files, we also need the [eslint-plugin-jest](https://www.npmjs.com/package/eslint-plugin-jest) plugin for ESLint. Let's get started by installing the packages: ```shell -npm install --save-dev jest jest-expo eslint-plugin-jest +npm install --save-dev jest jest-expo@^50.0.0 eslint-plugin-jest ``` To use the jest-expo preset in Jest, we need to add the following Jest configuration to the package.json file along with the test script: @@ -770,7 +770,7 @@ The first argument tells the API to return only the first two repositor } ``` -The format of the result object and the arguments are based on the [Relay's GraphQL Cursor Connections Specification](https://relay.dev/graphql/connections.htm), which has become a quite common pagination specification and has been widely adopted for example in the [GitHub's GraphQL API](https://docs.github.com/en/graphql). In the result object, we have the edges array containing items with node and cursor attributes. As we know, the node contains the repository itself. The cursor on the other hand is a Base64 encoded representation of the node. In this case, it contains the repository's id and date of repository's creation as a timestamp. This is the information we need to point to the item when they are ordered by the creation time of the repository. The pageInfo contains information such as the cursor of the first and the last item in the array. +The format of the result object and the arguments are based on the [Relay's GraphQL Cursor Connections Specification](https://relay.dev/graphql/connections.htm), which has become quite a common pagination specification and has been widely adopted for example in the [GitHub's GraphQL API](https://docs.github.com/en/graphql). In the result object, we have the edges array containing items with node and cursor attributes. As we know, the node contains the repository itself. The cursor on the other hand is a Base64 encoded representation of the node. In this case, it contains the repository's id and date of repository's creation as a timestamp. This is the information we need to point to the item when they are ordered by the creation time of the repository. The pageInfo contains information such as the cursor of the first and the last item in the array. Let's say that we want to get the next set of items after the last item of the current set, which is the "zeit/swr" repository. We can set the after argument of the query as the value of the endCursor like this: @@ -1122,6 +1122,6 @@ Because styled-components processes the style definitions, it is possible to use That's it, our application is ready. Good job! We have learned many new concepts during our journey such as setting up our React Native application using Expo, using React Native's core components and adding style to them, communicating with the server, and testing React Native applications. The final piece of the puzzle would be to deploy the application to the Apple App Store and Google Play Store. -Deploying the application is entirely optional and it isn't quite trivial, because you also need to fork and deploy the [rate-repository-api](https://github.com/fullstack-hy2020/rate-repository-api). For the React Native application itself, you first need to create either iOS or Android builds by following Expo's [documentation](https://docs.expo.io/distribution/building-standalone-apps/). Then you can upload these builds to either Apple App Store or Google Play Store. Expo has [documentation](https://docs.expo.dev/submit/introduction/) for this as well. +Deploying the application is entirely optional and it isn't quite trivial, because you also need to fork and deploy the [rate-repository-api](https://github.com/fullstack-hy2020/rate-repository-api). For the React Native application itself, you first need to create either iOS or Android builds by following Expo's [documentation](https://docs.expo.dev/build/setup/). Then you can upload these builds to either Apple App Store or Google Play Store. Expo has [documentation](https://docs.expo.dev/submit/introduction/) for this as well.