https://github.com/andrekovac/react-native-freestyle-workshop
https://github.com/andrekovac/react-native-freestyle-workshop
education react-native react-navigation reanimated2 workshop
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/andrekovac/react-native-freestyle-workshop
- Owner: andrekovac
- Created: 2021-12-14T07:51:00.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-01-01T22:54:02.000Z (over 4 years ago)
- Last Synced: 2023-08-08T02:44:15.288Z (almost 3 years ago)
- Topics: education, react-native, react-navigation, reanimated2, workshop
- Language: TypeScript
- Homepage:
- Size: 322 KB
- Stars: 1
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Native Freestyle Workshop
This is a collection of code we implemented during the workshop to cover topics like animations (`Animated` and `reanmiated2`), navigation (`react-navigation`) and React Native development tools.
## Workshop Notes
Notes about discussed concepts, example code and instructions to set up dev tools:
- [Create new React Native project](./docs/install-react-native.md)
- [React Native Basics](./docs/react-native-basics.md)
- [React Native Development Tools](./docs/react-native-dev-tools.md)
- [Animations with `Animated`](./docs/animations.md)
- [react-navigation](./docs/navigation.md)
- [Animations with `reanimated2`](./docs/reanimated.md)
- [General project tips](./docs/general-tips.md)
## App Screens
### Photos
- `src/components/FlatPhotoList.tsx` uses [FlatList](https://reactnative.dev/docs/flatlist)
- `src/components/SwipeableElement.tsx` covers the topics `reanimated2` and [`react-native-gesture-handler`](https://github.com/software-mansion/react-native-gesture-handler)
### [LayoutAnimation](https://reactnative.dev/docs/layoutanimation)
### [Animated](https://reactnative.dev/docs/animated)
### [Reanimated 2](https://docs.swmansion.com/react-native-reanimated/)
- Compare the two implementations of a spring animation: `src/components/AnimatedCards.tsx` and `src/components/AnimatedCards_useSpring.tsx`
### [`react-navigation` Modal](https://reactnavigation.org/docs/modal/)
