- 42
- 15 610
chsdwn
Приєднався 2 лис 2016
Senior mobile application developer
ASMR Programming - React Native Maps Clustering - No Talking
React Native map clustering example with react-native-maps and react-native-clusterer packages.
Source code: github.com/chsdwn/react-native-examples/tree/main/map-clustering
⌨️ Keyboard: Macbook Magic Keyboard. (Keypress sounds are generated virtually by the Rustyvibes app. Soundpack: CherryMX Brown ABS Keycaps.)
🔤 Font: Fira Code
🎨 Theme: Monokai
#reactnative #react #expo #typescript #javascript #uidesign #figma #asmr #coding #programming #notalking #ios #android #iosdevelopment #iosprogramming #androiddevelopment #androidprogramming #crossplatformdevelopment #clustering #map
Source code: github.com/chsdwn/react-native-examples/tree/main/map-clustering
⌨️ Keyboard: Macbook Magic Keyboard. (Keypress sounds are generated virtually by the Rustyvibes app. Soundpack: CherryMX Brown ABS Keycaps.)
🔤 Font: Fira Code
🎨 Theme: Monokai
#reactnative #react #expo #typescript #javascript #uidesign #figma #asmr #coding #programming #notalking #ios #android #iosdevelopment #iosprogramming #androiddevelopment #androidprogramming #crossplatformdevelopment #clustering #map
Переглядів: 185
Відео
ASMR Programming - Upgrading to Expo SDK 52 - No Talking
Переглядів 172Місяць тому
Upgrading my Expo v51 project to v52 also migrating from React Navigation v6 dynamic routing to v7 static API. Source code: github.com/chsdwn/FreeToGameApp/compare/main...expo-v52-upgrade ⌨️ Keyboard: Macbook Magic Keyboard. (Keypress sounds are generated virtually by the Rustyvibes app. Soundpack: CherryMX Brown ABS Keycaps.) 🔤 Font: Fira Code 🎨 Theme: Monokai #reactnative #react #expo #typesc...
ASMR Programming - Adding Storybook to An Existing React Native Project - No Talking
Переглядів 240Місяць тому
How to add storybook to an existing project? How to write stories for components? Source code: github.com/chsdwn/FreeToGameApp/tree/storybook ⌨️ Keyboard: Macbook Magic Keyboard. (Keypress sounds are generated virtually by the Rustyvibes app. Soundpack: CherryMX Brown ABS Keycaps.) 🔤 Font: Fira Code 🎨 Theme: Monokai #reactnative #react #expo #typescript #javascript #uidesign #figma #asmr #codin...
ASMR Programming - React Native Error and Performance Monitoring with Sentry - No Talking
Переглядів 3232 місяці тому
How to configure and use Sentry with React Native(Expo)? Source code: github.com/chsdwn/FreeToGameApp/compare/main...sentry ⌨️ Keyboard: Macbook Magic Keyboard. (Keypress sounds are generated virtually by the Rustyvibes app. Soundpack: CherryMX Brown ABS Keycaps.) 🔤 Font: Fira Code 🎨 Theme: Monokai #reactnative #react #expo #typescript #javascript #asmr #coding #programming #notalking #ios #and...
ASMR Programming - React Native Media Player Example - No Talking
Переглядів 913 місяці тому
React Native media player example with react-native-media-console package. Source code: github.com/chsdwn/app-screens/tree/main/video-player ⌨️ Keyboard: Macbook Magic Keyboard. (Keypress sounds are generated virtually by the Rustyvibes app. Soundpack: CherryMX Brown ABS Keycaps.) 🔤 Font: Fira Code 🎨 Theme: Monokai #reactnative #react #expo #typescript #javascript #asmr #coding #programming #no...
ASMR Programming - React Native Text-to-Speech Example - No Talking
Переглядів 1334 місяці тому
React Native text-to-speech example with expo-speech package. Source code: github.com/chsdwn/app-screens/tree/main/text-to-speech ⌨️ Keyboard: Macbook Magic Keyboard. (Keypress sounds are generated virtually by the Rustyvibes app. Soundpack: CherryMX Brown ABS Keycaps.) 🔤 Font: Fira Code 🎨 Theme: Monokai #reactnative #react #expo #typescript #javascript #uidesign #asmr #coding #programming #not...
ASMR Programming - React Native PDF Viewer Example - No Talking
Переглядів 6794 місяці тому
React Native PDF viewer example using React Native PDF Renderer. Source code: github.com/chsdwn/app-screens/tree/main/pdf-viewer ⌨️ Keyboard: Macbook Magic Keyboard. (Keypress sounds are generated virtually by the Rustyvibes app. Soundpack: CherryMX Brown ABS Keycaps.) 🔤 Font: Fira Code 🎨 Theme: Monokai #reactnative #react #expo #typescript #javascript #asmr #coding #programming #notalking
ASMR Programming - React Native Keyboard Aware Bottom Sheet - No Talking
Переглядів 2624 місяці тому
React Native keyboard aware bottom sheet example with gorhom bottom sheet. ⌨️ Keyboard: Macbook Magic Keyboard. (Keypress sounds are generated virtually by the Rustyvibes app. Soundpack: CherryMX Brown ABS Keycaps.) 🔤 Font: Fira Code 🎨 Theme: Monokai Source code: github.com/chsdwn/app-screens/tree/main/keyboard-aware-bottom-sheet #reactnative #react #expo #typescript #javascript #asmr #coding #...
ASMR Programming - React Native Component Testing with React Native Testing Library - No Talking
Переглядів 2175 місяців тому
React Native login screen component testing example with React Native Testing Library. ⌨️ Keyboard: Macbook Magic Keyboard. (Keypress sounds are generated virtually by the Rustyvibes app. Soundpack: CherryMX Brown ABS Keycaps.) 🔤 Font: Fira Code 🎨 Theme: Monokai Source code: github.com/chsdwn/app-screens/tree/main/login-testing #reactnative #react #expo #typescript #javascript #asmr #coding #pr...
ASMR Programming - React Native Optimized Lottie Animations with Skottie - No Talking
Переглядів 1115 місяців тому
How to use Lottie animations in a more optimized way with lower file size using Skottie in React Native. ⌨️ Keyboard: Macbook Magic Keyboard. (Keypress sounds are generated virtually by the Rustyvibes app. Soundpack: CherryMX Brown ABS Keycaps.) 🔤 Font: Fira Code 🎨 Theme: Monokai Source code: github.com/chsdwn/app-screens/tree/main/lottie-animations-with-skottie #reactnative #react #expo #types...
ASMR Programming - React Native Internet Connection Check - No Talking
Переглядів 1235 місяців тому
React Native internet connection check example. ⌨️ Keyboard: Macbook Magic Keyboard. (Keypress sounds are generated virtually by the Rustyvibes app. Soundpack: CherryMX Brown ABS Keycaps.) 🔤 Font: Fira Code 🎨 Theme: Monokai Source code: github.com/chsdwn/app-screens/tree/main/internet-connection-check #reactnative #react #expo #typescript #javascript #asmr #coding #programming #notalking
ASMR Programming - React Native Deep Linking - No Talking
Переглядів 5946 місяців тому
React Native deep linking example using Expo Linking. ⌨️ Keyboard: Macbook Magic Keyboard. (Keypress sounds are generated virtually by the Rustyvibes app. Soundpack: CherryMX Brown ABS Keycaps.) 🔤 Font: Fira Code 🎨 Theme: Monokai Source code: github.com/chsdwn/app-screens/tree/main/deep-linking #reactnative #react #expo #typescript #javascript #asmr #coding #programming #notalking #reactnavigat...
ASMR Programming - React Native Local Notifications with Expo Notifications - No Talking
Переглядів 8496 місяців тому
React Native local notifications example with Expo Notifications package for Android and iOS devices. ⌨️ Keyboard: Macbook Magic Keyboard. (Keypress sounds are generated virtually by the Rustyvibes app. Soundpack: CherryMX Brown ABS Keycaps.) 🔤 Font: Fira Code 🎨 Theme: Monokai Source code: github.com/chsdwn/app-screens/blob/main/local-notifications #reactnative #react #expo #typescript #javascr...
ASMR Programming - React Native Feature Driven Design Project Structure Example - No Talking
Переглядів 456 місяців тому
Example project structure for feature driven design in React Native. ⌨️ Keyboard: Macbook Magic Keyboard. (Keypress sounds are generated virtually by the Rustyvibes app. Soundpack: CherryMX Brown ABS Keycaps.) 🔤 Font: Fira Code 🎨 Theme: Monokai Source code: github.com/chsdwn/app-screens/tree/main/feature-driven-project-structure/src #reactnative #react #expo #typescript #javascript #asmr #codin...
ASMR Programming - React Native Appwrite Email Authentication - No Talking
Переглядів 1466 місяців тому
Coding an Appwrite email authentication example in React Native. ⌨️ Keyboard: Macbook Magic Keyboard. (Keypress sounds are generated virtually by the Rustyvibes app. Soundpack: CherryMX Brown ABS Keycaps.) 🔤 Font: Fira Code 🎨 Theme: Monokai Source code: github.com/chsdwn/app-screens/tree/main/appwrite-login #reactnative #react #expo #typescript #javascript #asmr #coding #programming #notalking ...
ASMR Programming - React Native FlashList Recycling - No Talking
Переглядів 1,3 тис.6 місяців тому
ASMR Programming - React Native FlashList Recycling - No Talking
ASMR Programming - React Native Multi Column Gallery Example - No Talking
Переглядів 1307 місяців тому
ASMR Programming - React Native Multi Column Gallery Example - No Talking
ASMR Programming - Upgrading to Expo SDK 51 - No Talking
Переглядів 1,2 тис.7 місяців тому
ASMR Programming - Upgrading to Expo SDK 51 - No Talking
ASMR Programming - Writing a Custom Expo Config Plugin - No Talking
Переглядів 2497 місяців тому
ASMR Programming - Writing a Custom Expo Config Plugin - No Talking
ASMR Programming - React Native Instagram Story View Example - No Talking
Переглядів 1437 місяців тому
ASMR Programming - React Native Instagram Story View Example - No Talking
ASMR Programming - React Native Instagram Story Ring Design - No Talking
Переглядів 1568 місяців тому
ASMR Programming - React Native Instagram Story Ring Design - No Talking
ASMR Programming - React Native Register Form Validation Example - No Talking
Переглядів 1438 місяців тому
ASMR Programming - React Native Register Form Validation Example - No Talking
ASMR Programming - React Native RTK Query Infinite Scroll Example - No Talking
Переглядів 3858 місяців тому
ASMR Programming - React Native RTK Query Infinite Scroll Example - No Talking
ASMR Programming - React Native Keyboard Aware ScrollView with Sticky Footer Example - No Talking
Переглядів 7128 місяців тому
ASMR Programming - React Native Keyboard Aware ScrollView with Sticky Footer Example - No Talking
ASMR Programming - React Native Masked Phone Input with Country Select - No Talking
Переглядів 1499 місяців тому
ASMR Programming - React Native Masked Phone Input with Country Select - No Talking
ASMR Programming - Migrating from React Native CLI to Expo - No Talking
Переглядів 7839 місяців тому
ASMR Programming - Migrating from React Native CLI to Expo - No Talking
ASMR Programming - React Native Dynamic Aspect Ratio - No Talking
Переглядів 859 місяців тому
ASMR Programming - React Native Dynamic Aspect Ratio - No Talking
ASMR Programming - React Native Realtime Chart Example - No Talking
Переглядів 2419 місяців тому
ASMR Programming - React Native Realtime Chart Example - No Talking
ASMR Programming - React Native Swipeable Item - No Talking
Переглядів 16510 місяців тому
ASMR Programming - React Native Swipeable Item - No Talking
ASMR Programming - React Native Hide Header on Scroll Example - No Talking
Переглядів 1,5 тис.10 місяців тому
ASMR Programming - React Native Hide Header on Scroll Example - No Talking
Thank you, it helped me
Thanks for solving such difficult problem with keyboard
is there any video where we can do a test for that option of deeplinking because all the videos do 90 % coding for no reason and things go confused at some point alot of things that has nothing to do with deep linking
I've linked the corresponding documentations. You can read through it and implement it yourself. - docs.expo.dev/linking/into-your-app - reactnavigation.org/docs/deep-linking
would be better if you talk bro, no body is looking for this content without talking and explanation. instead of writing code from the other screen, it would be highly appreciated if you spend some time understanding and explaining the code you are writing. That might actually help people.
Thank you for your suggestion. I know it would be better if I spoke in my videos, but I'm not considering recording videos with commentary at the moment.
Hi @chsdwn , is this you trying to make the react-native-video package usable in expo with having to prebuild?
Hi. In this video, I’m writing a config plugin for the react-native-story-view package. The config plugin includes configurations for react-native-video@5 and react-native-video-cache-control packages. While it contains react-native-video configuration, you’ll need to remove unnecessary code to prevent crashes.
The problem with width 100% is that, in the end, the shimmer animation is not functioning properly.
Please ensure that the width of the shimmer's parent view is not changed after the first render. This might fix the issue.
I am also setting up native modules using config plugins, but when I use functions like `withMainApplication`, I get an error saying that the function does not exist. Do you know how to resolve this issue? The Expo version I am using is the latest, and the config plugins are also up to date. I am using TypeScript.
It's hard to say something without debugging. You need to compile TypeScript files to JavaScript and use them. Make sure you import the `withMainApplication` from the correct package.
Nice ❤!!! I appreciate it... 🎉 Question: How can I get its apk using expo build ( Without Any App Crash ) ?
First, you need to prebuild your app. This will generate the /android and /ios folders. Then, navigate to the /android folder and generate the APK file. You can find your generated APK file inside /android/app/build/outputs/apk/release folder. Example: npx expo prebuild, cd android, ./gradlew assembleRelease docs.expo.dev/workflow/prebuild/
Nice video, I was looking for this, Thanks🙏
Subscribed! 🎉 Where is the source code?? It would be great if you give the source code link🎉
I’m adding source code links to the description of all my videos. github.com/chsdwn/app-screens/tree/main/keyboard-aware-bottom-sheet
@@chsdwn Thanks
It dont work in android
Actually, it work but the behaviour in android is weird, as soon as I press the button, I have to close the app immediately to see the notifications, otherwise it dont
Thanks, I realize I only want local notifications for my app, then I dont have to setup firebase and stuff
Following the current documentation the notification only work in physical devices. Not working in emulators/simulators.
If you're mentioning push notifications, they only work on real devices, but local notifications should work correctly on emulators/simulators.
@@chsdwn but dont work with expo. Only with cli. Expo notification work only in physical device
Why android stuffs always looks bad. 😂
your videos are great!
Love the sound of your keyboard. Which one you are using mate?
I'm using magic keyboard. Keypress sounds generated virtually by the Rustyvibes app. The soundpack: CherryMX Brown ABS Keycaps.
Thanks bro. Bro could you please make a video of Bar responsive bar chart with Victory Chart NL
Can you tell me name of the vscode them that you using?
I'm using built in Monokai theme.
I have tried this in my app too, but when I scroll it jerk and when I scroll fast it show shadows over screen. Don’t know what could be the reason. Did you met with this issue.
You can generate a release build and check again. As mentioned in the documentation, "FlashList can appear to be slower than FlatList in dev mode.".
How to make video play only when the videos comes on view port?
Check out onViewableItemsChanged prop on the flashlist docs. shopify.github.io/flash-list/docs/usage#onviewableitemschanged
Thanks mate! 👌
Could you please make an video with bar chart of Victory chart NL
Hi, since I upgraded sdk 51 I've got the warning "TNodeRendererChildren: Support for defaultProps will be removed from function components in a future major release. Use javascript default parameters instead." I'm 2 steps away from killing myself if I don't solve this warning ISTG 😭
If you're using defaulProps in your components replace them with default parameters but if this warning occurs because one of your installed packages, just local patch it or wait until a new version released. You can check out this issue for more information: github.com/facebook/react/pull/25699.
nice code
Thank you
hello , since i installed expo sdk 51 , my app crashes directly on ios , and for the android : it works fine for about 30 secondes , then no backend call works , can you help me ?
You can try upgrading packages one by one and make sure which package crashes your app. You can't make sure why your app crashes without debugging. reactnative.dev/docs/debugging
Bro how can i use jsx in a new expo sdk 51 project And Should i need to install external package for routing
You can create a new component and write jsx inside it. Check out this link: reactnative.dev/docs/intro-react#jsx You need to install an external package like react navigation or expo router for routing.
I've used yup before. After watching this video, i searched zod. TypeScript support of zod is better than yup. I will use zod in my next project. This channel deserves a lot more followers because your videos are like pills. Please keep doing this, thank you.
thank you! was looking for this particular loader for a long time.
You're welcome. I'm glad that you liked it.
can you make plz full stack projects in react native
I'll be too busy for the next 2 months, however, after that, I plan to create full-stack development videos/live streams focusing on the NestJS - React Native stack.
@@chsdwn am waiting sir thanks
github link ???
GitHub: github.com/chsdwn/react-native-mobile-ui-kit UI Kit: figma.com/file/yM6bakuSmEsIFcaYKKBLMg/Mobile-UI-kit-(Community)
i want to see how you set switch for system, drk mode and light mode..your hero
You can use Shift + Command + A shortcut to switch between dark and light mode.
Hello, which VScode theme do you use in this video? Thanks! Great vid.
I'm glad that you liked the video. Color theme: Monokai. Icon theme: Material Icon Theme.
nice
please complete the project??????????
I'm recording these videos on my spare time. I'm a bit busy right now, so I can only upload one video per week. But in the description you can find the UI Kit link and continue where I left off by yourself.
what keyboard?
Keypress sounds are generated virtually by the Mechvibes app. Mechvibes configuration: CherryMX Brown - ABS Keycaps.