Forem: Arthur Dao

Remove A Specific Element From An Array In Javascript

Arthur Dao — Tue, 16 Jun 2020 17:29:57 +0000

Removing a specific element from an array in javascript is one of the most searched question on Google (in the javascript-related search category ;) ).

In this article, we will see the possible solutions and attempt to find the best one.

Splice

One common solution is to use indexOf to find the index of the element then remove it using splice.

Example (remove 2):

const array = [4, 2, 1, 2];
const indexToRemove = array.indexOf(2);

if (indexToRemove > -1) // if element's index is found
  array.splice(indexToRemove, 1); // remove 1 element from index indexToRemove
console.log(array); // = [4, 1, 2]

1) Note that this method is destructive, it mutates the original array.

2) It only removes 1 occurence, if the array contains multiple 2, it only removes the first one.

If you want to remove all occurrences, you can simply iterate the array and use splice:

for (const index in array) {
  if (array[index] === 2)
    array.splice(index, 1);
}

Filter

A non-destructive way is using filter which also remove all occurrences of the element. It's as simple as:

const array = [4, 2, 1, 2];
const newArray = array.filter(element => element !== 2);
console.log(newArray); // = [4, 1];

Delete operator

If you don't want to keep an empty slot in the array instead of removing completely and change the length. You can use the delete operator along with indexOf:

const array = [4, 2, 1, 2];
const indexToRemove = array.indexOf(2);

if (indexToRemove > -1) // if element's index is found
  delete array[indexToRemove]; // delete element in indexToRemove
console.log(array); // = [4, undefined, 1, 2]

1) Note that this method is destructive, it mutates the original array.

2) It only removes 1 occurence, if the array contains multiple 2, it only deletes the first one.

If you want to remove all occurrences, you can apply the same example with splice.

Push

Another non-destructive method is using push. You simply create a new array with iterating the original one and push the elements that you want to keep into the new one.

const array = [4, 2, 1, 2];
const newArray = [];
for (const element of array) {
  if (element !== 2)
    newArray.push(element);
}
console.log(newArray); // = [4, 1]

So which one is the best?

As you can see, each one of the methods above has different properties. If those properties don't matter to you, checkout this performance test.

Otherwise, it's up to you the pick the one that fits you and your team most.

Which one will you use?

React Native Flatlist Real World Use Cases Tutorial

Arthur Dao — Thu, 11 Jun 2020 20:54:16 +0000

75% of mobile applications are made with lists and forms.

Yes I made up that 75% but just think about the apps that you are using everyday like Facebook, Youtube, Instagram, Safari, Chrome, Whatsapp, ... and you might agree.

So mastering how to implement list is like master 37.5% of the mobile apps development.

This tutorial is meant to show you how to use Flatlist - a React Native built-in component in real world use cases. We're talking about Pull to refresh & Infinite load (or Scroll loading).

Basic

Skip this section if you've already used Flatlist before.

Flatlist usage is pretty simple to understand.

const DATA = [{title: 'Item 1'}, {title: 'Item 2'}, {title: 'Item 3'}];

function Item({ title }) {
  return (
    <View>
      <Text>{title}</Text>
    </View>
  );
}

<FlatList data={DATA} renderItem={({item}) => <Item title={item.title} />} />;

There are 2 required props:

data: a plain array with items' data
renderItem: function called for every item in the data array, return a React component to render.

Pull to refresh

You might use this feature every day on your own Facebook or Instagram feed. Users can pull down to load the newest content to their list.

Here is a simple implementation:

const RefreshableFeed = () => {
  const [items, setItems] = useState([]);
  const [refreshing, setRefreshing] = useState(false);
  const fetchItems = useCallback(async () => {
    if (refreshing) return;
    setRefreshing(true);
    const newItems = await apiCallToGetItems();
    setItems(newItems.concat(items));
    setRefreshing(false);
  }, [refreshing]);

  return (
    <FlatList
      onRefresh={fetchItems}
      refreshing={refreshing}
      data={items}
      renderItem={({ item }) => <Text>{item}</Text>}
    />
  );
};

FlatList already provides 2 props that make implementing Pull to refresh really easy:

onRefresh: a function to be called when user pull down.
refreshing: a boolean indicating whether or not you are fetching for new data.

Simple as that, you've implemented the Pull to refresh feature. For more customizations, You can use FlatList's refreshControl prop along with the RefreshControl component.

Infinite load (Scroll loading)

On Twitter for example, instead of loading all the new tweets at once, it only loads and shows a few of them and when you almost scroll the end, it loads more and adds the newly loaded tweets to the end which make the scrolling infinite.

Once again, a simple implementation:

const InfiniteFeed = () => {
  const [loading, setLoading] = useState(false);
  const [items, setItems] = useState([]);
  const loadMoreItems = useCallback(async () => {
    if (loading) return;
    setLoading(true);
    const newItems = await apiCallToLoadMoreItems();
    setItems(items.concat(newItems));
    setLoading(false);
  }, [loading]);

  return (
    <FlatList
      onEndReached={loadMoreItems}
      data={items}
      renderItem={({ item }) => <Text>{item}</Text>}
    />
  );
};

We only need 1 prop to implement this feature and it's pretty intuitive:

onEndReached: a function to be called when the end of the list is reached.

You can also defined when to trigger the above function using FlatList's onEndReachedThreshold prop.

If you want to show a loading indicator, it's as simple as adding:

//...
  return (
    <FlatList
      ListFooterComponent={() => {
        if (!loading) return null;
        return <ActivityIndicator />;
      }}
    />
  );

Conclusion

You now know how to implement the 2 most important features of list. Without using any extra library or complicated code.

However, keep in mind that these examples do not focus on handling new/refreshed data. Depending on you API, you might need to use pagination, check for duplications,... when updating your list's items.

Reference

https://reactnative.dev/docs/flatlist

https://reactnative.dev/docs/activityindicator

https://reactnative.dev/docs/refreshcontrol

https://reactjs.org/docs/hooks-reference.html#usestate

https://reactjs.org/docs/hooks-reference.html#usecallback

Best Ways to Convert a String to Number in Javascript

Arthur Dao — Wed, 20 May 2020 16:33:44 +0000

Converting a string to number (or a number to string) might be one of the most common operations in Javascript. There are always several ways to convert a string to number, what is the best one?

parseInt()

The parseInt() function parses a string argument and returns an integer of the specified radix (the base in mathematical numeral systems).

console.log(parseInt("42"));
// expected output: 42

console.log(parseInt("42abc"));
// expected output: 42

parseInt() can also convert non-decimal numbers by using the second optional parameter.

console.log(parseInt("f", 16));
// expected output: 15

console.log(parseInt("0xf"));
// we don't need to pass the second parameter because parseInt
// detect the prefix "0x" which means the number is hexadecimal
// expected output: 15

parseFloat()

The parseFloat() function parses an argument (converting it to a string first if needed) and returns a floating point number.

console.log(parseFloat(4.23));
// expected output: 4.23

console.log(parseFloat('4.23abc'));
// expected output: 4.23

console.log(parseFloat('abc'));
// expected output: NaN

Number()

Number is a Javascript built-in object. It can be used to convert string to integer or floating point number.

console.log(Number("42"));
// expected output: 42

console.log(Number("42.3"));
// expected output 42.3

However, it cannot handle trailing non-numeric characters like parseInt or parseFloat

console.log(Number("42abc"));
// expected output: NaN

console.log(Number("42.3abc"));
// expected output NaN

Mutiply by 1

Using the feature of Javascript of assimilating data types, we can convert a string to number easily.

console.log("42" * 1);
// expected output: 42

console.log("42.3" * 1);
// expected output 42.3

Just like Number, this method cannot handle trailing non-numeric characters.

Unary operator '+'

This might be the simplest way to convert a string to number in Javascript even though it's not very well-known.

console.log(+"42");
// expected output: 42

console.log(+"42.3");
// expected output 42.3

Same as the 2 approches above, this approach cannot handle trailing non-numeric characters.

Conclusion

All the methods have cons and pros, make sure to choose the one that fit your need, your team and your work environment.

Show DEV: I built an Event Countdown app with React Native & Typescript

Arthur Dao — Sat, 28 Mar 2020 16:52:13 +0000

tldr: download it here

The App

I recently created an Events Countdown app for iOS.
Basically, user can create event like Birthday, Anniversary, ... and the app will show a countdown time until or since the event.
User can also add reminder days, weeks, months before or after the event.

Here is a demo video.
It's not shown in the video but the user can choose different display mode like: List, Grid or Carousel and sizes,...

It's free to use. You can create unlimited number of events, reminders, you can switch between dark/light theme... All the core features of an Event Countdown apps are free. But there are interstitial ads after the user created an event once in a while. (using facebook audience network and google admob).

Some premium features like layouts, online gallery, cloud syncing,... are unlocked through a subscription monthly or yearly.

Dev

About 9 months ago, I shared with you my tips when getting started with React Native along with my architecture typescript-react-native-starter that help you start quickly. And I learned a lot from you in the comments. This project is created with it!

I also tried to contribute some open-source components like:

react-native-easy-icon: wrapper component of react-native-vector-icons to use icon easily

import Icon from 'react-native-easy-icon';

<Icon type="feather" name="award" color="coral" size={21}/>

react-native-unsplash: The online gallery feature that you see from the video use directly this component. It's basically a photos browser using the unsplash api.
react-native-store-rate: I'm still testing this so I don't recommend you to use

All of my components above are written in typescript so it's kinda self-documented, I didn't have the time to update the documentation so PRs are welcome :).

The app is available on iOS only since I don't have an android device to test it on android and I don't want to publish an emulator-tested-only app.

You can test it here: https://apps.apple.com/us/app/timecount-day-counter/id1497946231

I would love to hear feedbacks from developers. Thank you!

How To Make Your React Native Apps Responsive

Arthur Dao — Fri, 09 Aug 2019 00:46:35 +0000

A few weeks ago, I posted my first article on Dev.to to talk about my React Native Stack and another developer asked me how do I ensure the consistency of my apps across different screen sizes.

I wrote a quick reply but today I decide to talk more about it as responsiveness is one of the first things every React Native developer
has to deal with.

Use flexbox

React Native's flexbox is one of the reasons why I love React Native.

You can make any kind of layouts you want easily with 2 simple attributs flex and flexDirection.

In the end, the layout adapt perfectly to screen sizes. Quote from React Native documentation

Flexbox is designed to provide a consistent layout on different screen sizes.

So just use flexbox everywhere, avoid absolute position

Avoid hard values

By hard values I means:

const container = {
    width: 100,
    height: 300,
};

And most of the times, hard values (especially big ones) will lead to this

Instead I use % as much as I can:

const container = {
    width: "10%",
    height: "30%",
};

Adapt hard values

Sometimes I can't avoid hard values so when I have to use them, I adapt them accordingly to the screen sizes using this function that I shared on my last post.

And I promised, I've created a package on npm so you can easily install and use it in your projects.

Without `normalize`

With `normalize`

react-native-normalize is a small and simple package that helps make your React Native app responsive easily.

It comes with a function normalize that will adapt a value depending on the screen's width or height so you can use it for width, height, top, bottom, fontSize, borderRadius,...

// on iPhone 8
normalize(100)          // = 100
normalize(50, 'height') // = 50

// on iPhone 5s
normalize(100)          // = 86
normalize(50, 'height') // = 43

// on iPhoneXs Max
normalize(100)          // = 110
normalize(50, 'height') // = 67

Dealing with notch (iOS)

React Native has the SafeAreaView component that avoids automatically the notch and the bottom area on iPhone X, Xs... but sometimes for various reasons (layout, animation,...), I can't use SafeAreaView.

That when I use react-native-iphone-x-helper, a library that comes with some useful functions that help me to deal with iPhoneX, Xs,... notch and bottom area. There are 2 of its functions that I use the most: getStatusBarHeight and getBottomSpace.

Android Dimensions

On android Dimensions.get('window').height sometimes returns the wrong value.
And when you use that returned height to do the calculations for your layout, that can create some problems.

So I use react-native-extra-dimensions-android, a package that give you the actual width and height of the screen (including elements such as soft menu bar), the soft menu height and the status bar height.

Test on different screens

I normally test my app on the iPhone 8 Emulator but when I've done the implementation, I will test it on 3 differents screen sizes:

iPhone5s (small)
iPhone8 (medium)
iPhoneXs Max (big)

So if your app looks great on these 3 screen sizes, you can be pretty sure that it will look just fine on most of the phones today.

My React Native Stack After 1 Year

Arthur Dao — Sun, 28 Jul 2019 10:57:49 +0000

For my first post on Dev.to, I want to share my React Native project structure, configurations and some tips. It contains most of the things I've learnt after 1 year of development with React Native, from the creation to the distribution.

I created a Github repository called typescript-react-native-starter that I now use for all my projects.
So I hope it's helpful for other developers who are new with React Native. And you are welcome to make PR :D

Features

I started to use Typescript recently after several projects which made me understand the importance of typed variables. It might take some time to learn at first but it's worth it. You might avoid hours maybe days of debugging thanks to Typescript.

Plus it makes your code self-documenting which is crucial for projects with severals developers.

Typescript
- React Native's typescript template based
Flux State management
- Redux: predictable state container
- Redux Persist: offline store
- Redux Saga: side effect model for Redux
- typesafe-actions: create typesafe actions easily

      import { action } from 'typesafe-actions';
      import * as types from './actionTypes';

      export const myAction = payload => action(types.MY_ACTION_TYPE, payload);

Navigation
- React Navigation: easy-to-use navigation solution based on Javascript
Unit testing
- Unit tests with Jest, Enzyme and react-native-testing-library
- Codecov: coverage report
CI/CD
- Run linting pre-commit and unit testing pre-push with husky's hooks
- Placeholder App Icon: useful for uploading your app to beta quickly with Fastlane
- App Icon generator: generate all required sizes, label and annotate icon.
- Placeholder feature graphic and screenshot to upload beta android app quickly
Linting
- Tslint configured with Airbnb styles
- Vscode Prettier compatible
Internationalization and localization
- react-native-localization: easy to use package for i18n
Others
- Cocoapods: iOS dependencies manager
- jetifier: transition tool for React Native 0.60 AndroidX migration
- autobind-decorator: bind your component's functions easily with a decorator

// Before
handleClick()  {...}

<button onClick={ this.handleClick.bind(this) }></button>

// After
@boundMethod
handleClick() {...}

<button onClick={ this.handleClick }></button>

Project Structure

The structure I used is inspired from many sources so you might find this familiar. I like to seperate my files by category except for some special ones like App.tsx, store.ts,...

The publishing folder also contains some useful placeholder images to deploy your app.
For example, in order to deploy your app on Google Play, even for Internal Testing, you would have to add screenshots, feature graphics,... It was ok at first but after several projects, it's kinda annoying so I decided to create some placeholder images for that.

├── __tests__                            // Unit tests
│   ├── App.test.tsx                     // App component's tests
│   ├── components
│   │   └── MyComponent.test.txs
│   └── ...
├── android
├── app.json
├── assets                               // All assets: images, videos, ...
├── index.js
├── ios
├── publishing                           // Icon, screenshots, preview,... for App Store & Play Store
└── src
    ├── App.tsx
    ├── actions                          // Actions
    │   ├── actionTypes.ts               // Action types
    │   └── app.ts                       // appReducer's actions
    ├── components                       // Components
    │   └── MyComponent.tsx
    ├── constants                        // Colors, sizes, routes,...
    │   └── strings.ts                   // i18n
    ├── containers                       // Screens, pages,...
    ├── lib                              // Libraries, services,...
    ├── index.tsx                        // Root component
    ├── reducers                         // Reducers
    │   └── app.ts                       // appReducer
    ├── sagas                            // Redux sagas
    ├── store.ts
    ├── types                            // Type declarations
    │   └── index.d.ts
    └── utils                            // Utilities

Useful tips

This section is for completely random but useful tips, feel free to share yours in the comment or make a PR.

NavigationService

You can navigate without navigation prop by using NavigationService from src/lib/NavigationService.ts

import NavigationService from '../lib/NavigationService';

//...

NavigationService.navigate('ChatScreen', { userName: 'Lucy' });

Cocoapod

When you run react-native link and the linked library has podspec file, then the linking will use Podfile. To disable this feature, remove

# Add new pods below this line

from line 24 in ios/Podfile

Static bundle

The static bundle is built every time you target a physical device, even in Debug. To save time, the bundle generation is disabled in Debug

react-native-screens

You can use react-native-screens with react-navigation in order to improve memory consumption

Install and follow steps in Usage with react-navigation (without Expo) from react-native-screens
Open ./src/index.tsx and uncomment

// import { useScreens } from 'react-native-screens';
// useScreens();

Responsiveness

Avoid as much as you can "absolute" position and hard values (100, 300, 1680,...) especially for big ones.
Use flex box and % values instead
If you have to use hard values, I have this normalize function for adapting hard values accordingly to the screen's width or height. I might upload it on the repository later:

import { Dimensions, Platform, PixelRatio } from 'react-native';

export const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get(
  'window',
);

// based on iphone X's scale
const wscale = SCREEN_WIDTH / 375;
const hscale = SCREEN_HEIGHT / 812;

export function normalize(size, based = 'width') {
  const newSize = based === 'height' ? size * hscale : size * wscale;
  if (Platform.OS === 'ios') {
    return Math.round(PixelRatio.roundToNearestPixel(newSize));
  } else {
    return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 2;
  }
}

So now I can use:

// iphone X
normalize(100) // = 100

// iphone 5s
normalize(100) // = maybe 80

// You can choose either "width" (default) or "height" depend on cases:
container = {
  width: normalize(100, "width"), // "width" is optional, it's default
  height: normalize(100, "height")
}

Before pushing, test your app on 3 differents emulators: iphone5s (small), iphone 8 (medium) and iphone Xs Max (big)

Beta distribution with Fastlane

Install fastlane

  # Using RubyGems
  sudo gem install fastlane -NV

  # Alternatively using Homebrew
  brew cask install fastlane

iOS

Open your project Xcode workspace and update your app's Bundle Identifier and Team
Initialize fastlane

  cd <PROJECT_NAME>/ios
  fastlane init

Distribute your app

  fastlane beta

Android

Collect your Google Credentials
Open your project with Android Studio and update your app's applicationId in build.gradle (Module: app) file
Select Generated Signed Bundle / APK... from the Build menu
Next then Create new... under Key store path then Next and Finish
The first time you deploy your application, you MUST upload it into Google Play Console manually. Google don't allow to use theirs APIs for the first upload.
Create your application in the Google Play Console (unlike for iOS Fastlane cannot do that for you)
Make sure that these 4 checkmark icons are green

Recommended order: Pricing & distribution, Content rating, Store listing and App releases

You can find the required assets for Store listing in the publishing/android folder
Initialize fastlane

  cd <PROJECT_NAME>/android
  fastlane init

Use the Fastfile from publishing

  cp publishing/android/fastlane/Fastfile android/fastlane

Distribute your app

  fastlane beta

There is no official plugin to automatically upgrade android version code (unlike the iOS lane).
Before each deployment, be sure to manually upgrade the versionCode value inside android/app/build.gradle.

Checkout the Fastlane's beta distribution guide for more details
Fastlane's documentation for React Native

Apple Store Connect's missing compliance

If you dont' use Fastlane and you don't want to Provide Export Compliance Information at every push , then add this to your Info.plist

<key>ITSAppUsesNonExemptEncryption</key>
<false/>

Note that you might have to set that to <true/> if your app uses encryption

Forem: Arthur Dao

Remove A Specific Element From An Array In Javascript

Splice

Filter

Delete operator

Push

So which one is the best?

Which one will you use?

React Native Flatlist Real World Use Cases Tutorial

Basic

Pull to refresh

Infinite load (Scroll loading)

Conclusion

Reference

Best Ways to Convert a String to Number in Javascript

parseInt()

parseFloat()

Number()

Mutiply by 1

Unary operator '+'

Conclusion

Show DEV: I built an Event Countdown app with React Native & Typescript

The App

Dev

How To Make Your React Native Apps Responsive

Use flexbox

Avoid hard values

Adapt hard values

Without normalize

With normalize

Dealing with notch (iOS)

Android Dimensions

Test on different screens

My React Native Stack After 1 Year

Features

Project Structure

Useful tips

NavigationService

Cocoapod

Static bundle

react-native-screens

Responsiveness

Beta distribution with Fastlane

iOS

Android

More

Apple Store Connect's missing compliance

Without `normalize`

With `normalize`