Image for post
Image for post
Flutter Advanced Switch

I was inspired by my previous story, so I start developing a new plugin that I publish to the Flutter community, I called it Flutter Advanced Switch, and now I share with you how I made it.

I investigated switch widgets published to “pub.dev” most of them just show thumb with a text like “on/off” but I wanted to change not only text but background color, size, background image, corner sharpness, add state icon, etc. That is my point to start.

Suggestion: Before starting to develop try to find a name that you want to use for your plugin in the “pub.dev” …


I remember Expo when it was far from ideal, not so many features were implemented and some of them were not properly working, but…

Image for post
Image for post

A few months ago I’ve started a new project from scratch using the Expo.io platform, it was the decision of my client.

He said, “We can’t spend time to build ReactNative anymore, we need a power burst!”. Of course, he was ready to cut some functional which will require native dependency.

The Expo is a great platform and if you have never tried or you have experience with old versions you probably should try it.

Development process

Each time when you need to run the application on a real device you just need to scan QR-Code from the terminal or if you would like to run on iOS Simulator/Android Emulator just use hotkeys, this feature extremally speed up your development. …


Image for post
Image for post

Flutter it’s a fresh platform that can be used to develop applications like with ReactNative. There are so many plugins that you can easily use to solve any kind of task. Most of them have multi-platform support like iOS, Android, Web, and Desktop you can check it on pub.dev, just put the string into search and it will find for you something. Of course, you can filter search results, for example, we wanna find a plugin maps support in our project with iOS & Android platform support.

Image for post
Image for post
pub.dev website

As you can see there are several variants you can try to use. All plugins have some score, short description, platform support, etc. Choose some plugin and add a line to the “pubspec.yaml” file in your project then press the “Pub get” button at the top bar or simply enter “flutter pub get” in the terminal to add a plugin to your project and start using it. …


I usually observe designers work on different designers’ resources to find something complicated to implement with ReactNative for the ability to propose new features for my customers that want to have in their applications interesting design solutions, I found that Curved TabBar more and more popular among designers but it’s quite complicated to implement using ReactNative.

Image for post
Image for post

Shadow first of all

ReactNative provides shadow capability for both platforms iOS and Android. iOS platform supports different properties to set up your shadow in needed element or group of elements, so can easily apply shadow props to container and shadow will flow around all elements in that group. …


Trying to go out and build a contactless payment solution from scratch is not something that everyone has the time and gumption to do.
As far as approach there are principally two successful approaches to contactless one can follow. The RFC and the QR methodology.

The RFC Methodology

This is the incumbent process in most of Europe and North America. Buyers use an RFC chip-based Credit or Debit card or mobile device. Buyers swipe the device over a specialized card reader and seller, then, connects to card or payment processor.

Popular implementations of this in the US for mobile devices are represented by Apple Pay and Google Pay. The issue for us what that this method had a few…


A year ago I’ve published the module react-native-multibar it was written using Pure JS and old React, users start using this library in their projects and post issues/bugs. By the available time, I publish fixes, but today I gonna present a huge update about it.

Image for post
Image for post

The biggest changes related to a rethinking of module implementation, it’s not so huge so I decided to rewrite it from scratch using TypeScript, also I wanna simplify using and fewer changes to react-navigation components to avoid issues related to it.

Image for post
Image for post

Image for post
Image for post

If you are an iOS user or developer, probably you have experienced that some applications have blurred translucent TabBar, like in the AppStore, Podcasts, Health, etc.

I want to bring light on how to make it in ReactNative with react-navigation TabBar.

Examples available there GitHub / Expo.

Building TabBar

As usual, if an application requires TabBar and you already using react-navigation even if not you can use createBottomTabNavigator from react-navigation-tabs to create TabBar in the basement of the screen it is very simple.

const MainTabBar = createBottomTabNavigator({
Home: {
screen: HomeScreen,
navigationOptions: {
tabBarLabel: 'Home',
tabBarIcon: ({ tintColor }) => (
<TabBarIcon name="home" color={tintColor}/>
)
}
},
Profile: {
screen: ProfileScreen,
navigationOptions: {
tabBarLabel: 'Profile',
tabBarIcon: ({ tintColor }) => (
<TabBarIcon name="user" color={tintColor}/>
)
}
},
Settings: {
screen: SettingsScreen,
navigationOptions: {
tabBarLabel: 'Settings',
tabBarIcon: ({ tintColor }) => (
<TabBarIcon name="gear" color={tintColor}/>
)
}
},
}, { ... …

Image for post
Image for post
iOS Screenshot

With iOS 12 the new widgets screen comes, after getting it on my iPhone I always play with that screen coz the scroll behaviour is amazing.

The widgets are not scrolls but they are collapsing till header and fade out with scaling when space is not enough, it looks like you pull out widgets while scrolling.

In this article, I’ll describe my try to implement it using expo.

If you wanna just see the result of my work, you can try the example in Expo or just get sources in this repo.

Image for post
Image for post

Image for post
Image for post
https://medium.muz.li/ui-ux-case-study-designing-a-better-cinema-experience-29abc7cfb94f

I found an interesting example of the movie app, it shows the blurred search field, so I started to make it on React Native and what we have.

Project code here GitHub.

First of all, I found the library to make a blur effect on the search field, it’s called react-native-blur, it supports both platform iOS and Android. Also to make the keyboard appearance black here is documentation from the official website.

Image for post
Image for post

This article is a continuation of this one.

Image for post
Image for post
UX Planet post

There are two difficulties in implementing it:
1. RN doesn’t support the Gooey Effect with SVG
2. Android doesn’t handle touch on the child view which is out of the parent view.

I noticed that you are very interested in this implementation by the previous article so I decided to make it works for both platforms for you.

So let’s start

For the Gooey effect, we can try to use the Lottie library.
For the touch events more simple solution.

Android crutches ;-)

The main idea is to make the parent's view (in meaning TabBar) larger to have a space for the child's views. …

About

Alex Melnyk

A high skilled developer with 10+ years of development experience. Working at https://litslink.com/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store