Tags: DeveloperRejaul/rn-meter-cli
Tags
docs: add Infinity Scroll View usage example
### ♾️ Infinity Scroll View
```bash
npx rn-meter add listview
```
This List View is fully setup with RTK Query and supports pagination.
<details>
<summary>View Example</summary>
```tsx
<ListShow
header={{
render:(data) => (<Text>data of header</Text>),
isScrollable: false,
}}
query1={useGetPostsQuery}
query2={useLazyGetPostsByPageQuery}
renderItem={renderItem}
queryParams={{}}
selector={(data)=>data?.data?.policies}
initialNumToRender={10}
contentContainerStyle={{paddingHorizontal: 0, paddingBottom: 100}}
/>
```
```ts
// rtk api example
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
export const api = createApi({
reducerPath: 'api',
baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com/' }),
endpoints: () => ({}),
});
export const homeApi = api.injectEndpoints({
overrideExisting: true,
endpoints: (build) => ({
getPosts: build.query<ApiResponse<PostItem[]>, {}>({
query: () => '/posts?_page=1&_limit=10',
transformResponse: (response: PostItem[]): ApiResponse<PostItem[]> => ({
status: 'success',
body: response,
}),
}),
getPostsByPage: build.query<ApiResponse<PostItem[]>, { page: number; limit: number }>({
query: ({ page = 1, limit = 10 }) => `/posts?_page=${page}&_limit=${limit}`,
transformResponse: (response: PostItem[]): ApiResponse<PostItem[]> => ({
status: 'success',
body: response,
}),
async onQueryStarted(queryArg, { dispatch, queryFulfilled }) {
try {
const { data } = await queryFulfilled;
dispatch(
homeApi.util.updateQueryData('getPosts', {}, (draft) => {
if (data?.body && draft?.body && queryArg.page > 1) {
draft.body.push(...data.body);
}
}),
);
} catch (err) {
console.error('Pagination error:', err);
}
},
}),
})
});
export const {
useGetPostsQuery,
useLazyGetPostsByPageQuery
} = homeApi;
```
</details>
PreviousNext