Skip to content
This repository was archived by the owner on Nov 3, 2025. It is now read-only.

Commit 88866c5

Browse files
tpuccitpucci
authored
Merge pull request #158 from tpucci/example-instagram
V2
2 parents a7d01ab + 5268fb0 commit 88866c5

72 files changed

Lines changed: 1910 additions & 1379 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.eslintrc.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ module.exports = {
1717
'@typescript-eslint/indent': 'off',
1818
'@typescript-eslint/explicit-function-return-type': 'off',
1919
'@typescript-eslint/explicit-member-accessibility': 'off',
20+
'@typescript-eslint/no-explicit-any': 'off',
21+
'@typescript-eslint/no-empty-interface': 'off',
2022
},
2123
settings: {
2224
react: {
@@ -26,6 +28,7 @@ module.exports = {
2628
env: {
2729
browser: true,
2830
node: true,
31+
es6: true,
2932
},
3033
overrides: [
3134
{

‎README.md‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,15 @@
1414

1515
## Philosophy
1616

17-
This repo focuses on grouping pages by business conversion tunnels called **canals**. When navigating in Venice, you can not teleport yourself from the beginning of a canal to the end of it. You are forced to either go ahead or go back; and doing so you might discover another canal 😲. **When you use React Gondola**, you define several gondoliers and how each one of them is authorized to move accross its own canal.
17+
This repo focuses on grouping screens by business conversion tunnels called **canals**. Why did I call it `react-gondola`? Just because I though of this package when I was visiting Venice... and I kind of hope that using this package will feel like navigating in Venice 📸
18+
19+
**When you use React Gondola**, you define several screens and you have the possibility to control their visibility with YOUR state machine. You define the rules of WHEN some screens should appear; `react-gondola` takes care of the rest.
1820

1921
## 👍 TLDR; Use this package if:
2022

21-
- you want to group pages by **business** conversion tunnels rather than transition.
22-
- you want to control your navigation state with a **state machine**.
23-
- you want your navigation to **react** to your store changes.
23+
- you want to group screens by **business** conversion tunnels rather than transition.
24+
- you want to control your navigation state with YOUR **state machine**.
25+
- you want your navigation to **react** to YOUR store changes.
2426

2527
## 👎 Do not use this repo if:
2628

‎docs/GettingStarted.mdx‎

Lines changed: 73 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,9 @@ route: /getting-started
99

1010
React-gondola needs the following dependencies; if you do not have those installed, you need to install them with the correspondig command:
1111

12-
| Dependencie name | Yarn Installation command | NPM Installation command |
13-
| :--------------: | :--------------------------: | :-----------------------: |
14-
| `mobx` | `yarn add mobx@5.0.0` | `npm i mobx@5.0.0` |
15-
| `mobx-react` | `yarn add mobx-reactx@5.0.0` | `npm i mobx-reactx@5.0.0` |
16-
| `mobx-utils` | `yarn add mobx-utilsx@5.0.0` | `npm i mobx-utilsx@5.0.0` |
17-
| `rxjs` | `yarn add rxjs` | `npm i rxjs` |
12+
| Dependencie name | Yarn Installation command | NPM Installation command |
13+
| :--------------: | :-----------------------: | :----------------------: |
14+
| `rxjs` | `yarn add rxjs` | `npm i rxjs` |
1815

1916
Then, install React-Gondola with:
2017

@@ -28,68 +25,99 @@ or
2825

2926
### Create a canal
3027

31-
In order to create a canal, use the `createCanal` function. Pass it your screens in the business order.
28+
In order to create a canal, use the `Canal` and `Screen` components. Your screens order is important: the order is the elevation order. If two or more screens are visible, last visible in the array is shown.
3229

3330
```ts
34-
import React from "react";
35-
import { createCanal } from "react-gondola";
36-
import { FirstName } from "./FirstName";
37-
import { LastName } from "./LastName";
38-
39-
const SignInCanal = createCanal([
40-
{ name: "firstName", Component: FirstName },
41-
{ name: "lastName", Component: LastName }
42-
]);
43-
```
44-
45-
Then, use the canal wherever you want in your app. Specify whether to show/hide a screen by using the screen's name as a prop:
46-
47-
```ts
48-
import React, { Component } from "react";
49-
import { SignInCanal } from "./canals/SignIn";
50-
51-
export default class App extends Component {
52-
render() {
53-
return <SignInCanal firstName={true} lastName={false} />;
54-
}
55-
}
31+
import React from 'react';
32+
import { Canal, Screen } from 'react-gondola';
33+
import { FirstName } from './FirstName';
34+
import { LastName } from './LastName';
35+
36+
const SignInCanal = () => (
37+
<Canal>
38+
<Screen name="firstname" Component={FirstName} visible />
39+
<Screen name="lastname" Component={LastName} visible={false} />
40+
</Canal>
41+
);
5642
```
5743

5844
That's all !
5945

6046
### Add a full screen page
6147

62-
If you want to add full screen page, pass the `isFullScreen` flag to the right page when creating a canal. In the following example, `confirm` is a full screen page.
48+
If you want to add full screen page, pass the `isFullScreen` flag prop to your `Screen` when creating a canal. In the following example, `lastname` is a full screen page.
6349

6450
```ts
65-
import React from "react";
66-
import { createCanal } from "react-gondola";
67-
import { FirstName } from "./FirstName";
68-
import { LastName } from "./LastName";
69-
70-
const SignInCanal = createCanal([
71-
{ name: "firstName", Component: FirstName },
72-
{ name: "lastName", Component: LastName },
73-
{ name: "confirm", Component: Confirm, isFullScreen: true }
74-
]);
51+
import React from 'react';
52+
import { Canal, Screen } from 'react-gondola';
53+
import { FirstName } from './FirstName';
54+
import { LastName } from './LastName';
55+
56+
const SignInCanal = () => (
57+
<Canal>
58+
<Screen name="firstname" Component={FirstName} visible />
59+
<Screen name="lastname" Component={LastName} visible={false} isFullScreen />
60+
</Canal>
61+
);
7562
```
7663

77-
In order to render the full screen page at the top level in your app, add the `FullScreenPortal` at the top level in your rendering tree.
64+
In order to render the full screen page, add the `FullScreenPortal` at the top level in your rendering tree.
7865

7966
```ts
80-
import React, { Component } from "react";
81-
import { SignInCanal } from "./canals/SignIn";
82-
import { FullScreenPortal } from "react-gondola";
67+
import React, { Component } from 'react';
68+
import { MyCanal } from './canals/MyCanal';
69+
import { FullScreenPortal } from 'react-gondola';
8370

8471
export default class App extends Component {
8572
render() {
8673
return (
8774
<FullScreenPortal>
88-
<SignInCanal firstName lastName confirm />
75+
<MyCanal />
8976
</FullScreenPortal>
9077
);
9178
}
9279
}
9380
```
9481

82+
### Go Back
83+
84+
Back events are also managed in a declarative way. Use the `onBack` callback prop on your screen.
85+
86+
```ts
87+
import React from 'react';
88+
import { Canal, Screen } from 'react-gondola';
89+
import { FirstName } from './FirstName';
90+
import { LastName } from './LastName';
91+
92+
const SignInCanal = () => (
93+
<Canal>
94+
<Screen name="firstname" Component={FirstName} visible />
95+
<Screen
96+
name="lastname"
97+
Component={LastName}
98+
visible={false}
99+
onBack={() => {
100+
doSomething();
101+
}}
102+
/>
103+
</Canal>
104+
);
105+
```
106+
107+
import { Info } from 'components/Info';
108+
import { Warning } from 'components/Warning';
109+
110+
<Warning>
111+
You should use a state machine in order to make your canal a controlled component. In fact, your
112+
`onBack` callbacks should modify your state in a way it affects the visibility of your screens.
113+
See the example in the repo.
114+
</Warning>
115+
<Info>
116+
If you have nested or multiple canals, here is the priority of `onBack` callbacks:
117+
<br/>
118+
- Last visible full-screen screen.
119+
<br/>
120+
- Deepest visible screen.
121+
</Info>
122+
95123
You are ready to use React-Gondola 🎸.

‎docs/Welcome.mdx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,17 @@ React Native declarative and reactive navigation.
99

1010
## Philosophy
1111

12-
This repo focuses on grouping pages by business conversion tunnels called **canals**. When navigating in Venice, you can not teleport yourself from the beginning of a canal to the end of it. You are forced to either go ahead or go back; and doing so you might discover another canal 😲. **When you use React Gondola**, you define several gondoliers and how each one of them is authorized to move accross its own canal.
12+
This repo focuses on grouping screens by business conversion tunnels called **canals**. Why did I call it `react-gondola`? Just because I though of this package when I was visiting Venice... and I kind of hope that using this package will feel like navigating in Venice 📸
13+
14+
**When you use React Gondola**, you define several screens and you have the possibility to control their visibility with YOUR state machine. You define the rules of WHEN some screens should appear; `react-gondola` takes care of the rest.
1315

1416
## When to use this package
1517

1618
### 👍 TLDR; Use this package if:
1719

18-
- you want to group pages by **business** conversion tunnels rather than transition.
19-
- you want to control your navigation state with a **state machine**.
20-
- you want you navigation to **react** to your store changes.
20+
- you want to group screens by **business** conversion tunnels rather than transition.
21+
- you want to control your navigation state with YOUR **state machine**.
22+
- you want your navigation to **react** to YOUR store changes.
2123

2224
### 👎 Do not use this repo if:
2325

‎docs/components/Info.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import { Text, View } from 'react-native';
3+
4+
export function Info(props: { children: string }) {
5+
return (
6+
<View
7+
style={{
8+
padding: 8,
9+
backgroundColor: '#eee',
10+
borderLeftWidth: 3,
11+
borderLeftColor: '#00b0ff',
12+
borderRadius: 4,
13+
marginBottom: 16,
14+
}}
15+
>
16+
<Text style={{ fontWeight: 'bold', fontSize: 16 }}>ℹ Info</Text>
17+
<Text style={{ marginTop: 4 }}>{props.children}</Text>
18+
</View>
19+
);
20+
}

‎docs/components/Warning.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react';
2+
import { Text, View } from 'react-native';
3+
4+
export function Warning(props: { children: string }) {
5+
return (
6+
<View
7+
style={{
8+
padding: 8,
9+
backgroundColor: '#eee',
10+
borderLeftWidth: 3,
11+
borderLeftColor: '#fdcb00',
12+
borderRadius: 4,
13+
marginBottom: 16,
14+
}}
15+
>
16+
<Text style={{ fontWeight: 'bold', fontSize: 16 }}>⚠️ Warning</Text>
17+
<Text style={{ marginTop: 4 }}>{props.children}</Text>
18+
</View>
19+
);
20+
}

‎docs/guides/Transitions.mdx‎

Lines changed: 19 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,21 +6,23 @@ route: /guides/transitions
66

77
# Transitions
88

9-
In order to use transitions between two screens, simply add the `Transitioner` key to your stops.
9+
In order to use transitions between two screens, simply add the `Transitioner` key to your screens.
1010

1111
## Basic example
1212

1313
```ts
14-
import React from "react";
15-
import { createCanal } from "react-gondola";
16-
import { SildeLeft } from "react-gondola/transitions";
17-
import { FirstName } from "./FirstName";
18-
import { LastName } from "./LastName";
19-
20-
const SignInCanal = createCanal([
21-
{ name: "firstName", Component: FirstName },
22-
{ name: "lastName", Component: LastName, Transitioner: SildeLeft }
23-
]);
14+
import React from 'react';
15+
import { Canal, Screen } from 'react-gondola';
16+
import { SildeLeft } from 'react-gondola/transitions';
17+
import { FirstName } from './FirstName';
18+
import { LastName } from './LastName';
19+
20+
const SignInCanal = () => (
21+
<Canal>
22+
<Screen name="firstname" Component={FirstName} Transitioner={SlideLeft} />
23+
<Screen name="lastname" Component={LastName} Transitioner={SlideLeft} />
24+
</Canal>
25+
);
2426
```
2527

2628
## Available transitioners
@@ -29,6 +31,7 @@ const SignInCanal = createCanal([
2931
| :-------------------------------------------------------------------: | ---------------------------------------------------------- | :--------------------------------------------------: |
3032
| `SildeLeft` | `import { SildeLeft } from "react-gondola/transitions";` | ![Slide Left transition](./assets/slideLeft.gif) |
3133
| `SildeUp` | `import { SildeUp } from "react-gondola/transitions";` | ![Slide Up transition](./assets/slideUp.gif) |
34+
| `ConvexUp` | `import { ConvexUp } from "react-gondola/transitions";` | |
3235
| `RotateCrazy` (⚠️ experimental: this might be removed without notice) | `import { RotateCrazy } from "react-gondola/transitions";` | ![Rotate Crazy transition](./assets/rotateCrazy.gif) |
3336

3437
## Create your own transitioner
@@ -44,16 +47,16 @@ You can create your own transitioner if the one availables does not fit your nee
4447
```js
4548
// in your jest setup file, use the following
4649

47-
jest.mock("react-native-reanimated/src/ReanimatedEventEmitter");
48-
jest.mock("react-native-reanimated/src/ReanimatedModule", () => ({
50+
jest.mock('react-native-reanimated/src/ReanimatedEventEmitter');
51+
jest.mock('react-native-reanimated/src/ReanimatedModule', () => ({
4952
configureNativeProps: () => {},
5053
connectNodes: () => {},
5154
disconnectNodes: () => {},
5255
createNode: () => {},
5356
configureProps: () => {},
5457
getValue: () => {},
55-
dropNode: () => {}
58+
dropNode: () => {},
5659
}));
57-
jest.mock("react-native-reanimated/src/derived/evaluateOnce");
58-
jest.mock("react-native-reanimated/src/core/AnimatedProps");
60+
jest.mock('react-native-reanimated/src/derived/evaluateOnce');
61+
jest.mock('react-native-reanimated/src/core/AnimatedProps');
5962
```

‎docs/mocks/react-native-reanimated.js‎

Whitespace-only changes.

‎doczrc.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,16 @@ module.exports = {
1010
'Example',
1111
'Contribute',
1212
'Roadmap',
13-
{ name: 'API', menu: ['createCanal', 'FullScreenPortal'] },
13+
{ name: 'API', menu: ['Screen', 'FullScreenPortal'] },
1414
],
1515
modifyBundlerConfig: config => {
1616
// Combine the default docz aliases with our custom aliases.
1717
config.resolve.alias = Object.assign({}, config.resolve.alias, {
18+
components: path.resolve(__dirname, 'docs/components/'),
1819
'react-native$': 'react-native-web',
1920
'react-gondola$': path.resolve(__dirname, 'src/index.ts'), // eslint-disable-line
2021
'react-gondola/transitions$': path.resolve(__dirname, 'src/transitions/index.ts'), // eslint-disable-line
22+
'react-native-reanimated$': path.resolve(__dirname, 'docs/mocks/react-native-reanimated'), // eslint-disable-line
2123
});
2224
return config;
2325
},

‎example/metro.config.js‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,6 @@ module.exports = {
2121
// asked by the "../src" but which
2222
// are not present in the ROOT/node_modules
2323
// See https://github.com/facebook/metro/issues/7#issuecomment-464668678.
24-
mobx: path.resolve(__dirname, '../node_modules/mobx'),
25-
'mobx-react': path.resolve(__dirname, '../node_modules/mobx-react'),
26-
'mobx-utils': path.resolve(__dirname, '../node_modules/mobx-utils'),
2724
react: path.resolve(__dirname, '../node_modules/react'),
2825
'react-native': path.resolve(__dirname, 'node_modules/react-native'),
2926
'@babel/plugin-proposal-decorators': path.resolve(

0 commit comments

Comments
 (0)