Thursday, March 15, 2018

TIL: How to use DatePickerAndroid and TimePickerAndroid in React Native?

While working with React Native, I always tried to use built-in components instead of "reinventing" the bicycle.

So today the design mockups for my project required me to write the form for a user to pick up date and time. And I went to the React Native docs page and scrolled down the bar looking what they have to offer, which component I may use. That's how I came across DatePickerAndroid and TimePickerAndroid in API's section.

Even thought docs are quite straight forward, it took we a while to figure out how to properly use it.

Part 1. DatePickerAndroid

Let's start with DatePickerAndroid: first thing we need to do is to write "onPress" type of the function. Important step is to declare is as "async" function, otherwise you will get an annoying "await is a reserved word" error message.

Another important step that I forgot about was to import DatePickerAndroid from 'react-native' package.

In this case I have assigned data to directly to the state, if you would like to do the same DO NOT forget to add ".bind(this)", when you are calling your function: "random.datePicker.bind(this)".

You can use this function on any element that supports "onPress" property.

Another big challenge is styling DatePickerAndroid. Currently it cannot be done directly through React Native, but we can mess up a little bit with Android code:
"<project>\android\app\src\main\res\values\styles.xml" file in your React Native project.

Let's change the color scheme of the component!

If you want to use the dark theme simply change Theme.AppCompat.Light.NoActionBar to Theme.AppCompat and Theme.AppCompat.Light.Dialog to Theme.AppCompat.

Final result:

Part 2. TimePickerAndroid

TimePickerAndroid is similar to DatePickerAndroid, so once you figured out how to use one of them, you know how to use both:

As you can see even code and strategy how we are going to use it are the same, timePicker may be used as "onPress" function as well.

Even styling would be similar:

And if you want to have a darker theme you would have to perform all the same modifications as with DatePickerAndroid.

Final result:

Congratulations! Now you know how to make your form more user-friendly and do less validation!

Saturday, March 10, 2018

Release 0.3: Status Report

It's almost impossible to control how much work load you have.
These 2 weeks were super busy in my semester: midterms, assignments, labs, deadlines...

At some point working on my bug for Release 0.3 I realized that I don't have enough time to finish it for this Release. So it's work in progress; I was able to create a visible command on command pallet and now I need to work on functionality:

That will be done for Release 0.4. Meanwhile I was trying to fix this bug, I was working on localization for VS Code, here is what I accomplished:

In Transifex, your translation should be voted and reviewed by 2 people to be accepted, so that's not all the words I have localized, but only those that will appear on actual VS code Ukrainian and Russian instances.

I was also contacted by Andy Alt, who is working on a new project, to translate his project to Russian!

It felt nice to be remembered, I have already helped him with Russian and Ukrainian translations for rmw project in the last semester, so I was familiar with the process and agreed with no hesitations. So about 5-6 hours later I have submitted a PR to hldig project.

According to the, "hl://Dig is a fork of ht://Dig, a world-wide-web search system for an intranet or small internet."

At first I thought that I won't do much for this release. But at the end of the day I translated about 300 lines worth of messages for Andy, 456 strings were approved and now are seen by Russian and Ukrainian VS Code users and I was able to create a "dummy" blah command in VS Code command pallet.

TIL: How to use DatePickerAndroid and TimePickerAndroid in React Native?

While working with React Native, I always tried to use built-in components instead of "reinventing" the bicycle. So today the d...