Summary:
The bug #18374 was caused by the loose condition to execute `stringByReplacingCharactersInRange` in the method `textInputShouldChangeTextInRange` . As a result, `findMismatch` wrongly returning `true` which ends up the Backspace event being fired in another `textInputShouldChangeTextInRange` call in `textInputDidChange`.
<!--
Required: Write your motivation here.
If this PR fixes an issue, type "Fixes #issueNumber" to automatically close the issue when the PR is merged.
-->
1. Pass all the tests by `yarn run test`
2. Run the following code and type any text. (This code is brought from #18374. Thank you michalpetrov!!) And then verify that 'Backspace' events are not emitted after clearing text
and entering any letters.
```javascript
type Props = {};
type State = {
text: string,
keys: string
};
export default class App extends Component<Props, State> {
state = {text: '', keys: ''}
render() {
return (
<View style={styles.container}>
<TextInput style={styles.textInput} value={this.state.text} onChangeText={this.onChangeText} onKeyPress={this.onKeyPress}/>
<Button title="Clear" onPress={this.onClear}/>
<Text>Text: {this.state.text}</Text>
<Text>Keys: {this.state.keys}</Text>
</View>
);
}
onChangeText = (text: string) => {
this.setState({text})
}
onKeyPress = ({ nativeEvent }: Object) => {
this.setState({keys: this.state.keys + nativeEvent.key + ', '})
}
onClear = () => {
this.setState({text: '', keys: ''})
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[IOS] [BUGFIX] [TextInput] - Fixed the bug where Backspace event was emitted when entering a character after clearing a text in TextInput by an empty string
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closes https://github.com/facebook/react-native/pull/18627
Differential Revision: D8436331
Pulled By: hramos
fbshipit-source-id: ec75a6ca926061cbf7cb106db652f2b4a71c9a0c
Summary:
This PR makes sure that changing the `keyboardType` props of `<TextInput>` is reflected while the text field has focus. It is something that is also discusses in #13782. The workaround mentioned in that issue using `key` causes the TextInput to re-render itself which has some undesired side-effects.
Fixes#13782
```javascript
export default class KeyboardTypeApp extends Component {
state = { keyboardType: 'default' };
toggleKeyboardType = () => {
this.setState({
keyboardType: this.state.keyboardType === 'default' ? 'numeric' : 'default'
});
}
render() {
return (
<View style={{ padding: 40 }}>
<TextInput autoFocus value="Press Toggle :)" keyboardType={this.state.keyboardType} />
<Button title="Toggle" onPress={this.toggleKeyboardType} />
</View>
);
}
}
```
<!--
Does this PR require a documentation change?
Create a PR at https://github.com/facebook/react-native-website and add a link to it here.
-->
[IOS] [ENHANCEMENT] [TextInput] - Keyboard layout now updates when changing `keyboardType` while it has focus
<!--
**INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.**
CATEGORY
[----------] TYPE
[ CLI ] [-------------] LOCATION
[ DOCS ] [ BREAKING ] [-------------]
[ GENERAL ] [ BUGFIX ] [ {Component} ]
[ INTERNAL ] [ ENHANCEMENT ] [ {Filename} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
EXAMPLES:
[IOS] [BREAKING] [FlatList] - Change a thing that breaks other things
[ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput
[CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with
[DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word
[GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position
[INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see
-->
Closes https://github.com/facebook/react-native/pull/19027
Differential Revision: D8416007
Pulled By: PeteTheHeat
fbshipit-source-id: c4f89ab3dc0819bca52feddbc9c7a9f62fd96794
Summary: This makes it so that `YellowBox` and its dependencies are completely stripped from production bundles.
Reviewed By: sahrens
Differential Revision: D8402545
fbshipit-source-id: 6993521280a02dfe5eab8863d12c46781f35444f
Summary:
The flow types for these were too restrictive.
Fixes https://github.com/facebook/react-native/issues/19093
Reviewed By: yungsters
Differential Revision: D8409550
fbshipit-source-id: e4774e8856efc998ff1fa6cdcbe7b0cb6db2c4e3
Summary: Uses `SafeAreaView` in the YellowBox inspector header so that it does not collide with the status bar.
Reviewed By: sahrens
Differential Revision: D8374861
fbshipit-source-id: e67358ac9268db8291cacf79df402f3bd5a2173d
Summary:
Thank you for sending the PR! We appreciate you spending the time to work on these changes.
Help us understand your motivation by explaining why you decided to make this change.
React Native provides an implementation of the Web "Console" API, which is a powerful mechanism for debugging and analyzing RN apps. However, one subset of the Console API that RN does not provide is the "grouping" functions, namely `console.group` and `console.groupEnd`. These functions provide a useful way to see how an application behaves within a different parts of an application hierarchy.
I modified the "RNTester" app to create a console group each time an example is tapped, and the group is ended when the "Back" button is tapped. Here is an example of the grouping as seen in the Xcode console.
<img width="651" alt="console grouping" src="https://user-images.githubusercontent.com/445421/37882070-d2ae7860-306d-11e8-8cf4-be843a864f43.png">
https://github.com/facebook/react-native-website/pull/270
[GENERAL] [ENHANCEMENT] [console.js] - Add `console.group()` and `console.groupEnd()` APIs, matching the Web Console API.
Closes https://github.com/facebook/react-native/pull/18555
Differential Revision: D7992131
Pulled By: hramos
fbshipit-source-id: 0d28896292563922240ae2100ed49e35b6d1f102
Summary: `width` and `height` are required for this style prop, for the sake of consistency (and Fabric). Callsites should set one of them to 0 instead of not specifying it.
Reviewed By: TheSavior, shergin
Differential Revision: D8371064
fbshipit-source-id: b0ffd6b6543ac5456a3708382966e7b3df241f7e
Summary:
Replaces the existing `YellowBox` with a modern one.
Here are the notable changes:
- Sort warnings by recency (with most recent on top).
- Group warnings by format string if present.
- Present stack traces similar to RedBox.
- Show status of loading source maps.
- Support inspecting each occurrence of a warning.
- Fixed a bunch of edge cases and race conditions.
Reviewed By: TheSavior
Differential Revision: D8345180
fbshipit-source-id: b9e10d526b262c3985bbea639ba2ea0e7cad5081
Summary:
Currently on iOS and Android focus/blur events trigger onPressIn/onPressOut. Based on discussions with people are several companies who use react-native we're proposing instead triggering new events onFocus/onBlur. Initial discussion on Slack with some from the core team on Slack seemed positive.
Couple reasons:
* The current API behavior overloads onPressIn/onPressOut. That means on platforms like react-native-web, if focus/blur support was added (as we're hoping for), even though onPressIn/onPressOut would be useful as the name describes, you wouldn't be able to distinguish between it and browser element focus/blur events.
* The names aren't as self-documenting/intuitive as onFocus/onBlur, especially for react-dom users.
There aren't any current tests around this, but I intend to add them if we solidify the API.
There's also an option question on the transition--do we deprecate the existing API with a warning? This PR just deprecates them, though it will on any TV platform when something becomes focused regardless of whether they use the API or not. This isn't ideal. It's not clear if there are alternatives or if just right away breaking the API for TV users is the correct solution, if we can get consensus between the few parties who are using it.
***
I'm interested to hear counter points or prior discussions.
Cc/ matthargett dlowder-salesforce rozele
Closes https://github.com/facebook/react-native/pull/18470
Differential Revision: D8368109
Pulled By: hramos
fbshipit-source-id: 22587b82e091645e748b6c2d721fdff06d54837f
Summary: When a third party library is vendored, both the original copyright header as well as React Native's header are required.
Reviewed By: fkgozali
Differential Revision: D8284116
fbshipit-source-id: 1748eb011c843a87e9ed421597571b66334edfd2
Summary:
This PR fixes a bug in `deepFreezeAndThrowOnMutationInDev` which did not take into account that objects passed to it may have been created with `Object.create(null)` and thus may not have a prototype. Such objects don't have the methods `hasOwnProperty`, `__defineGetter__`, or `__defineSetter__` on the instance.
I ran into an unrecoverable error in React Native when passing this type of object across the bridge because `deepFreezeAndThrowOnMutationInDev` attempts to call `object.hasOwnProperty(key)`, `object.__defineGetter__` and `object__defineSetter__` on objects passed to it. But my object instance does not have these prototype methods.
Changes:
* Defined `Object.prototype.hasOwnProperty` as a `const` (pattern used elsewhere in React Native)
* Modified calls to `object.hasOwnProperty(key)` to use `hasOwnProperty.call(object, key)` (Per ESLint rule [here](https://eslint.org/docs/rules/no-prototype-builtins))
* Modified calls to deprecated methods `object.__defineGetter__` and `object.__defineSetter__` to instead use `Object.defineProperty` to define get and set methods on the object. (Per guidance on [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__))
* Added a new test to `deepFreezeAndThrowOnMutationInDev-test` to verify the fix.
I tried to create a reproducible example to post to Snack by passing prototype-less objects to a `Text` component, in various ways, but they appear to be converted to plain objects before crossing the bridge and therefore they do not throw an error.
However, I was able to create a new test to reproduce the issue. I added the following test to `deepFreezeAndThrowOnMutationInDev-test`:
```JavaScript
it('should not throw on object without prototype', () => {
__DEV__ = true;
var o = Object.create(null);
o.key = 'Value';
expect(() => deepFreezeAndThrowOnMutationInDev(o)).not.toThrow();
});
```
The changes in this PR include this new test.
ESLint test produced no change in Error count (3) or Warnings (671)
N/A
Other areas with _possibly_ the same issue:
c6b96c0df7/Libraries/vendor/core/mergeInto.js (L50)8dc3ba0444/Libraries/ReactNative/requireNativeComponent.js (L134)
[GENERAL] [BUGFIX] [Libraries/Utilities/deepFreezeAndThrowOnMutationInDev] -Fix for compatibility with objects without a prototype.
Closes https://github.com/facebook/react-native/pull/19598
Differential Revision: D8310845
Pulled By: TheSavior
fbshipit-source-id: 020c414a1062a637e97f9ee99bf8e5ba2d1fcf4f
Summary:
Change message in Animated.Interpolation to "inputRange must be monotonically non-decreasing" as it's allowed to give the same x's like in the test [example](4435f08771/Libraries/Animated/src/__tests__/Interpolation-test.js (L71))
Simply giving improper value of interpolation input
[GENERAL] [MINOR] [AnimatedInterpolation.js] - Change error message on interpolation improper range error
Closes https://github.com/facebook/react-native/pull/19571
Differential Revision: D8310791
Pulled By: TheSavior
fbshipit-source-id: 803ef55104ad2a36231c5f18c0c089bd14822bf3
Summary:
Bump Prettier to use version 1.13.4
All code changes are caused by running Prettier and should only affect files that have an `format` header.
All other changes caused by yarn.
Reviewed By: ryanmce
Differential Revision: D8251255
fbshipit-source-id: 0b4445c35f1269d72730f2000002a27c1bc35914
Summary:
This uses the reference for `libfishhook.a` from the Products, rather than
the reference from the Frameworks group.
This fixes the build for the new Xcode build system, on both Xcode 9 and
Xcode 10.
Fixes#19569
- Using Xcode 10:
- Open `RNTester/RNTester.xcodeproj`
- Build RNTester, noting build errors
- Using Xcode 9:
- Open `RNTester/RNTester.xcodeproj`
- Switch to using new build system in `File > Project Settings > Build System`, selecting `New Build System (Preview)`
- Build RNTester, noting build errors
none
[IOS] [BUGFIX] [RCTWebSocket] - Fix build for new Xcode build system
Closes https://github.com/facebook/react-native/pull/19579
Differential Revision: D8287487
Pulled By: hramos
fbshipit-source-id: 5bfc9decb09ebc763824df8474b5897099d39ad7
Summary:
This pr makes a little bit simpler to dismiss all warnings (1 click instead of 2)
Sometimes you don't want to use `YellowBox.ignoreWarnings` to remember.
RNTester sceenshot:
<img width="322" alt="screen shot 2018-05-30 at 09 51 25" src="https://user-images.githubusercontent.com/1488195/40701475-1142506a-63ef-11e8-8fc9-ea1696d9cb65.png">
Or RNTester -> Native Animation Example -> Force JS Stalls (in the end of the list) also cause warning to test.
[GENERAL][ENHANCEMENT][YellowBox] - Move `Dismiss All` yellow box button to another place which makes a little bit simpler to dismiss warnings.
Closes https://github.com/facebook/react-native/pull/19501
Differential Revision: D8243823
Pulled By: hramos
fbshipit-source-id: 31887469cddb4adfd7b889ae0c29a3bf41e87b7b
Summary:
As we migrate over to static typing solutions for props, we cannot rely on always having `propTypes` available at runtime.
This gets us started on that journey by removing the native prop validation that happens when we require native components.
bypass-lint
Reviewed By: TheSavior
Differential Revision: D7976854
fbshipit-source-id: f3ab579a7f0f8cfb716b0eb7fd4625f8168f3d96
Summary:
Jest will now exclude undefined props from snapshots (https://github.com/facebook/jest/pull/6162). Updating the snapshots should fix the current `test_javascript` failures.
Circle CI
[INTERNAL][MINOR][Snapshots] - Update snapshots
Closes https://github.com/facebook/react-native/pull/19414
Differential Revision: D8125193
Pulled By: hramos
fbshipit-source-id: db8dcfcd8afbf9d6256f83c6e922680a7872d776
Summary:
While investigating an issue about blobs (https://github.com/facebook/react-native/issues/18223), I noticed that the fetch polyfill (https://github.com/github/fetch) uses blobs as the response type by default if the module is available (https://github.com/github/fetch/blob/master/fetch.js#L454). This surfaced some issue with the blob implementation on iOS that has since been fixed.
However after further review of the fetch polyfill and the way Blobs work in RN, I noticed a major issue that causes blobs created by fetch to leak memory. This is because RN blobs are not deallocated automatically like in the browser (see comment https://github.com/facebook/react-native/blob/master/Libraries/Blob/Blob.js#L108) and the fetch polyfill does not deallocate them explicitly using the close method.
Ideally we should implement automatic blob cleanup when the instance is garbage collected but implementing that is probably somewhat complex as it requires integrating with JSC. For now I suggest disabling the default handling of requests as blobs in the fetch polyfill. This will mitigate the issue for people not using Blobs directly. I'm not sure how well documented the Blob module is but we should make it clear that they currently require explicit deallocation with the close method for people using them directly.
Run a simple http request using fetch and make sure it does not use the Blob module anymore.
[GENERAL] [BUGFIX] [fetch] - Do not use blobs to handle responses in the fetch polyfill, fixes potential memory leak.
Closes https://github.com/facebook/react-native/pull/19333
Differential Revision: D8125463
Pulled By: hramos
fbshipit-source-id: 8f4602190dfc2643606606886c698e8e9b1d91d1
Summary:
Spotted a few typos while going through the source code
No tests are required
[INTERNAL] [MINOR] [Webview] - Fixed typos
Closes https://github.com/facebook/react-native/pull/19462
Differential Revision: D8176774
Pulled By: hramos
fbshipit-source-id: f1a9024b210e1a935dcdccd7e27daedb71d794bc
Summary:
StrictMode compliance is important for Async Rendering and other Future Tech(tm).
Also clean up some lint.
== Test Plan ==
* No more StrictMode warnings for `FlatList` (`VirtualizedList` is another story....).
* props warnings still show up when appropriate.
Reviewed By: sophiebits
Differential Revision: D8026333
fbshipit-source-id: e6fa2f02d546b883df6f3cff8776c26c6ef91bc9
Eli White
hamaron
Jens Panneel
Tim Yung
Mattijs Fuijkschot
Andrew Goodale
Reem Helou
Kevin Gozali
Spencer Ahrens
Jay Phelps
Felix Yan
Héctor Ramos
Oleksandr Sokolov
Keith Brown
Michał Osadnik
Peter van der Zee
Eli Perkins
Sokovikov
Logan Daniels
Peter Ammon
Alexey Lang
Ziqi Chen
Janic Duplessis
Chirag Shah
