Hello. I'm Takuya Matsuyama from Japan, an indie developer making a Markdown note-taking app called Inkdrop.
I've learned how to create animated components on React Native by building a simple ToDo app.
I hope you enjoy it!
▶ Check out my product: Inkdrop - Markdown note-taking app
https://www.inkdrop.app/?utm_source=devaslife&utm_medium=youtube&utm_campaign=vlog&utm_content=k2h7usLLBhY
▶ ToDo app source code
https://github.com/craftzdog/react-native-animated-todo
https://github.com/craftzdog/react-native-checkbox-reanimated
▶ Ingredients
* React Native - ReactJS-based framework that can use native platform capabilities
* Expo - Toolset for building and delivering RN apps
* React Navigation(v6) - Routing and navigation
* NativeBase(v3) - Themable component library
* React Native Reanimated - Animations
* React Native SVG - Drawing SVG
* Moti - Helper module for Reanimated 2
▶ My dotfiles
https://github.com/craftzdog/dotfiles-public
▶ My terminal set up
https://www.youtube.com/watch?v=KKxhf50FIPI
▶ My NeoVim set up
https://www.youtube.com/watch?v=FW2X1CXrU1w
▶ My desk setup
* https://www.youtube.com/watch?v=1OFDMwDlnOE
▶ My equipments
* Video editing: Final Cut Pro X
* Camera: Fujifilm X-T4
* Mic: Zoom H1n
* Slider: SliderONE v2
* Terminal: Hacked Hyper - https://dev.to/craftzdog/getting-side-by-side-preview-in-a-terminal-app-hyper-20ii
* Keyboard: Keychron K2V2 - https://www.youtube.com/watch?v=-UW_c8VT2ZE
Follow me online here:
▶ Twitter https://twitter.com/inkdrop_app
▶ Blog https://blog.inkdrop.app/
▶ Discord community https://discord.gg/QfsG5Kj
▶ Instagram https://instagram.com/craftzdog
▶ Subscribe to my Newsletter http://eepurl.com/dNgJo6
Credits:
▶ BGM: Epidemic Sound https://www.epidemicsound.com/referral/p96aa8/
0:00 Digest
01:25 Create a new Expo project
06:05 Prepare to use NativeBase
08:42 Add dark theme support
13:33 Go to Kyoto!
14:49 Create SVG checkmark
18:21 Animate the checkbox
22:00 Fix a babel error
23:02 Make the checkbox able to toggle
25:19 Animate the checkbox
27:58 Create task item component
33:55 Animate task label
47:45 Integrate react-navigation and drawer
51:25 Implement swipe-to-remove interaction
01:07:09 Make task items editable
01:12:25 Create task list component
01:31:42 Animate background color
01:36:20 Add masthead
01:43:06 Fix scrollview
01:45:29 Implement sidebar content
01:56:16 Add about screen
02:05:20 Testing on Android
#ReactNative #ASMR #CodeWithMe
0 Comments