Skip to content
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

Restyle steps in docs #2774

Merged
merged 1 commit into from
Feb 21, 2024
Merged

Restyle steps in docs #2774

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
16 changes: 0 additions & 16 deletions docs/docs/fundamentals/manual-gestures/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,59 +16,43 @@ import Step7 from './\_steps/step7.md';

RNGH2 finally brings one of the most requested features: manual gestures and touch events. To demonstrate how to make a manual gesture we will make a simple one that tracks all pointers on the screen.

<Divider />

<Step title="Step 1">
First, we need a way to store information about the pointer: whether it should be visible and its position.
<Step1 />
</Step>

<Divider />

<Step title="Step 2">
We also need a component to mark where a pointer is. In order to accomplish that we will make a component that accepts two shared values: one holding information about the pointer using the interface we just created, the other holding a bool indicating whether the gesture has activated.
In this example when the gesture is not active, the ball representing it will be blue and when it is active the ball will be red and slightly bigger.
<Step2 />
</Step>

<Divider />

<Step title="Step 3">
Now we have to make a component that will handle the gesture and draw all the pointer indicators. We will store data about pointers in an array of size 12 as that is the maximum number of touches that RNGH will track, and render them inside an Animated.View.
<Step3 />
</Step>

<Divider />

<Step title="Step 4">
We have our components set up and we can finally get to making the gesture! We will start with onTouchesDown where we need to set position of the pointers and make them visible. We can get this information from the touches property of the event. In this case we will also check how many pointers are on the screen and activate the gesture if there are at least two.
<Step4 />
</Step>

<Divider />

<Step title="Step 5">
Next, we will handle pointer movement. In onTouchesMove we will simply update the position of moved pointers.
<Step5 />
</Step>

<Divider />

<Step title="Step 6">
We also need to handle lifting fingers from the screen, which corresponds to onTouchesUp. Here we will just hide the pointers that were lifted and end the gesture if there are no more pointers on the screen.
Note that we are not handling onTouchesCancelled as in this very basic case we don't expect it to happen, however you should clear data about cancelled pointers (most of the time all active ones) when it is called.
<Step6 />
</Step>

<Divider />

<Step title="Step 7">
Now that our pointers are being tracked correctly and we have the state management, we can handle activation and ending of the gesture. In our case, we will simply set the active shared value either to true or false.
<Step7 />
</Step>

<Divider />

And that's all! As you can see using manual gestures is really easy but as you can imagine, manual gestures are a powerful tool that makes it possible to accomplish things that were previously impossible with RNGH.

## Modifying existing gestures
Expand Down
14 changes: 1 addition & 13 deletions docs/docs/fundamentals/quickstart/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,22 +16,16 @@ RNGH2 provides much simpler way to add gestures to your app. All you need to do

To demonstrate how you would use the new API, let's make a simple app where you can drag a ball around. You will need to add `react-native-gesture-handler` (for gestures) and `react-native-reanimated` (for animations) modules.

<Divider />

<Step title="Step 1">
<div>First let's define styles we will need to make the app:</div>
<Step1 />
</Step>

<Divider />

<Step title="Step 2">
<div>Then we can start writing our `Ball` component:</div>
<div>Then we can start writing our <code>Ball</code> component:</div>
<Step2 />
</Step>

<Divider />

<Step title="Step 3">
<div>
We also need to define{' '}
Expand All @@ -44,15 +38,11 @@ To demonstrate how you would use the new API, let's make a simple app where you
<Step3 />
</Step>

<Divider />

<Step title="Step 4">
<div>And add it to the ball's styles:</div>
<Step4 />
</Step>

<Divider />

<Step title="Step 5">
<div>
The only thing left is to define the pan gesture and assign it to the
Expand All @@ -61,8 +51,6 @@ To demonstrate how you would use the new API, let's make a simple app where you
<Step5 />
</Step>

<Divider />

Note the `start` shared value. We need it to store the position of the ball at the moment we grab it to be able to correctly position it later, because we only have access to translation relative to the starting point of the gesture.

Now you can just add `Ball` component to some view in the app and see the results! (Or you can just check the code [here](https://github.com/software-mansion/react-native-gesture-handler/blob/main/example/src/new_api/reanimated/index.tsx) and see it in action in the Example app.)
16 changes: 5 additions & 11 deletions docs/src/theme/Step/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,19 @@
import React from 'react';

import styles from './styles.module.css';
import clsx from 'clsx';

const MARGIN_BOTTOM = 60;
const Step = ({ children, title }) => {
return (
<div className={clsx(styles.container)}>
<div className={clsx(styles.description)}>
<div className={clsx(styles.roundedStep)}>
<div className={clsx(styles.stepTitle)}>{title}</div>
<div className={styles.container}>
<div className={styles.description}>
<div className={styles.step}>
<div className={styles.stepTitle}>{title}</div>
{children[0]}
</div>
</div>
<div className={clsx(styles.code)}>{children[1]}</div>
<div className={styles.code}>{children[1]}</div>
</div>
);
};

export const Divider = () => {
return <div className={clsx(styles.divider)}></div>;
};

export default Step;
30 changes: 7 additions & 23 deletions docs/src/theme/Step/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,11 @@
display: flex;
flex-direction: row;
margin-bottom: 20px;
gap: 24px;
}

.divider {
flex: 1;
height: 1px;
border: 1px #dcdfeb;
border-style: none none solid none;
margin-bottom: 40px;
margin-left: 2%;
margin-right: 2%;
.container:first-of-type {
margin-top: 42px;
}

@media only screen and (max-width: 1200px) {
Expand All @@ -20,7 +15,7 @@
align-items: center;
}

.roundedStep {
.step {
position: static !important;
}

Expand All @@ -31,34 +26,23 @@
.description {
flex: 2;
display: flex;
margin-bottom: 20px;
height: fit-content;
max-width: 450px;
width: 100%;
}

.roundedStep {
.step {
flex: 1;
border-radius: 10px;
height: fit-content;
position: relative;
top: 30px;
padding: 10px;
background-color: #dcdfeb;
border-left: 6px solid #dcdfeb;
font-size: 16px;
line-height: 1.5;
font-weight: 400;
letter-spacing: -0.2px;
margin-right: 20px;
}

.stepTitle {
font-size: 12px;
line-height: 1.33;
font-weight: 600;
letter-spacing: -0.1px;
margin-bottom: 10px;
font-weight: bold;
margin-bottom: 12px;
}

.code {
Expand Down
Loading