Skip to content

docs: Interactive examples #532

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
MatiPl01 wants to merge 4 commits into from
Closed

docs: Interactive examples #532

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0abefd5
Add intreactive examples in docs
MatiPl01 Dec 28, 2025
b608ac4
Fix docsaurus build issue
MatiPl01 Feb 12, 2026
ca07f53
Improve code wrapping, copying and state resetting
MatiPl01 Feb 12, 2026
143b377
Add interactive example component
MatiPl01 Feb 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,8 @@
"example/paper",
"example/expo",
"example/web",
"packages/react-native-sortables"
"packages/react-native-sortables",
"packages/docs"
]
}
}
4 changes: 4 additions & 0 deletions packages/docs/babel.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
module.exports = {
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
plugins: ['react-native-worklets/plugin']
};
102 changes: 8 additions & 94 deletions packages/docs/docs/grid/examples/active-item-portal.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,99 +11,13 @@ This example demonstrates how to use the active item portal to render the active

In this case, the `PortalProvider` is used to render the active item outside of the `ScrollView` content bounds. This is the only way to render only the active item without cropping it whilst keeping the rest of the grid within the `ScrollView` content bounds.

## Source Code
## Example

```tsx
import { useCallback, useState } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import Animated, { useAnimatedRef } from 'react-native-reanimated';
import type { SortableGridRenderItem } from 'react-native-sortables';
import Sortable from 'react-native-sortables';
import InteractiveExample from '@site/src/components/InteractiveExample';
import ActiveItemPortalExample from '@site/src/examples/ActiveItemPortal';
import ActiveItemPortalCode from '!!raw-loader!@site/src/examples/ActiveItemPortal';

const DATA = Array.from({ length: 18 }, (_, index) => `Item ${index + 1}`);

export default function Example() {
const [portalEnabled, setPortalEnabled] = useState(false);
const scrollableRef = useAnimatedRef<Animated.ScrollView>();

const renderItem = useCallback<SortableGridRenderItem<string>>(
({ item }) => (
<View style={styles.card}>
<Text style={styles.text}>{item}</Text>
</View>
),
[]
);

return (
<View style={styles.container}>
{/* highlight-start */}
<Sortable.PortalProvider enabled={portalEnabled}>
{/* highlight-end */}
<View style={styles.gridContainer}>
<Animated.ScrollView
contentContainerStyle={styles.contentContainer}
ref={scrollableRef}>
<Sortable.Grid
columnGap={10}
columns={3}
data={DATA}
renderItem={renderItem}
rowGap={10}
scrollableRef={scrollableRef}
/>
</Animated.ScrollView>
</View>
<Pressable onPress={() => setPortalEnabled(prev => !prev)}>
<Text
style={
styles.buttonText
}>{`${portalEnabled ? 'Disable' : 'Enable'} Portal`}</Text>
</Pressable>
{/* highlight-start */}
</Sortable.PortalProvider>
{/* highlight-end */}
</View>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: '#DDE2E3'
},
gridContainer: {
margin: 15,
borderRadius: 10,
height: 400,
backgroundColor: '#FFFFFF'
},
card: {
alignItems: 'center',
backgroundColor: '#36877F',
borderRadius: 10,
height: 100,
justifyContent: 'center'
},
contentContainer: {
padding: 10
},
text: {
color: 'white',
fontWeight: 'bold'
},
buttonText: {
color: '#36877F',
fontSize: 18,
fontWeight: 'bold'
}
});
```

## Result

import video from '@site/static/video/grid-active-item-portal.mp4';

<video autoPlay loop muted width='300px' src={video} />
<InteractiveExample
component={ActiveItemPortalExample}
code={ActiveItemPortalCode}
/>
92 changes: 4 additions & 88 deletions packages/docs/docs/grid/examples/auto-scroll.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,100 +5,16 @@ description: ''

# Auto Scroll

## Description

This example demonstrates how to use the **auto scroll** feature of the **SortableGrid** component.

## Source Code

```tsx
import { useCallback } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Animated, { useAnimatedRef } from 'react-native-reanimated';
import type { SortableGridRenderItem } from 'react-native-sortables';
import Sortable from 'react-native-sortables';

const DATA = Array.from({ length: 30 }, (_, index) => `Item ${index + 1}`);

export default function Example() {
const scrollableRef = useAnimatedRef<Animated.ScrollView>();

const renderItem = useCallback<SortableGridRenderItem<string>>(
({ item }) => (
<View style={styles.card}>
<Text style={styles.text}>{item}</Text>
</View>
),
[]
);
import InteractiveExample from '@site/src/components/InteractiveExample';
import AutoScrollExample from '@site/src/examples/AutoScroll';
import AutoScrollCode from '!!raw-loader!@site/src/examples/AutoScroll';

return (
<Animated.ScrollView
contentContainerStyle={styles.contentContainer}
ref={scrollableRef}>
<Sortable.Grid
columnGap={10}
columns={3}
data={DATA}
renderItem={renderItem}
rowGap={10}
scrollableRef={scrollableRef} // required for auto scroll
// autoScrollActivationOffset={75}
// autoScrollSpeed={1}
// autoScrollEnabled={true}
/>
</Animated.ScrollView>
);
}

const styles = StyleSheet.create({
card: {
alignItems: 'center',
backgroundColor: '#36877F',
borderRadius: 10,
height: 100,
justifyContent: 'center'
},
contentContainer: {
padding: 10
},
text: {
color: 'white',
fontWeight: 'bold'
}
});
```

## Result
<InteractiveExample component={AutoScrollExample} code={AutoScrollCode} />

:::info

The animation is a **little choppy** in development mode on the New Architecture (this is caused by `react-native-reanimated`). It is butter **smooth** on the Old Architecture. It also **looks better** in **release builds**.

:::

### Default

import defaultVideo from '@site/static/video/grid-auto-scroll-default.mp4';

<video autoPlay loop muted width='300px' src={defaultVideo} />

### Custom autoScrollActivationOffset

```tsx
autoScrollActivationOffset={200}
```

import offsetVideo from '@site/static/video/grid-auto-scroll-offset.mp4';

<video autoPlay loop muted width='300px' src={offsetVideo} />

### Custom autoScrollSpeed

```tsx
autoScrollSpeed={0.2}
```

import speedVideo from '@site/static/video/grid-auto-scroll-speed.mp4';

<video autoPlay loop muted width='300px' src={speedVideo} />
71 changes: 4 additions & 67 deletions packages/docs/docs/grid/examples/custom-handle.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,73 +5,10 @@ description: ''

# Custom Handle

## Description

The **Custom Handle** example demonstrates how to use a custom item drag handle.

## Source Code

```tsx
import { faGripVertical } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
import { useCallback } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import type { SortableGridRenderItem } from 'react-native-sortables';
import Sortable from 'react-native-sortables';

const DATA = Array.from({ length: 8 }, (_, index) => `Item ${index + 1}`);

export default function Example() {
const renderItem = useCallback<SortableGridRenderItem<string>>(
({ item }) => (
<View style={styles.card}>
<Text style={styles.text}>{item}</Text>
{/* Wraps the handle component (an icon in this case) */}
<Sortable.Handle>
<FontAwesomeIcon color='white' icon={faGripVertical} />
</Sortable.Handle>
</View>
),
[]
);

return (
<View style={styles.container}>
<Sortable.Grid
activeItemScale={1.05}
columns={1}
data={DATA}
overDrag='vertical'
renderItem={renderItem}
rowGap={10}
customHandle // must be set to use a custom handle
/>
</View>
);
}

const styles = StyleSheet.create({
card: {
alignItems: 'center',
backgroundColor: '#36877F',
borderRadius: 12,
flexDirection: 'row',
justifyContent: 'center',
padding: 24
},
container: {
padding: 16
},
text: {
color: 'white',
flex: 1,
fontWeight: 'bold'
}
});
```

## Result

import handleVideo from '@site/static/video/grid-custom-handle.mp4';
import InteractiveExample from '@site/src/components/InteractiveExample';
import CustomHandleExample from '@site/src/examples/CustomHandle';
import CustomHandleCode from '!!raw-loader!@site/src/examples/CustomHandle';

<video autoPlay loop muted width='300px' src={handleVideo} />
<InteractiveExample component={CustomHandleExample} code={CustomHandleCode} />
Loading
Loading