Posts

For the last few weeks, I have been working on a React Native project for work. This was my first experience writing “real” mobile apps. Before that, I only wrapped PWAs as APKs and called myself a mobile developer 😎. React Native came naturally to me after I overcame a few learning curves as a React developer. Now I wanted to see what the buzz around Flutter was about. Last weekend was a fine, sunny day, which is quite pleasant in late winter. It might not be winter by many people’s standards. I opened the getting-started page in the Flutter documentation. The installation file was quite large compared with React Native, which raised my expectations. ...

Here, by animating an SVG, I mean changing the properties of SVG elements dynamically to make them appear alive. In React Native, we can generate or render an SVG using the react-native-svg library. A complex SVG comprises many smaller elements that can be animated individually. For this example, however, we will use only one element: a circle. The following code will draw a circle with a radius of 50 units. <Svg width={200} height={200}> <Circle cx="55" cy="55" r="50" stroke="black" strokeWidth={5} /> </Svg> Suppose we want to animate it so that it grows and shrinks. To achieve this, I will use React Native Reanimated. To learn more about it, you can check out its documentation. ...

In a React-Redux application, it is good practice to have only one Redux store. But if, for some unusual or special reason, you need more than one store, you will face some problems. The most common problem is that if we wrap a component with a provider and then wrap a child component with another provider, it’s not easy to subscribe to the top-level provider’s store. const Component1 = () => { return ( <Provider store={store1}> <Provider store={store2}> <Component2 /> </Provider> </Provider> ); }; This can become so confusing that, within a few development iterations, you’ll find yourself using providers on every component. Not being able to read values from both stores in a single component will also become frustrating. ...

In React, the useEffect hook is pretty straightforward. But its simplicity sometimes makes me forget its actual function. I thought of useEffect simply as something that takes a callback and a dependency array as arguments and executes the callback whenever the dependency array changes. Without a dependency array, it runs the callback each time the component renders. But then, what is the difference between the following two cases? ...

Using OneSignal with React is fairly easy if you don’t have an existing service worker. But if one already exists, things may not work as expected. First, we will create a React app with a service worker. npx create-react-app my-app --template pwa This should create a folder named 'my-app' containing all the app-related files. To check that everything is working, we can run the following commands. A browser tab should open with the ReactJS logo. ...