Do you write React Native or JavaScript articles and want to be featured in our blog? Reach out to wyatt@reactnativecoach.com and we’ll review your submission.Great article on getting up and running with a TabNavigator using React Navigation from Ricky Peters.Many developers want to monetize their apps and one way to do that is through ads. This post from Hajji Tarik helps you get started with AdMob in React Native.Part 1 of a 2 part series on testing your React Native app from Emma Jamieson.Short and simple article on how to implement Native Modules from Shashank.Apply filters to images in your…
Author: drweb
We’d also like to announce that we’re moving to a mostly bi-weekly schedule with React Native Coach. It’s a better pace while working on more projects ourself and better fits the content being produced in the space.If you’d like to contribute to React Native Coach be sure to drop me a line! wyatt@reactnativecoach.comReact Native 0.53React Native 0.53 was promoted to stable this week, the full release notes are available here, here are the highlights:Keyboard events now include duration and easingOn Android ScrollView now takes a snapToInterval and TextInput takes onKeyPress like IOSIncredible post from William Candillon on implementing Instagram style…
RxJs is the most challenging library of the Angular ecosystem because of its syntax, numerous operators, and the asynchronous mindset associated with Observables.Today, let’s see the easiest way to debug RxJs code in Angular. Now, you’ve probably done something like this at least once:service.getSomeObservable().subscribe(data => {console.log(data);});While the above works, it’s not ideal for a bunch of reasons:It forces you to subscribe to an Observable instead of using the async pipe, which is much better.It doesn’t allow you to debug what happens in that Observable before the subscriber receives the data.For instance, let’s say you inherit the following code to debug…
AI-generated image from the prompt “create signals out of observables”Signals are becoming increasingly an alternative to RxJs in Angular applications.Of course, there are the toSignal and toObservable functions to implement interoperability between Angular Signals and RxJs Observables, but what if we want to get more features than the basics?For instance, say we’d like to know if an Observable is still loading its initial data or if an error happened. Wouldn’t it be great to be able to do something like this?@if( myData.loading() ) {Loading data…} @else {{{ myData.data() }}}@if (myData.error()) {Something went wrong!}These three methods loading, data, and error, are…
A few years ago, I published a tutorial on how to do polling with RxJs and Angular. The goal was to illustrate how to retrieve and render information that gets refreshed periodically.With the latest iterations of Angular, we can simplify that approach a lot and implement a similar feature with less code, better performance, and no risk of memory leak!And we’ll be using Signals, too!First, let’s take a look at the 2020 version of my polling example:@Injectable()export class CurrencyService implements OnDestroy {private allCurrencies$: Observable;private stopPolling = new Subject();constructor(private http: HttpClient) {this.allCurrencies$ = timer(1, 3000).pipe(switchMap(() => http.get(‘http://localhost:8000/currencyInfo’)),retry(),tap(console.log),share(),takeUntil(this.stopPolling));}getAllCurrencies(): Observable {return this.allCurrencies$.pipe( tap(()…
A proxy forwarding an HTTP request to avoid CORS issues, as generated by AIIf you’ve ever encountered CORS errors in your Angular apps, this tutorial is for you!CORS stands for Cross-Origin Resource Sharing. It’s a security mechanism that allows web browsers to make controlled requests to resources on a domain different from the one serving the web page.This means if you’re serving your app on a domain “example.com” or “localhost” and your web app makes requests to “google.com” or some other domain, the web browser will make a preflight request (HTTP OPTIONS) to that other domain to ask if “example.com”…
Since version 16, Angular has been all about signals. I’ve covered how to create Signals from Observables to transition away from RxJs, but the Angular team introduced an even better option with Angular 19: The resource API.This API is experimental for now, as shown in the official documentation. This means it’s not recommended for production yet, but it’s such an exciting development that I had to write a tutorial on that topic anyway:Observables are used in many places in Angular, especially the HttpClient. Using Signals around these Observables, while doable, isn’t always obvious and brings a few extra challenges, such…
A few days ago, I was teaching Angular, and people asked me why I was doing this with my signals inside Angular services:readonly data = signal(‘value’).asReadonly();Why am I using read-only twice? Isn’t this redundant?First, let’s say I only do this:export class DataService {data = signal(‘value’).asReadonly();}Other components can inject that service, and the following is prevented, which is good if we want to ensure components can’t change the value of a Signal:export class AppComponent {data = inject(DataService).data;constructor() {// This doesn’t compile because our signal isn’t writabledata.set(“New value”);}But a developer could still break things and create all sorts of problems by doing…
Last updated: November 15, 2023. It is often useful to get the current index value inside a loop. But the index value is not immediately available in a for…of loop. For example, trying to access the index value after the current value of the iterable being looped through causes an error to be thrown: const array = [“x”, “y”, “z”]; for (value, index of array) { // Uncaught SyntaxError: Invalid left-hand side in for-loop console.log(index); console.log(value); }; The solution is to transform the iterable from a simple iterable (no nesting) into an array of arrays, in which each nested array…
January 9, 2025 When we published our advice on the simplest and best way to take some static local files and make a proper online website out of them, we recommended Netlify. That holds true. But there is some trepidation, as once in a while you’d hear a horror story about usage blowing up unexpectedly and a user being stuck with a big bill. This is a problem not isolated to Netlify, but happened there too. That’s a scary prospect for anyone, as unlikely as it may be. So I think it’s notable that Netlify announced a free plan which…