https://react-native-sortables-docs.vercel.app/assets/js/78cc1c72.d9e6d883.js

1"use strict";(globalThis.webpackChunkdocs=globalThis.webpackChunkdocs||[]).push([[9543],{6128(e,n,t){t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>a,default:()=>h,frontMatter:()=>o,metadata:()=>r,toc:()=>c});const r=JSON.parse('{"id":"flex/usage","title":"Usage","description":"Here is a simple Sortable Flex usage example. For more specific usage scenarios, see the Examples section.","source":"@site/docs/flex/usage.mdx","sourceDirName":"flex","slug":"/flex/usage","permalink":"/flex/usage","draft":false,"unlisted":false,"editUrl":"https://github.com/MatiPl01/react-native-sortables/edit/main/packages/docs/docs/flex/usage.mdx","tags":[],"version":"current","sidebarPosition":1,"frontMatter":{"sidebar_position":1},"sidebar":"tutorialSidebar","previous":{"title":"Sortable Flex","permalink":"/flex/overview"},"next":{"title":"Props","permalink":"/flex/props"}}');var s=t(4848),i=t(8453);const o={sidebar_position:1},a="Usage",l={},c=[{value:"Basic Example",id:"basic-example",level:2},{value:"Details",id:"details",level:2}];function d(e){const n={a:"a",admonition:"admonition",code:"code",h1:"h1",h2:"h2",header:"header",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,i.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"usage",children:"Usage"})}),"\n",(0,s.jsxs)(n.p,{children:["Here is a simple ",(0,s.jsx)(n.strong,{children:"Sortable Flex"})," usage example. For more specific usage scenarios, see the ",(0,s.jsx)(n.a,{href:"./examples",children:"Examples"})," section."]}),"\n",(0,s.jsxs)(n.p,{children:["There are ",(0,s.jsx)(n.strong,{children:"no required props"})," for the ",(0,s.jsx)(n.code,{children:"Sortable.Flex"})," component and you can ",(0,s.jsx)(n.strong,{children:"render anything"})," within it. Items ",(0,s.jsx)(n.strong,{children:"don't have to be the same components"})," and ",(0,s.jsx)(n.strong,{children:"don't need to have the same height"}),"."]}),"\n",(0,s.jsx)(n.h2,{id:"basic-example",children:"Basic Example"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-tsx",children:"import { Text, View, StyleSheet } from 'react-native';\nimport Sortable from 'react-native-sortables';\n\nconst DATA = [\n  'Poland',\n  'Germany',\n  'France',\n  'Italy',\n  'Spain',\n  'Portugal',\n  'Greece',\n  'Great Britain',\n  'United States',\n  'Canada',\n  'Australia',\n  'New Zealand'\n];\n\nexport default function Flex() {\n  return (\n    <Sortable.Flex gap={10} padding={10}>\n      {/* You can render anything within the Sortable.Flex component */}\n      {DATA.map(item => (\n        <View style={styles.cell} key={item}>\n          <Text>{item}</Text>\n        </View>\n      ))}\n    </Sortable.Flex>\n  );\n}\n\nconst styles = StyleSheet.create({\n  cell: {\n    backgroundColor: '#36877F',\n    borderRadius: 9999,\n    padding: 10,\n    al

1ignItems: 'center',\n    justifyContent: 'center'\n  }\n});\n"})}),"\n",(0,s.jsx)(n.h2,{id:"details",children:"Details"}),"\n",(0,s.jsxs)(n.p,{children:["To create a grid, you need to import the ",(0,s.jsx)(n.code,{children:"Sortable"})," object from the ",(0,s.jsx)(n.code,{children:"react-native-sortables"})," package and then, use the ",(0,s.jsx)(n.code,{children:"Sortable.Grid"})," component."]}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"Sortable.Grid"})," component requires the following props which are similar to the ones in the ",(0,s.jsx)(n.code,{children:"FlatList"})," component:"]}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"data"}),": The data to render in the grid."]}),"\n",(0,s.jsxs)(n.li,{children:[(0,s.jsx)(n.code,{children:"renderItem"}),": A function that renders a single item in the grid."]}),"\n"]}),"\n",(0,s.jsxs)(n.p,{children:["You can customize the grid appearance and behavior by using other props. See the ",(0,s.jsx)(n.a,{href:"./props",children:"Props"})," section for more information."]}),"\n",(0,s.jsx)(n.admonition,{type:"important",children:(0,s.jsxs)(n.p,{children:["Remember to to wrap your ",(0,s.jsx)(n.code,{children:"renderItem"})," function in a ",(0,s.jsx)(n.code,{children:"useCallback"})," hook to avoid unnecessary re-renders."]})})]})}function h(e={}){const{wrapper:n}={...(0,i.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(d,{...e})}):d(e)}},8453(e,n,t){t.d(n,{R:()=>o,x:()=>a});var r=t(6540);const s={},i=r.createContext(s);function o(e){const n=r.useContext(i);return r.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function a(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:o(e.components),r.createElement(i.Provider,{value:n},e.children)}}}]);