Skip to content

Commit

Permalink
add bottom sheet and reanimated
Browse files Browse the repository at this point in the history
  • Loading branch information
rokkoo committed Jul 25, 2023
1 parent a8c1f03 commit 9191ee0
Show file tree
Hide file tree
Showing 5 changed files with 122 additions and 17 deletions.
9 changes: 6 additions & 3 deletions App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {useColorScheme} from 'react-native';
import AppNavigationContainer from './app/navigation';
import {Colors} from 'react-native/Libraries/NewAppScreen';
import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
import {GestureHandlerRootView} from 'react-native-gesture-handler';

const queryClient = new QueryClient();

Expand All @@ -21,9 +22,11 @@ function App(): JSX.Element {
};

return (
<QueryClientProvider client={queryClient}>
<AppNavigationContainer />
</QueryClientProvider>
<GestureHandlerRootView style={{flex: 1}}>
<QueryClientProvider client={queryClient}>
<AppNavigationContainer />
</QueryClientProvider>
</GestureHandlerRootView>
);
}

Expand Down
56 changes: 46 additions & 10 deletions app/screens/home/index.tsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,60 @@
import {useNavigation} from '@react-navigation/native';
import React, {useEffect} from 'react';
import {Text, View, Button} from 'react-native';
import React, {useRef, useCallback, useMemo} from 'react';
import {Text, View, Button, StyleSheet} from 'react-native';
import {RootNavigationProp} from '../../navigation';
import Service from '../../services';
import {useQuery} from '@tanstack/react-query';
import {getItemsList} from '../../services/list';
import {BottomSheetModal, BottomSheetModalProvider} from '@gorhom/bottom-sheet';

const Home = () => {
const navigation = useNavigation<RootNavigationProp>();
const {data} = useQuery({queryKey: ['list'], queryFn: getItemsList});
// ref
const bottomSheetModalRef = useRef<BottomSheetModal>(null);

// variables
const snapPoints = useMemo(() => ['25%', '50%'], []);

// callbacks
const handlePresentModalPress = useCallback(() => {
bottomSheetModalRef.current?.present();
}, []);
const handleSheetChanges = useCallback((index: number) => {
console.log('handleSheetChanges', index);
}, []);

return (
<View>
<Text>asdasd</Text>
<Button
title="asdasd"
onPress={() => navigation.navigate('Settings', {itemId: 123})}
/>
</View>
<BottomSheetModalProvider>
<View style={styles.container}>
<Button
onPress={handlePresentModalPress}
title="Present Modal"
color="black"
/>
<BottomSheetModal
ref={bottomSheetModalRef}
index={1}
snapPoints={snapPoints}
onChange={handleSheetChanges}>
<View style={styles.contentContainer}>
<Text>Awesome 🎉</Text>
</View>
</BottomSheetModal>
</View>
</BottomSheetModalProvider>
);
};

const styles = StyleSheet.create({
container: {
flex: 1,
padding: 24,
// backgroundColor: 'grey',
},
contentContainer: {
flex: 1,
alignItems: 'center',
},
});

export default Home;
1 change: 1 addition & 0 deletions babel.config.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: ['react-native-reanimated/plugin'],
};
3 changes: 3 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,16 @@
"test": "jest"
},
"dependencies": {
"@gorhom/bottom-sheet": "4",
"@react-navigation/bottom-tabs": "^6.5.8",
"@react-navigation/native": "^6.1.7",
"@react-navigation/native-stack": "^6.9.13",
"@tanstack/react-query": "^4.32.0",
"axios": "^1.4.0",
"react": "18.2.0",
"react-native": "0.72.3",
"react-native-gesture-handler": "^2.12.0",
"react-native-reanimated": "^3.4.0",
"react-native-safe-area-context": "^4.7.1",
"react-native-screens": "^3.22.1"
},
Expand Down
70 changes: 66 additions & 4 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -777,6 +777,13 @@
"@babel/helper-plugin-utils" "^7.22.5"
"@babel/plugin-syntax-numeric-separator" "^7.10.4"

"@babel/plugin-transform-object-assign@^7.16.7":
version "7.22.5"
resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.22.5.tgz#290c1b9555dcea48bb2c29ad94237777600d04f9"
integrity sha512-iDhx9ARkXq4vhZ2CYOSnQXkmxkDgosLi3J8Z17mKz7LyzthtkdVchLD7WZ3aXeCuvJDOW3+1I5TpJmwIbF9MKQ==
dependencies:
"@babel/helper-plugin-utils" "^7.22.5"

"@babel/plugin-transform-object-rest-spread@^7.22.5":
version "7.22.5"
resolved "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.22.5.tgz"
Expand Down Expand Up @@ -1087,7 +1094,7 @@
"@babel/types" "^7.4.4"
esutils "^2.0.2"

"@babel/preset-typescript@^7.13.0":
"@babel/preset-typescript@^7.13.0", "@babel/preset-typescript@^7.16.7":
version "7.22.5"
resolved "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.22.5.tgz"
integrity sha512-YbPaal9LxztSGhmndR46FmAbkJ/1fAsw293tSU+I5E5h+cnJ3d4GTwyUgGYmOXJYdGA+uNePle4qbaRzj2NISQ==
Expand Down Expand Up @@ -1160,6 +1167,13 @@
resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz"
integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==

"@egjs/hammerjs@^2.0.17":
version "2.0.17"
resolved "https://registry.yarnpkg.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz#5dc02af75a6a06e4c2db0202cae38c9263895124"
integrity sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==
dependencies:
"@types/hammerjs" "^2.0.36"

"@eslint-community/eslint-utils@^4.2.0":
version "4.4.0"
resolved "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz"
Expand Down Expand Up @@ -1192,6 +1206,21 @@
resolved "https://registry.npmjs.org/@eslint/js/-/js-8.44.0.tgz"
integrity sha512-Ag+9YM4ocKQx9AarydN0KY2j0ErMHNIocPDrVo8zAE44xLTjEtz81OdR68/cydGtk6m6jDb5Za3r2useMzYmSw==

"@gorhom/bottom-sheet@4":
version "4.4.7"
resolved "https://registry.yarnpkg.com/@gorhom/bottom-sheet/-/bottom-sheet-4.4.7.tgz#fc80b3f0b7ebab056ce226f3aa3a89b2db8660dd"
integrity sha512-ukTuTqDQi2heo68hAJsBpUQeEkdqP9REBcn47OpuvPKhdPuO1RBOOADjqXJNCnZZRcY+HqbnGPMSLFVc31zylQ==
dependencies:
"@gorhom/portal" "1.0.14"
invariant "^2.2.4"

"@gorhom/portal@1.0.14":
version "1.0.14"
resolved "https://registry.yarnpkg.com/@gorhom/portal/-/portal-1.0.14.tgz#1953edb76aaba80fb24021dc774550194a18e111"
integrity sha512-MXyL4xvCjmgaORr/rtryDNFy3kU4qUbKlwtQqqsygd0xX3mhKjOLn6mQK8wfu0RkoE0pBE0nAasRoHua+/QZ7A==
dependencies:
nanoid "^3.3.1"

"@hapi/hoek@^9.0.0":
version "9.3.0"
resolved "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz"
Expand Down Expand Up @@ -1919,6 +1948,11 @@
dependencies:
"@types/node" "*"

"@types/hammerjs@^2.0.36":
version "2.0.41"
resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.41.tgz#f6ecf57d1b12d2befcce00e928a6a097c22980aa"
integrity sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==

"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
version "2.0.4"
resolved "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz"
Expand Down Expand Up @@ -3701,6 +3735,13 @@ hermes-profile-transformer@^0.0.6:
dependencies:
source-map "^0.7.3"

hoist-non-react-statics@^3.3.0:
version "3.3.2"
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
dependencies:
react-is "^16.7.0"

html-escaper@^2.0.0:
version "2.0.2"
resolved "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz"
Expand Down Expand Up @@ -5024,7 +5065,7 @@ ms@2.1.3:
resolved "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz"
integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==

nanoid@^3.1.23:
nanoid@^3.1.23, nanoid@^3.3.1:
version "3.3.6"
resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz"
integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
Expand Down Expand Up @@ -5427,7 +5468,7 @@ prompts@^2.0.1, prompts@^2.4.0:
kleur "^3.0.3"
sisteransi "^1.0.5"

prop-types@*, prop-types@^15.8.1:
prop-types@*, prop-types@^15.7.2, prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
Expand Down Expand Up @@ -5496,7 +5537,7 @@ react-freeze@^1.0.0:
resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==

react-is@^16.13.0, react-is@^16.13.1:
react-is@^16.13.0, react-is@^16.13.1, react-is@^16.7.0:
version "16.13.1"
resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
Expand All @@ -5506,6 +5547,27 @@ react-is@^17.0.1:
resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz"
integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==

react-native-gesture-handler@^2.12.0:
version "2.12.0"
resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.12.0.tgz#59ca9d97e4c71f70b9c258f14a1a081f4c689976"
integrity sha512-rr+XwVzXAVpY8co25ukvyI38fKCxTQjz7WajeZktl8qUPdh1twnSExgpT47DqDi4n+m+OiJPAnHfZOkqqAQMOg==
dependencies:
"@egjs/hammerjs" "^2.0.17"
hoist-non-react-statics "^3.3.0"
invariant "^2.2.4"
lodash "^4.17.21"
prop-types "^15.7.2"

react-native-reanimated@^3.4.0:
version "3.4.0"
resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.4.0.tgz#93b4d0b4b48e712fdc93f6828654b93083c6531d"
integrity sha512-B5cZJseoIkYlZTRBRN0xuU1NBxUza/6GSHhiEBQfbOufWVlUMMcWUecIRVglW49l8d2wXbfCdQlNyVoFqmHkaQ==
dependencies:
"@babel/plugin-transform-object-assign" "^7.16.7"
"@babel/preset-typescript" "^7.16.7"
convert-source-map "^2.0.0"
invariant "^2.2.4"

react-native-safe-area-context@^4.7.1:
version "4.7.1"
resolved "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.7.1.tgz"
Expand Down

0 comments on commit 9191ee0

Please sign in to comment.