Skip to content

Commit f48ca3c

Browse files
luizbaldiluizbaldi
committed
Configure basic navigation structure on the example using @react-navigation 
1 parent 1c4dc88 commit f48ca3c

File tree

9 files changed

+295
-935
lines changed

9 files changed

+295
-935
lines changed

‎.eslintrc.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ module.exports = {
2727
ts: 'never',
2828
tsx: 'never'
2929
}
30-
]
30+
],
31+
'no-use-before-define': 'off'
3132
}
3233
};

‎example/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
* @format
33
*/
44

5-
import {AppRegistry} from 'react-native';
5+
import { AppRegistry } from 'react-native';
66
import App from './src/App';
7-
import {name as appName} from './app.json';
7+
import { name as appName } from './app.json';
88

99
AppRegistry.registerComponent(appName, () => App);

‎example/ios/Podfile.lock‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -236,6 +236,8 @@ PODS:
236236
- React-cxxreact (= 0.63.3)
237237
- React-jsi (= 0.63.3)
238238
- React-jsinspector (0.63.3)
239+
- react-native-safe-area-context (3.1.8):
240+
- React-Core
239241
- React-RCTActionSheet (0.63.3):
240242
- React-Core/RCTActionSheetHeaders (= 0.63.3)
241243
- React-RCTAnimation (0.63.3):
@@ -296,6 +298,14 @@ PODS:
296298
- React-Core (= 0.63.3)
297299
- React-cxxreact (= 0.63.3)
298300
- React-jsi (= 0.63.3)
301+
- RNCMaskedView (0.1.10):
302+
- React
303+
- RNGestureHandler (1.8.0):
304+
- React
305+
- RNReanimated (1.13.1):
306+
- React
307+
- RNScreens (2.11.0):
308+
- React
299309
- Yoga (1.14.0)
300310
- YogaKit (1.18.1):
301311
- Yoga (~> 1.14)
@@ -337,6 +347,7 @@ DEPENDENCIES:
337347
- React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
338348
- React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
339349
- React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
350+
- react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
340351
- React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
341352
- React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
342353
- React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`)
@@ -347,6 +358,10 @@ DEPENDENCIES:
347358
- React-RCTText (from `../node_modules/react-native/Libraries/Text`)
348359
- React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
349360
- ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
361+
- "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
362+
- RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
363+
- RNReanimated (from `../node_modules/react-native-reanimated`)
364+
- RNScreens (from `../node_modules/react-native-screens`)
350365
- Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
351366

352367
SPEC REPOS:
@@ -395,6 +410,8 @@ EXTERNAL SOURCES:
395410
:path: "../node_modules/react-native/ReactCommon/jsiexecutor"
396411
React-jsinspector:
397412
:path: "../node_modules/react-native/ReactCommon/jsinspector"
413+
react-native-safe-area-context:
414+
:path: "../node_modules/react-native-safe-area-context"
398415
React-RCTActionSheet:
399416
:path: "../node_modules/react-native/Libraries/ActionSheetIOS"
400417
React-RCTAnimation:
@@ -415,6 +432,14 @@ EXTERNAL SOURCES:
415432
:path: "../node_modules/react-native/Libraries/Vibration"
416433
ReactCommon:
417434
:path: "../node_modules/react-native/ReactCommon"
435+
RNCMaskedView:
436+
:path: "../node_modules/@react-native-community/masked-view"
437+
RNGestureHandler:
438+
:path: "../node_modules/react-native-gesture-handler"
439+
RNReanimated:
440+
:path: "../node_modules/react-native-reanimated"
441+
RNScreens:
442+
:path: "../node_modules/react-native-screens"
418443
Yoga:
419444
:path: "../node_modules/react-native/ReactCommon/yoga"
420445

@@ -445,6 +470,7 @@ SPEC CHECKSUMS:
445470
React-jsi: df07aa95b39c5be3e41199921509bfa929ed2b9d
446471
React-jsiexecutor: b56c03e61c0dd5f5801255f2160a815f4a53d451
447472
React-jsinspector: 8e68ffbfe23880d3ee9bafa8be2777f60b25cbe2
473+
react-native-safe-area-context: 79fea126c6830c85f65947c223a5e3058a666937
448474
React-RCTActionSheet: 53ea72699698b0b47a6421cb1c8b4ab215a774aa
449475
React-RCTAnimation: 1befece0b5183c22ae01b966f5583f42e69a83c2
450476
React-RCTBlob: 0b284339cbe4b15705a05e2313a51c6d8b51fa40
@@ -455,6 +481,10 @@ SPEC CHECKSUMS:
455481
React-RCTText: 65a6de06a7389098ce24340d1d3556015c38f746
456482
React-RCTVibration: 8e9fb25724a0805107fc1acc9075e26f814df454
457483
ReactCommon: 4167844018c9ed375cc01a843e9ee564399e53c3
484+
RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
485+
RNGestureHandler: 7a5833d0f788dbd107fbb913e09aa0c1ff333c39
486+
RNReanimated: dd8c286ab5dd4ba36d3a7fef8bff7e08711b5476
487+
RNScreens: 0e91da98ab26d5d04c7b59a9b6bd694124caf88c
458488
Yoga: 7d13633d129fd179e01b8953d38d47be90db185a
459489
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
460490

‎example/package.json‎

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,36 +6,31 @@
66
"android": "react-native run-android",
77
"ios": "react-native run-ios",
88
"start": "react-native start",
9-
"test": "jest",
10-
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
9+
"test": "jest"
1110
},
1211
"dependencies": {
12+
"@react-native-community/masked-view": "^0.1.10",
13+
"@react-navigation/drawer": "^5.9.3",
14+
"@react-navigation/native": "^5.7.6",
15+
"@react-navigation/stack": "^5.9.3",
1316
"react": "16.13.1",
14-
"react-native": "0.63.3"
17+
"react-native": "0.63.3",
18+
"react-native-gesture-handler": "^1.8.0",
19+
"react-native-reanimated": "^1.13.1",
20+
"react-native-safe-area-context": "^3.1.8",
21+
"react-native-screens": "^2.11.0"
1522
},
1623
"devDependencies": {
1724
"@babel/core": "^7.8.4",
1825
"@babel/runtime": "^7.8.4",
19-
"@react-native-community/eslint-config": "^1.1.0",
2026
"@types/jest": "^25.2.3",
2127
"@types/react-native": "^0.63.2",
2228
"@types/react-test-renderer": "^16.9.2",
23-
"@typescript-eslint/eslint-plugin": "^2.27.0",
24-
"@typescript-eslint/parser": "^2.27.0",
2529
"babel-jest": "^25.1.0",
26-
"eslint": "^7.2.0",
27-
"eslint-config-airbnb": "^18.2.0",
28-
"eslint-config-prettier": "^6.13.0",
29-
"eslint-plugin-import": "^2.22.1",
30-
"eslint-plugin-jsx-a11y": "^6.3.1",
31-
"eslint-plugin-prettier": "^3.1.4",
32-
"eslint-plugin-react": "^7.21.4",
33-
"eslint-plugin-react-hooks": "^4.0.0",
3430
"husky": ">=4",
3531
"jest": "^25.1.0",
3632
"lint-staged": ">=10",
3733
"metro-react-native-babel-preset": "^0.59.0",
38-
"prettier": "^2.1.2",
3934
"react-test-renderer": "16.13.1",
4035
"typescript": "^3.8.3"
4136
},

‎example/src/App.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
1+
import 'react-native-gesture-handler';
2+
13
import React from 'react';
2-
import {SafeAreaView, ScrollView, Text, StatusBar} from 'react-native';
4+
import { NavigationContainer } from '@react-navigation/native';
5+
import { createDrawerNavigator } from '@react-navigation/drawer';
6+
7+
import RootNavigator from './RootNavigator';
38

4-
import {Button} from 'react95-native';
9+
const Drawer = createDrawerNavigator();
510

611
const App = () => {
712
return (
8-
<>
9-
<StatusBar barStyle="dark-content" />
10-
<SafeAreaView>
11-
<ScrollView contentInsetAdjustmentBehavior="automatic">
12-
<Button />
13-
</ScrollView>
14-
</SafeAreaView>
15-
</>
13+
<NavigationContainer>
14+
<Drawer.Navigator>
15+
<Drawer.Screen name='RootNavigator' component={RootNavigator} />
16+
</Drawer.Navigator>
17+
</NavigationContainer>
1618
);
1719
};
1820

‎example/src/HomeScreen.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react';
2+
import { View, StyleSheet } from 'react-native';
3+
import { useNavigation } from '@react-navigation/native';
4+
5+
import { Button } from '../../src';
6+
7+
const styles = StyleSheet.create({
8+
container: {
9+
flex: 1,
10+
justifyContent: 'center',
11+
alignItems: 'center'
12+
}
13+
});
14+
15+
const HomeScreen = () => {
16+
const navigation = useNavigation();
17+
return (
18+
<View style={styles.container}>
19+
<Button onPress={() => navigation.openDrawer()}>Open drawer</Button>
20+
</View>
21+
);
22+
};
23+
24+
export default HomeScreen;

‎example/src/RootNavigator.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 { createStackNavigator } from '@react-navigation/stack';
3+
4+
import HomeScreen from './HomeScreen';
5+
6+
const Stack = createStackNavigator();
7+
8+
const RootNavigator = () => {
9+
return (
10+
<Stack.Navigator headerMode='screen'>
11+
<Stack.Screen
12+
name='Home'
13+
component={HomeScreen}
14+
options={{ title: 'React95' }}
15+
/>
16+
</Stack.Navigator>
17+
);
18+
};
19+
20+
export default RootNavigator;

0 commit comments

Comments
 (0)