Browse Source

update: react native book store tutorial - authors part

pull/23757/head
sumeyye 11 months ago
parent
commit
b0ab551114
  1. BIN
      docs/en/images/author-input-in-book-form.png
  2. BIN
      docs/en/images/author-list-with-options.png
  3. BIN
      docs/en/images/authors-in-book-form.png
  4. BIN
      docs/en/images/book-list-with-author.png
  5. BIN
      docs/en/images/create-author.png
  6. BIN
      docs/en/images/delete-author-alert.png
  7. BIN
      docs/en/images/update-author.png
  8. 16
      docs/en/tutorials/mobile/react-native/index.md

BIN
docs/en/images/author-input-in-book-form.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 55 KiB

After

Width:  |  Height:  |  Size: 501 KiB

BIN
docs/en/images/author-list-with-options.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 67 KiB

After

Width:  |  Height:  |  Size: 740 KiB

BIN
docs/en/images/authors-in-book-form.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 669 KiB

BIN
docs/en/images/book-list-with-author.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 62 KiB

After

Width:  |  Height:  |  Size: 530 KiB

BIN
docs/en/images/create-author.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 53 KiB

After

Width:  |  Height:  |  Size: 645 KiB

BIN
docs/en/images/delete-author-alert.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 79 KiB

After

Width:  |  Height:  |  Size: 743 KiB

BIN
docs/en/images/update-author.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 60 KiB

After

Width:  |  Height:  |  Size: 664 KiB

16
docs/en/tutorials/mobile/react-native/index.md

@ -124,7 +124,7 @@ export default function BookStoreStackNavigator() {
Add the `BookStoreStack` to the screens object in the `./src/components/DrawerContent/DrawerContent.tsx` file. The DrawerContent component will be used to render the menu items.
```js
```tsx
// Imports..
const screens = {
HomeStack: { label: "::Menu:Home", iconName: "home" },
@ -1731,7 +1731,7 @@ export default CreateUpdateAuthorForm;
Update BookAPI proxy file and include `getAuthorLookup` method
```js
```ts
import api from "./API";
export const getList = () => api.get("/api/app/book").then(({ data }) => data);
@ -1756,9 +1756,9 @@ export const remove = (id) =>
### Add `AuthorName` to the Book List
Open `BooksScreen.js` file under the `./src/screens/BookStore/Books` and update code below.
Open `BooksScreen.tsx` file under the `./src/screens/BookStore/Books` and update code below.
```js
```tsx
//Improts
function BooksScreen({ navigation }) {
@ -1800,7 +1800,7 @@ function BooksScreen({ navigation }) {
### Pass authors to the `CreateUpdateBookForm`
```js
```tsx
import {
getAuthorLookup, //Add this line
get,
@ -1834,7 +1834,7 @@ function CreateUpdateBookScreen({
### Add `authorId` field to Book Form
```js
```tsx
const validations = {
authorId: Yup.string()
.nullable()
@ -1889,7 +1889,7 @@ function CreateUpdateBookForm({ submit, book = null, authors = [] }) {
/>
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : "margin"}
behavior={Platform.OS === "ios" ? "padding" : "height"}
>
<ScrollView keyboardShouldPersistTaps="handled">
<View style={styles.input.container}>
@ -1933,4 +1933,4 @@ export default CreateUpdateBookForm;
![Authors in Book Form](../../../images/authors-in-book-form.png)
That's all. Just run the application and try to create or edit an author.
That is all. Just run the application and try to create or edit an author.

Loading…
Cancel
Save