Image for post
Image for post

Shorticle

Hi guys! Today I tell you how to simplify stateless widgets’ code.

Regular definition

Simplified definition

Of course, sometimes you’ll need the context object to get some extras like a theme, utils, etc. …


Image for post
Image for post
Light Theme | Dark Theme

Shorticle

Hi guys! Today I tell you how to build Modal Bottom Sheet (MBS) quickly; it’s a regular component usually used in applications.

The full example you can observe on the git repository.

UI

Show MBS


Image for post
Image for post

Hi folks! I start an article series that describes some solutions in a few minutes. I call them “Shorticle” in two words it’s a short article.

Shorticle

Let’s get started. In this shorticle, we will see how to combine the BLoC pattern with a refresh indicator to make it work together.

First of all, you’ll need to set up your BLoC with request/response states like Load/Loaded, Refresh/Refreshed, and events to change those states. I’ll show you a pretty simple example of items loading managing RefreshIndicator states.

The full example you can observe on the git repository.

Items BLoC

BLoC Events

BLoC States

We defined several things:
- Two events LoadItems and Refresh.
- Three states Uninitialized, Loading, Loaded, and Refreshing.
- BLoC that processes them all. …


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.


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

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

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}/>
)
}
},
}, { ... …

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