{"componentChunkName":"component---src-templates-documentation-tsx","path":"/firestore/pagination","result":{"data":{"mdx":{"body":"var _excluded = [\"components\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"title\": \"Pagination\",\n \"description\": \"Pagination example using Cloud Firestore.\",\n \"next\": \"/functions/usage\",\n \"previous\": \"/firestore/usage-with-flatlists\"\n};\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"p\", null, \"Pagination using cloud firestore may be done in various ways but here's a basic way to do it using the firestore query features:\\n\", \"[\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"orderBy\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"limit\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"startAfter\"), \"]\"), mdx(\"h1\", {\n \"id\": \"setup-state\"\n }, \"Setup state\"), mdx(\"p\", null, \"First, create a list display component with 2 state items; \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"lastDocument\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"userData\"), \":\"), mdx(\"pre\", {\n \"className\": \"language-jsx\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword module\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token maybe-class-name\"\n }, \"React\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \" useState \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword module\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword module\"\n }, \"import\"), \" type \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token maybe-class-name\"\n }, \"Node\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword module\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword module\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token maybe-class-name\"\n }, \"Text\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token maybe-class-name\"\n }, \"View\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token maybe-class-name\"\n }, \"Button\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token maybe-class-name\"\n }, \"Alert\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword module\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-native'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword module\"\n }, \"import\"), \" firestore \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword module\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'@react-native-firebase/firestore'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" userCollection \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"firestore\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token method function property-access\"\n }, \"collection\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'Users'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function-variable function\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token maybe-class-name\"\n }, \"App\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token arrow operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function-variable function\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token maybe-class-name\"\n }, \"Node\")), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token arrow operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"lastDocument\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" setLastDocument\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useState\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"userData\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" setUserData\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useState\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\")), mdx(\"h1\", {\n \"id\": \"loaddata-function\"\n }, mdx(\"inlineCode\", {\n parentName: \"h1\"\n }, \"LoadData\"), \" function\"), mdx(\"p\", null, \"Next, make a function called \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"LoadData\"), \" that fetches data from \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Users\"), \" collection, and call it when a \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Button\"), \" is pressed.\"), mdx(\"p\", null, \"If lastDocument is not assigned (meaning initial load), the function will fetch from the start.\\nAfter successful fetch from the collection, store the last snapshot data by \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"setLastDocument\"), \".\"), mdx(\"pre\", {\n \"className\": \"language-jsx\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword module\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token maybe-class-name\"\n }, \"React\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \" useState \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword module\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword module\"\n }, \"import\"), \" type \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token maybe-class-name\"\n }, \"Node\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword module\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword module\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token maybe-class-name\"\n }, \"Text\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token maybe-class-name\"\n }, \"View\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token maybe-class-name\"\n }, \"Button\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token maybe-class-name\"\n }, \"Alert\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword module\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-native'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword module\"\n }, \"import\"), \" firestore \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword module\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'@react-native-firebase/firestore'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" userCollection \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"firestore\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token method function property-access\"\n }, \"collection\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'Users'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function-variable function\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token maybe-class-name\"\n }, \"App\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token arrow operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function-variable function\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token maybe-class-name\"\n }, \"Node\")), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token arrow operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"lastDocument\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" setLastDocument\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useState\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"userData\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" setUserData\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useState\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token maybe-class-name\"\n }, \"LoadData\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token console class-name\"\n }, \"console\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token method function property-access\"\n }, \"log\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'LOAD'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"let\"), \" query \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" userCollection\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token method function property-access\"\n }, \"orderBy\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'age'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// sort the data\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"if\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"lastDocument \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"!==\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword nil\"\n }, \"undefined\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n query \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" query\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token method function property-access\"\n }, \"startAfter\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"lastDocument\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// fetch data following the last document accessed\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n query\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token method function property-access\"\n }, \"limit\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"3\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// limit to your page size, 3 is just an example\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token method function property-access\"\n }, \"get\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token method function property-access\"\n }, \"then\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, \"querySnapshot\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token arrow operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"setLastDocument\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"querySnapshot\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token property-access\"\n }, \"docs\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"querySnapshot\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token property-access\"\n }, \"docs\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token property-access\"\n }, \"length\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"1\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token maybe-class-name\"\n }, \"MakeUserData\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"querySnapshot\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token property-access\"\n }, \"docs\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"View\")), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"userData\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"Button\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"onPress\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script language-javascript\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script-punctuation punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token arrow operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token function\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token maybe-class-name\"\n }, \"LoadData\")), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"title\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"Load Next\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"/>\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\")), mdx(\"h1\", {\n \"id\": \"makeuserdata-function\"\n }, mdx(\"inlineCode\", {\n parentName: \"h1\"\n }, \"MakeUserData\"), \" function\"), mdx(\"p\", null, \"This is just an example function, alter it to process the data to meet your requirements.\\nIn this specific example, it will replace the userData component with the new data fetched.\"), mdx(\"pre\", {\n \"className\": \"language-js\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-js\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token maybe-class-name\"\n }, \"MakeUserData\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, \"docs\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"let\"), \" templist \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"//[...userData] <- use this instead of [] if you want to save the previous data.\"), \"\\n docs\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token method function property-access\"\n }, \"forEach\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, \"doc\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \",\"), \" i\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token arrow operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token console class-name\"\n }, \"console\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token method function property-access\"\n }, \"log\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"doc\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token property-access\"\n }, \"_data\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"let\"), \" temp \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token maybe-class-name\"\n }, \"View\"), \" key\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"i\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" style\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \" margin\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"10\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token maybe-class-name\"\n }, \"Text\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"doc\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token property-access\"\n }, \"_data\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token property-access\"\n }, \"name\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token maybe-class-name\"\n }, \"Text\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token maybe-class-name\"\n }, \"Text\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"doc\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token property-access\"\n }, \"_data\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token property-access\"\n }, \"age\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token maybe-class-name\"\n }, \"Text\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"/\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token maybe-class-name\"\n }, \"View\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \">\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n templist\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token method function property-access\"\n }, \"push\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"temp\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"setUserData\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"templist\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"//replace with the new data\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\")), mdx(\"p\", null, \"Now, every time the button is pressed, \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"Users\"), \" collection data will be fetched one page at a time.\"), mdx(\"h1\", {\n \"id\": \"conclusion\"\n }, \"Conclusion\"), mdx(\"p\", null, \"Here's the full example code\"), mdx(\"pre\", {\n \"className\": \"language-jsx\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\"\n }, mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword module\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token maybe-class-name\"\n }, \"React\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \" useState \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword module\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword module\"\n }, \"import\"), \" type \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token maybe-class-name\"\n }, \"Node\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword module\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword module\"\n }, \"import\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token maybe-class-name\"\n }, \"Text\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token maybe-class-name\"\n }, \"View\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token maybe-class-name\"\n }, \"Button\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token maybe-class-name\"\n }, \"Alert\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword module\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'react-native'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword module\"\n }, \"import\"), \" firestore \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword module\"\n }, \"from\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'@react-native-firebase/firestore'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" userCollection \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"firestore\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token method function property-access\"\n }, \"collection\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'Users'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function-variable function\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token maybe-class-name\"\n }, \"App\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token arrow operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function-variable function\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token maybe-class-name\"\n }, \"Node\")), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token arrow operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"lastDocument\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" setLastDocument\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useState\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"const\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"userData\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \",\"), \" setUserData\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"useState\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token maybe-class-name\"\n }, \"LoadData\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token console class-name\"\n }, \"console\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token method function property-access\"\n }, \"log\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'LOAD'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"let\"), \" query \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" userCollection\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token method function property-access\"\n }, \"orderBy\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token string\"\n }, \"'age'\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// sort the data\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"if\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"lastDocument \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"!==\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword nil\"\n }, \"undefined\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n query \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" query\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token method function property-access\"\n }, \"startAfter\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"lastDocument\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// fetch data following the last document accessed\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n query\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token method function property-access\"\n }, \"limit\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"3\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token comment\"\n }, \"// limit to your page size, 3 is just an example\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token method function property-access\"\n }, \"get\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token method function property-access\"\n }, \"then\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, \"querySnapshot\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token arrow operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"setLastDocument\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"querySnapshot\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token property-access\"\n }, \"docs\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), \"querySnapshot\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token property-access\"\n }, \"docs\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token property-access\"\n }, \"length\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"-\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token number\"\n }, \"1\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token maybe-class-name\"\n }, \"MakeUserData\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"querySnapshot\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token property-access\"\n }, \"docs\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"function\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token maybe-class-name\"\n }, \"MakeUserData\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, \"docs\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"let\"), \" templist \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"[\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"]\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n docs\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token method function property-access\"\n }, \"forEach\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token parameter\"\n }, \"doc\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \",\"), \" i\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token arrow operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token console class-name\"\n }, \"console\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token method function property-access\"\n }, \"log\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"doc\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token property-access\"\n }, \"_data\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"let\"), \" temp \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token operator\"\n }, \"=\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"View\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"key\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script language-javascript\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script-punctuation punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"i\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"style\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script language-javascript\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script-punctuation punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \" margin\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \":\"), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token number\"\n }, \"10\"), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"Text\")), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"doc\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token property-access\"\n }, \"_data\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token property-access\"\n }, \"name\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"Text\")), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"doc\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token property-access\"\n }, \"_data\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token property-access\"\n }, \"age\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n templist\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \".\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token method function property-access\"\n }, \"push\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"temp\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token function\"\n }, \"setUserData\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"templist\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), \"\\n\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword\"\n }, \"return\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"(\"), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"View\")), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \">\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"userData\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"<\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token class-name\"\n }, \"Button\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"onPress\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script language-javascript\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token script-punctuation punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \")\"), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token arrow operator\"\n }, \"=>\"), \" \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"{\"), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token function\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token maybe-class-name\"\n }, \"LoadData\")), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"(\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"}\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-name\"\n }, \"title\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token attr-value\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"=\"), mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\"), \"Load Next\", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\\\"\")), \"\\n \", mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"/>\")), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token plain-text\"\n }, \"\\n \"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token tag\"\n }, mdx(\"span\", {\n parentName: \"span\",\n \"className\": \"token punctuation\"\n }, \"\")), \"\\n \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \")\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \"}\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\\n\", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword module\"\n }, \"export\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token keyword module\"\n }, \"default\"), \" \", mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token maybe-class-name\"\n }, \"App\"), mdx(\"span\", {\n parentName: \"code\",\n \"className\": \"token punctuation\"\n }, \";\"), \"\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;","frontmatter":{"title":"Pagination","description":"Pagination example using Cloud Firestore.","icon":null,"noindex":null},"excerpt":"Pagination using cloud firestore may be done in various ways but here's a basic way to do it using the firestore query features:\n orderBy…","tableOfContents":{"items":[{"url":"#setup-state","title":"Setup state"},{"url":"#loaddata-function","title":"LoadData function"},{"url":"#makeuserdata-function","title":"MakeUserData function"},{"url":"#conclusion","title":"Conclusion"}]},"headings":[{"depth":1,"value":"Setup state"},{"depth":1,"value":"LoadData function"},{"depth":1,"value":"MakeUserData function"},{"depth":1,"value":"Conclusion"}],"parent":{"__typename":"File","relativePath":"firestore/pagination.md"}},"next":{"frontmatter":{"title":"Cloud Functions"},"fields":{"slug":"/functions/usage"}},"previous":{"frontmatter":{"title":"Usage with FlatLists"},"fields":{"slug":"/firestore/usage-with-flatlists"}},"sidebar":{"raw":"[[\"Getting Started\",\"/\"],[\"Migration Guide to v22\",\"/migrating-to-v22\"],[\"Migration Guide to v23\",\"/migrating-to-v23\"],[\"TypeScript\",\"/typescript\"],[\"Platforms\",\"/platforms\"],[\"Release Notes\",\"/releases\"],[\"FAQs and Tips\",\"/faqs-and-tips\"],[\"Feature Requests\",\"https://invertase.canny.io/react-native-firebase\"],[\"Contributing\",\"https://github.com/invertase/react-native-firebase/blob/main/CONTRIBUTING.md\"],[\"AI Logic\",[[\"Usage\",\"/ai/usage\"]],\"//firebase.google.com/static/images/icons/firebase-ai-logic.svg\"],[\"Analytics\",[[\"Usage\",\"/analytics/usage\"],[\"Screen Tracking\",\"/analytics/screen-tracking\"],[\"Building an Analytics Funnel\",\"https://blog.theodo.com/2018/01/building-google-analytics-funnel-firebase-react-native\"]],\"//firebase.google.com/static/images/products/icons/run_analytics.svg\"],[\"App Check\",[[\"Usage\",\"/app-check/usage\"]],\"//firebase.google.com/static/images/products/icons/build_app_check.svg\"],[\"App Distribution\",[[\"Usage\",\"/app-distribution/usage\"]],\"//firebase.google.com/static/images/products/icons/run_app_distribution.svg\"],[\"Authentication\",[[\"Usage\",\"/auth/usage\"],[\"Social Auth\",\"/auth/social-auth\"],[\"Phone Auth\",\"/auth/phone-auth\"],[\"OpenID Connect Auth\",\"/auth/oidc-auth\"],[\"Multi-factor Auth\",\"/auth/multi-factor-auth\"]],\"//firebase.google.com/static/images/products/icons/build_auth.svg\"],[\"Cloud Firestore\",[[\"Usage\",\"/firestore/usage\"],[\"Usage with Emulator\",\"/firestore/emulator\"],[\"Usage with FlatLists\",\"/firestore/usage-with-flatlists\"],[\"Implementing Pagination\",\"/firestore/pagination\"],[\"Building a \\\"TODO\\\" app\",\"https://invertase.io/blog/getting-started-with-cloud-firestore-on-react-native\"]],\"//firebase.google.com/static/images/products/icons/build_firestore.svg\"],[\"Cloud Functions\",[[\"Usage\",\"/functions/usage\"],[\"Writing & Deploying Functions\",\"/functions/writing-deploying-functions\"]],\"//firebase.google.com/static/images/products/icons/build_functions.svg\"],[\"Cloud Messaging\",[[\"Usage\",\"/messaging/usage\"],[\"iOS Project Setup\",\"/messaging/usage/ios-setup\"],[\"iOS Permissions\",\"/messaging/ios-permissions\"],[\"Notifications\",\"/messaging/notifications\"],[\"iOS Notification Images\",\"/messaging/ios-notification-images\"],[\"Server Integration\",\"/messaging/server-integration\"]],\"//firebase.google.com/static/images/products/icons/run_cloud_messaging.svg\"],[\"Cloud Storage\",[[\"Usage\",\"/storage/usage\"]],\"//firebase.google.com/static/images/products/icons/build_storage.svg\"],[\"Core / App\",[[\"Usage\",\"/app/usage\"],[\"JSON Config\",\"/app/json-config\"],[\"Utils\",\"/app/utils\"]],\"//static.invertase.io/assets/social/firebase-logo.png\"],[\"Crashlytics\",[[\"Usage\",\"/crashlytics/usage\"],[\"Viewing crash reports\",\"/crashlytics/crash-reports\"]],\"//firebase.google.com/static/images/products/icons/run_crashlytics.svg\"],[\"Realtime Database\",[[\"Usage\",\"/database/usage\"],[\"Offline Support\",\"/database/offline-support\"],[\"Presence Detection\",\"/database/presence-detection\"]],\"//firebase.google.com/static/images/products/icons/build_realtime_database.svg\"],[\"In-App Messaging\",[[\"Usage\",\"/in-app-messaging/usage\"]],\"//firebase.google.com/static/images/products/icons/run_in_app_messaging.svg\"],[\"Installations\",[[\"Usage\",\"/installations/usage\"]],\"//static.invertase.io/assets/social/firebase-logo.png\"],[\"ML\",[[\"Usage\",\"/ml/usage\"]],\"//firebase.google.com/static/images/products/icons/build_ml.svg\"],[\"Remote Config\",[[\"Usage\",\"/remote-config/usage\"]],\"//firebase.google.com/static/images/products/icons/run_remote_config.svg\"],[\"Performance Monitoring\",[[\"Usage\",\"/perf/usage\"],[\"Axios Integration\",\"/perf/axios-integration\"],[\"KY Integration\",\"/perf/ky-integration\"]],\"//firebase.google.com/static/images/products/icons/run_performance.svg\"],[\"VertexAi\",[[\"Usage\",\"/vertexai/usage\"]],\"//static.invertase.io/assets/social/firebase-logo.png\"],[\"Legacy docs\",[[\"Migrating to v6\",\"/migrating-to-v6\"],[\"Legacy Docs (<= v5)\",\"https://v5.rnfirebase.io/docs/v5.x.x/getting-started\"]],\"//static.invertase.io/assets/social/firebase-logo.png\"]]"}},"pageContext":{"id":"8fb01f0d-c64d-5211-8456-0ad2efef3317","next":"/functions/usage","previous":"/firestore/usage-with-flatlists"}},"staticQueryHashes":["3688227230"]}