Android padStart is undefined, likely needs to be polyfilled

[callmetwan]

When testing on Android 5.0+ (Google API 22+) I found that calls to padStart would result in "undefined is not a function". Polyfilling it manually resolved the issue in Android 5.0+. My polyfill fix was a verbatim copy/paste of the polyfill example on MDN's padStart . This error does not happen when debugging remotely. If my understanding is correct, this is due to differences in Chrome's JS engine vs React Natives implementation.

I found related issue #17442 where this error was occurring on iOS. I opened a separate issue because this was happening on Android.

Environment

#####Environment:
OS: macOS Sierra 10.12.6
Node: 9.5.0
Yarn: Not Found
npm: 5.6.0
Watchman: 4.9.0
Xcode: Xcode 9.2 Build version 9C40b
Android Studio: 3.0 AI-171.4443003

#####Packages: (wanted => installed)
react: ^16.2.0 => 16.2.0
react-native: ^0.53.3 => 0.53.3

Expected Behavior

Calls to padStart should return a value according to MDN

Actual Behavior

Calls to padStart result in an error of "undefined is not a function"

Steps to Reproduce

Call padStart on a string.

const test = 'hello'
console.log(test.padStart(2, '0')) // results in 'undefined is not a function'

Reproducible Demo

https://snack.expo.io/ByAN82Itz

[react-native-bot]

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest stable release?

Thank you for your contributions.

_{How to Contribute • What to Expect from Maintainers}

[callmetwan]

Oof, didn't even notice there was a new RN version.

That being said, the Expo Snack test I included still fails, I assume that is running the latest version of RN.

[csamyphew]

I went into same problem, instead of updating version. I use lodash padstart function and it works!!

[Tonacatecuhtli]

Hi,

I'm using react-native version "0.54.2" and the error still occurs.

[og24715]

I got the same error using react-native version 0.55.2.

[phzbox]

Same on 0.54.0

[ikbalmoh]

Any update?

[Tonacatecuhtli]

Still an issue with "0.55.4"

[ulfgebhardt]

Bump - same Problem

Solution for now is:

import _ from "lodash";
const padded_string = _.padStart('MyString', 2, '0');

[numen31337]

Can reproduce with "0.56". For some reason only on the Android without attached debugger.

[rptwsthi]

Happening to me too, on iOS it works fine but android give the issue. This one helped:

#18375 (comment)

[gbertoncelli]

With Android 7.0 and latest version of react native this bug does not occurs anymore... For the older version is there some workaround?

[esutton]

I started testing my app on Android again and thought I was going to have to go back and replace it all with lodash padStart() all over again.

Work-Around Polyfill

Adding this polyfill to my App.js made Android like myString.padStart() again.

// Android did not like padStart() without this polyfill and
// I did not want to go back to add lodsash all over again.
// https://github.com/uxitten/polyfill/blob/master/string.polyfill.js
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
/* eslint-disable no-extend-native */
/* eslint-disable no-param-reassign */
/* eslint-disable no-bitwise */
if (!String.prototype.padStart) {
  String.prototype.padStart = function padStart(targetLength, padString) {
    targetLength >>= 0; // truncate if number, or convert non-number to 0;
    padString = String(typeof padString !== 'undefined' ? padString : ' ');
    if (this.length >= targetLength) {
      return String(this);
    }
    targetLength -= this.length;
    if (targetLength > padString.length) {
      // append to original to ensure we are longer than needed
      padString += padString.repeat(targetLength / padString.length);
    }
    return padString.slice(0, targetLength) + String(this);
  };
}

[thymikee]

React Native 0.59 shipped with modern JSC (JavaScriptCore engine) on Android, which supports String.padStart, so please upgrade :)