Forem: Jonas Grøndahl

Multi language support in React Native apps

Jonas Grøndahl — Mon, 20 Apr 2020 15:06:13 +0000

Hello everyone,

I had a look over at the following article to learn about how to create a multi language app in React Native:

https://medium.com/better-programming/creating-a-multi-language-app-in-react-native-9828b138c274

I thought to myself, there must be an easier way to do this. Let's make a Context provider and wrap the app inside of it:

import React, {useEffect, useState, useContext} from 'react';
import * as RNLocalize from 'react-native-localize';
const LanguageContext = React.createContext<>();

const translationGetters = {
  en: () => require('../lang/translations/en.json'),
  dk: () => require('../lang/translations/dk.json'),
};

export const LanguageProvider: React.FC = ({children}) => {
  const [language, setLanguage] = useState('en');

  useEffect(() => {
    const fallback = {languageTag: 'en', isRTL: false};
    const {languageTag} = RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
      fallback;

    setLanguage(languageTag);
  }, []);

  const value = {
    ...translationGetters[language](),
  };

  return (
    <LanguageContext.Provider value={value}>
      {children}
    </LanguageContext.Provider>
  );
};

export const useTranslation = () => useContext(LanguageContext);

In the above code, I'm using the react-native-localize to grab the language of the device and then use to access the right language key inside my getter function. Now every component can call useTranslation() and grab the text they need.

Question is though if the above code is capable of doing the same as the code in the link. I'm not using a memoize function but really I'm just outputting text so is it really needed?

Hope somebody can shed some light on this! And if not, hopefully the code above is helpful in your next React Native app that needs multi language support 😄

Animations in React 2020 - react-spring

Jonas Grøndahl — Fri, 17 Jan 2020 10:14:26 +0000

Lately I've been working with animations in React and react-spring. There are many animations libraries out there but currently react-spring seems to be one of the most popular ones and for a good reason. I really like the hooks api since it plays very well into the remaining of my code that is also using the hooks syntax.

I have tried to create some more intermediate and advanced animations using react-spring (not just a simple fade/slide) and created YouTube videos showing how:

https://www.youtube.com/watch?v=kNH95mlNJd8&t

Let me know if they are useful to you if you're getting started with animations in React or if there are other libraries out there that looks exciting for animations in React here in 2020.

Development Environment in React Native from a beginner's perspective - your thoughts?

Jonas Grøndahl — Thu, 08 Aug 2019 10:06:16 +0000

Hello everybody!

Been working with React for a long time, just starting to work with React Native. I really like that you as React developer can start writing code that compiles to native code without too much struggle.

I have found a few programs however working with React Native in a development environment. Here is my list:

Having a Modal open as you reload the app, will cause the Modal component to get stuck requiring you to rebuild the app to see updated changes.
VSCode intellisense not working out of the box. Working with React normally, it feels very smooth just auto importing stuff as you write the component name + you get autocomplete as you're typing function/variables names etc.
Error codes imprecise. As syntax errors, wrong paths etc. happen, it is not always obvious what the mistake was. I don't have a concrete example right now but sometimes I just get a nonsense error message and I'm deleting code to see what caused the error.
Missing a way of checking out the exact layout of things. Some sort of Elements view that Chrome Dev Tools provide so you can see exactly what's going on 😒 really miss that, maybe it exists and I wasn't aware?

These are the problems that I'm facing as a beginner to React Native. Anyone got similar experience?

Implement dragging and resizing in JS

Jonas Grøndahl — Fri, 26 Jul 2019 12:56:58 +0000

Recently I decided to implement dragging and resizing of an object using vanilla JavaScript. I think many people use libraries to handle this type of functionality since it's easy and it works.

Well anyway, if you want to have a look at how it's implemented from scratch, I made a short 2-part YouTube video series. In part 1 we make a div shaped as a square movable and in part 2 we extend the implementation and make it re-sizable in 4 different directions!

You'll realize the implementation of the two is similar since we are interested in the x and y coords of the mouse at the start of holding mouse button down and as we move it.

Here's the video:

If you have any comments on the code, I'd love to hear them.

Note: Not super experienced uploading stuff to YouTube and speaking on video, so definitely some areas that could use some improvement 🐼

Most memorable career jump

Jonas Grøndahl — Sun, 21 Jul 2019 07:42:55 +0000

Hello everyone!

As the title says, what's your most memorable career jump?

When did it happen?
How did it happen?
How long had you been developing?

Discuss 😁

"Too complicated, a library will handle it"

Jonas Grøndahl — Fri, 28 Jun 2019 14:18:20 +0000

Hello everybody,

I recently got an exercise where I had to make an element resizable as well as draggable. The element should have a handle in each corner allowing the user to resize in all 4 directions.

This turned out to be very difficult for me and even after implementing it, I'm not 100% understanding every calculation that had to be done in order to make it work. I wish I had the option to use a library, but on the other hand it was fun to implement it from scratch.

When was the last time you had a moment of thinking:

"Hmm, this seems complicated, surely a library 📚 will handle it"

when trying to implement certain functionality but then went ahead and implemented it yourself or even proceeded to use that library?

Starting a 2 man side hustle - where to begin?

Jonas Grøndahl — Mon, 03 Jun 2019 16:41:40 +0000

Hey everybody!

I was wondering if there are any good places to find people to start a side hustle/side project with?

I just had an idea for a side project but it would be interesting to do it with someone else for a change.
I don't really have any developer friends outside work so would be cool to make some more contacts to share some knowledge with and at the same time work on a side project. Furthermore it would increase the speed at which the app would develop. 🤟

Anyone who have experience in this area? How to get started?

Feeling too comfortable 👟 - time to go remote?

Jonas Grøndahl — Wed, 22 May 2019 05:44:12 +0000

Hello everybody! Web dev reporting in from Denmark.

I'm in the situation that I'm feeling too comfortable in my current situation. I have had the same job for 2.5 years now. A job that allow me to work with my preferred tech stack and which allow for remote work - two important factors in my opinion. Furthermore I have a short commute by car from my house that lies in the same city as my work. Everything is very convenient.

For the majority of people that might be a good situation to be in. However as a developer, we do have the option to work from any location. This option could unlock a new and exciting daily life. The ability to explore new countries, cities, people and places while getting work done could be a way to get out of that comfort zone.

A few factors to consider as I see it:

The trip could hurt one's productivity. A few examples on top of my head that may have influence:

Struggle to find reasonable places to stay
Feel like exploring rather than working

Timing is an important factor as well I reckon. Going abroad to work remote with a wife and kids at home can result in a complicated situation (Not relevant in my case).

Anyone else had the same feeling of "feeling too comfortable"?
If so, did you do anything about it? If so, did you decide to travel around the world and do something completely different to mix up your daily life?

If anyone is currently living the digital nomad lifestyle, feel free to share tips with everyone, would be much appreciated ✌️