diff --git a/docs/blog/accordion.md b/docs/blog/accordion.md new file mode 100644 index 000000000000..116f22185a6a --- /dev/null +++ b/docs/blog/accordion.md @@ -0,0 +1,31 @@ +--- +slug: accordion +title: Accordion +--- + +An accordion allows to show and hide a piece of content with a smooth animation. Commonly used in "FAQ" sections. + +import Accordion from '@site/static/examples/Accordion'; +import AccordionSrc from '!!raw-loader!@site/static/examples/Accordion'; +import ExampleVideo from '@site/src/components/ExampleVideo'; + +} /> + +The following implementation of an accordion relies on [shared values](/docs/fundamentals/glossary#shared-value). Leveraging shared values helps to prevent unnecessary re-renders. We define shared values using the useSharedValue hook. + + + + + +The **AccordionItem** component encapsulates each item in the accordion. A `height` shared value manages the height of the item. The height dynamically adjusts based on the `isExpanded` prop, resulting in smooth expansion and collapse animations. The `duration` prop controls the duration of the animation. + +Inside the **AccordionItem**, the children represent the content section. It can accommodate various types of content. + +Accordion + + diff --git a/docs/blog/bottom-sheet.md b/docs/blog/bottom-sheet.md new file mode 100644 index 000000000000..91bcdefa3b23 --- /dev/null +++ b/docs/blog/bottom-sheet.md @@ -0,0 +1,34 @@ +--- +slug: bottomsheet +title: Bottom Sheet +--- + +Bottom sheets are surfaces containing supplementary content, anchored to the bottom of the screen. They can provide users with quick access to contextual information, actions, or settings without interrupting their current workflow. + +import BottomSheet from '@site/static/examples/BottomSheet'; +import BottomSheetSrc from '!!raw-loader!@site/static/examples/BottomSheet'; +import ExampleVideo from '@site/src/components/ExampleVideo'; +import CollapsibleCode from '@site/src/components/CollapsibleCode'; + +} /> + +The **BottomSheet** component accepts props such as `isOpen` - a [shared value](/docs/fundamentals/glossary#shared-value) indicating whether the bottom sheet is open or closed, `toggleSheet` - a function to toggle the visibility of the bottom sheet, and an optional `duration` for animation. + +Bottom Sheet + + + +The `height` shared value is used to track the height of the bottom sheet, while the `progress` derived value interpolates between 0 and 1 based on the state of `isOpen`, controlling the animation of the bottom sheet. + + + + + +The `useAnimatedStyle` hook helps in creating [animated styles](https://docs.swmansion.com/react-native-reanimated/docs/core/useAnimatedStyle/) based on shared values. These styles are then applied to **BottomSheet** to make it visually dynamic by adding backdrop and translating bottom sheet to the top. + + diff --git a/docs/blog/marquee.md b/docs/blog/marquee.md new file mode 100644 index 000000000000..aef310aad9f7 --- /dev/null +++ b/docs/blog/marquee.md @@ -0,0 +1,43 @@ +--- +slug: marquee +title: Marquee +--- + +A marquee is an element used to display scrolling content horizontally within a confined space. It's commonly seen in applications to information such as news tickers, advertisements, or any content that needs continuous display within a limited area. + +import Marquee from '@site/static/examples/Marquee'; +import MarqueeSrc from '!!raw-loader!@site/static/examples/Marquee'; +import ExampleVideo from '@site/src/components/ExampleVideo'; +import CollapsibleCode from '@site/src/components/CollapsibleCode'; + +} /> + +Now, let's understand how this example works: + +The **MeasureElement** component measures the width of its children and passes this information to its parent component, Marquee. + +Marquee + + + + + +We use the `useFrameCallback` hook to execute the animation logic on each frame. + + + +It is located inside **ChildrenScroller** component that manages the scrolling animation by updating the offset value. It determines the horizontal translation of the child components, creates clones of the children and animates them horizontally based on the specified duration. + +Marquee + + +The **Marquee** component serves as the main orchestrator of the marquee effect. It calculates necessary dimensions, renders child components within a container, and coordinates the animation by utilizing the ChildrenScroller component. + +Marquee + + diff --git a/docs/blog/section-list.md b/docs/blog/section-list.md new file mode 100644 index 000000000000..cc7a32118346 --- /dev/null +++ b/docs/blog/section-list.md @@ -0,0 +1,60 @@ +--- +slug: sectionlist +title: Section List +--- + +import SectionList from '@site/static/examples/SectionList'; +import SectionListSrc from '!!raw-loader!@site/static/examples/SectionList'; +import ExampleVideo from '@site/src/components/ExampleVideo'; +import CollapsibleCode from '@site/src/components/CollapsibleCode'; + +Section lists allow you to organize long lists of content by dividing them with headings. + +} /> + +The primary component, **SectionList**, acts as the main orchestrator of the entire Section List interface. It coordinates the rendering of the table of contents and individual content sections. + +Section List + + + +Within **SectionList**, there are two key components: **TableOfContents** and **SectionCards**. + +**TableOfContents** is responsible for rendering the list of section names as a table of contents. It receives props such as `data`, `visibleIndex`, `sectionCardsRef`, and `tableOfContentsRef` to manage navigation and synchronization between the table of contents and section content. + +Section List + + + +**SectionCards**, on the other hand, manages the rendering of individual sections and their corresponding content. It receives props: `sections`, `visibleIndex`, `sectionCardsRef`, and `tableOfContentsRef` to render the content sections and handle scrolling interactions. + +Section List + + + + + +The `onScroll` in **SectionCards** calculates the offset as the user scrolls through the content and determines which section is currently most visible on the screen. It is done by comparing the distance of each section from the top of the screen - it identifies the section closest to the viewport's top edge. + + + +We use the `useSharedValue` hook to create mutable shared values across different components. For instance, `selectedItem` and `visibleIndex` are [shared values](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#shared-value) used to manage the currently selected section and its visibility index. + + + +Additionally, we use `useAnimatedStyle` hook to define [animated styles](https://docs.swmansion.com/react-native-reanimated/docs/core/useAnimatedStyle/) based on the shared values. Then, we apply these animated styles to components to create dynamic visual effects, such as changing font weights and adding bottom borders. + + + +To enable interaction with the FlashList component - such as scrolling to specific sections, the code utilizes variables created using `useRef` such as `sectionCardsRef` and `tableContentsRef` + + + +Here, the `debounce` function throttles the invocations of `onScroll` event handler which improves the perfomrance. + + diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index aad47ca6b9d7..aa44e535fb8e 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -22,6 +22,13 @@ const config = { organizationName: 'software-mansion', // Usually your GitHub org/user name. projectName: 'react-native-reanimated', // Usually your repo name. + scripts: [ + { + src: '/react-native-reanimated/js/snack-helpers.js', + async: true, + }, + ], + onBrokenLinks: 'throw', onBrokenMarkdownLinks: 'throw', @@ -58,10 +65,15 @@ const config = { trackingID: 'UA-41044622-6', anonymizeIP: true, }, + blog: { + routeBasePath: '/examples', + blogSidebarTitle: 'Examples', + blogSidebarCount: 'ALL', + showReadingTime: false, + }, }), ], ], - themeConfig: /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ ({ @@ -79,6 +91,13 @@ const config = { srcDark: 'img/logo-dark.svg', }, items: [ + { + to: 'docs/fundamentals/getting-started', + activeBasePath: 'docs', + label: 'Docs', + position: 'left', + }, + { to: 'examples/accordion', label: 'Examples', position: 'left' }, { type: 'docsVersionDropdown', position: 'right', diff --git a/docs/package.json b/docs/package.json index cad9e2ae003d..1754f19f3fff 100644 --- a/docs/package.json +++ b/docs/package.json @@ -29,6 +29,7 @@ "@emotion/styled": "^11.10.6", "@mdx-js/react": "^1.6.22", "@mui/material": "^5.12.0", + "@shopify/flash-list": "^1.6.3", "babel-polyfill": "^6.26.0", "babel-preset-expo": "^9.2.2", "babel-preset-react-native": "^4.0.1", diff --git a/docs/src/components/ExampleVideo/index.tsx b/docs/src/components/ExampleVideo/index.tsx new file mode 100644 index 000000000000..7046b7433537 --- /dev/null +++ b/docs/src/components/ExampleVideo/index.tsx @@ -0,0 +1,43 @@ +import React from 'react'; + +interface Props { + sources: { + android: string; + ios: string; + }; +} + +export default function ExampleVideo({ sources }: Props) { + return ( +
+ + +
+ ); +} diff --git a/docs/src/css/examples.css b/docs/src/css/examples.css new file mode 100644 index 000000000000..002359bfc9de --- /dev/null +++ b/docs/src/css/examples.css @@ -0,0 +1,13 @@ +time { + display: none; +} + +.pagination-nav { + display: none; +} + +.navbar-sidebar__rightItems { + display: flex; + flex-direction: row; + gap: 1rem; +} diff --git a/docs/src/css/index.css b/docs/src/css/index.css index 7e701e6d523b..decfb24469f1 100644 --- a/docs/src/css/index.css +++ b/docs/src/css/index.css @@ -1,3 +1,4 @@ @import 'colors.css'; @import 'typography.css'; @import 'overrides.css'; +@import 'examples.css'; diff --git a/docs/src/css/overrides.css b/docs/src/css/overrides.css index 4942fd32b4d9..adb249459c66 100644 --- a/docs/src/css/overrides.css +++ b/docs/src/css/overrides.css @@ -100,3 +100,8 @@ table thead tr { border: none; margin-bottom: 8px; } + +.snack-link { + display: inline-block; + margin-bottom: 25px; +} diff --git a/docs/src/theme/Navbar/Content/index.js b/docs/src/theme/Navbar/Content/index.js index 32a7c1f6fba1..dbaa576ef57c 100644 --- a/docs/src/theme/Navbar/Content/index.js +++ b/docs/src/theme/Navbar/Content/index.js @@ -74,7 +74,7 @@ export default function NavbarContent() {
- + {!isLanding && } {!searchBarItem && !isMobile && !isLanding && } {!isMobile && isDocumentation && ( diff --git a/docs/src/theme/Navbar/MobileSidebar/Layout/index.js b/docs/src/theme/Navbar/MobileSidebar/Layout/index.js index a2a8b96ad11b..319152a9572a 100644 --- a/docs/src/theme/Navbar/MobileSidebar/Layout/index.js +++ b/docs/src/theme/Navbar/MobileSidebar/Layout/index.js @@ -50,9 +50,16 @@ export default function NavbarMobileSidebarLayout({ header, secondaryMenu }) { ); })} - - ); diff --git a/docs/static/examples/Accordion.js b/docs/static/examples/Accordion.js new file mode 100644 index 000000000000..e51af25288df --- /dev/null +++ b/docs/static/examples/Accordion.js @@ -0,0 +1,117 @@ +import React from 'react'; +import { StyleSheet, View, Button, SafeAreaView } from 'react-native'; +import Animated, { + useAnimatedStyle, + useDerivedValue, + useSharedValue, + withTiming, +} from 'react-native-reanimated'; + +function AccordionItem({ + isExpanded, + children, + viewKey, + style, + duration = 500, +}) { + const height = useSharedValue(0); + + const derivedHeight = useDerivedValue(() => + withTiming(height.value * Number(isExpanded.value), { + duration, + }) + ); + const bodyStyle = useAnimatedStyle(() => ({ + height: derivedHeight.value, + })); + + return ( + + { + height.value = e.nativeEvent.layout.height; + }} + style={styles.wrapper}> + {children} + + + ); +} + +function Item() { + return ; +} + +function Parent({ open }) { + return ( + + + + + + ); +} + +export default function App() { + const open = useSharedValue(false); + const onPress = () => { + open.value = !open.value; + }; + + return ( + + +