Summary:
Fixes how the element inspector displays start and end styles (e.g. `marginStart` or `paddingEnd`).
@public
Reviewed By: TheSavior
Differential Revision: D8607581
fbshipit-source-id: e949927fd86e9b21a8ecf26fbf3e4863ad1486bd
Summary:
Fixes an off-by-one bug that was causing trailing single characters to be truncated from YellowBox.
This snuck in during the revamp of YellowBox. Whoops!
@public
Reviewed By: TheSavior
Differential Revision: D8607388
fbshipit-source-id: d0efac4dec361456ef58347a60eb1486a888624a
Summary:
There is a bug with the React Native element inspector when the inspected element has negative margins because negative margins actually subtract from the content width and height. This fixes the bug.
@public
Reviewed By: TheSavior
Differential Revision: D8607389
fbshipit-source-id: 2cea0d9160b5437fe775b2ba25373072bafd70b9
Summary: D8576087 has all the details. Merge conflict messed up the diff hence a new one.
Reviewed By: yungsters
Differential Revision: D8628053
fbshipit-source-id: 8b211864f8f9d6b56f9469396eaa1d8291bbb56f
Summary:
Added Smart Inversion Compatibility to Marketplace on iOS so that photos don't appear inverted
Added Property to View for Ignoring Color Inversion
Applied Property to Images on marketplace.
**Note: Android doesn't support smart inversion
Reviewed By: PeteTheHeat
Differential Revision: D8528543
fbshipit-source-id: 63caf592bc71e6fe9db7e70c72b56d32873be048
Summary:
@public
Added a property `accessibilityIgnoresInvertColors (boolean)` to Views which allows the Apple API `accessibilityIgnoresInvertColors` to be used in React Native.
Now, when a user has Display: Smart Invert enabled, you can set the property to be true, and things like photos and views with the property set to true will no longer be inverted when Smart Invert is enabled.
This property can also be applied to the Image Component.
Example Use Case:
```
<Image accessibilityIgnoresInvertColors={true} />
```
```
<View accessibilityIgnoresInvertColors={true} />
```
| Before | After |
| ------ | ----- |
|  | 
Reviewed By: PeteTheHeat
Differential Revision: D8549084
fbshipit-source-id: 82a3bc73c9e6d75d6b50ba013b88127f07692641
Summary: This brings Image a bit more inline with the .ios.js counterpart.
Reviewed By: yungsters
Differential Revision: D8557495
fbshipit-source-id: 263da529d1a2541b0168745c0141c3fc622a1883
Summary: Improving the exported type of Image on android so we can work on migrating the implementation off of createReactClass and propTypes.
Reviewed By: yungsters
Differential Revision: D8530549
fbshipit-source-id: dab0cb5034464b7939a0b04e8912bae916690e8c
Summary:
@public
A few people have been complaining, including me, that when we compile a react native project, there are a lot of warnings from xcode, suggesting to update the project build settings to the new recommendations.
I took the liberty to actually update the xcode projects, so we can finally have these gone, as well as replace some deprecated methods with the new suggested ones.
[IOS] [MINOR] [Xcode] - updated the Xcode projects with the latest suggestions from Xcode 9.3, and replaced a few deprecated methods of iOS with their new replacements.
Closes https://github.com/facebook/react-native/pull/19574
Reviewed By: shergin
Differential Revision: D8530135
Pulled By: hramos
fbshipit-source-id: b9c9ede0e07760cb2207caa6b468bd5c241848dc
Summary: These are the flow errors that resulted from this diff: P59723027
Reviewed By: sahrens
Differential Revision: D8454977
fbshipit-source-id: e10901d3ecfc541b25f2fefb18702629f0bbab71
Summary:
AssetsLibrary.framework --> Photos.framework; ReactNative
Port RN off of AssetsLibrary where trivial, lazy load AssetsLibrary where remaining.
Reviewed By: fkgozali
Differential Revision: D7999924
fbshipit-source-id: 1d48a2d820984564459ed43680cd3f601399d352
Summary:
These lines were causing erros with the e2e tests on ios.
There are some methods that are not going to be called, and some definitions that are not correct.
needed for #19574.
we will run the e2e tests.
[INTERNAL] [MINOR] [Tests] - Fix some definitions.
Closes https://github.com/facebook/react-native/pull/19790
Differential Revision: D8509228
Pulled By: hramos
fbshipit-source-id: 78650e347db52305a587e3461ac56877e3c79062
Summary:
A few people have been complaining, including me, that when we compile a react native project, there are a lot of warnings from xcode, suggesting to update the project build settings to the new recommendations.
I took the liberty to actually update the xcode projects, so we can finally have these gone, as well as replace some deprecated methods with the new suggested ones.
I made two react native projects, one with the regular react native and the other one using this branch.
Left is before, right is after:
[IOS] [MINOR] [Xcode] - updated the Xcode projects with the latest suggestions from Xcode 9.3, and replaced a few deprecated methods of iOS with their new replacements.
Closes https://github.com/facebook/react-native/pull/19574
Differential Revision: D8489006
Pulled By: hramos
fbshipit-source-id: 2922b2e76aca6883c4f5d04e9c511b9fc1029583
Summary:
This makes JSTimers actively register a callback for callImmediates.
Besides being generally tricky, circular dependency prevent compiling React Native code with bundlers that rely on concatenating module sources rather that evaluating code at the time of requiring, like Google Closure Compiler.
Sadly, Google Closure Compiler setup that prompted this change is complicated and brittle. And there are no good public tools to find circular dependencies among Haste-style modules (with unqualified require paths).
So some advice on a good test plan would be useful. Does Facebook have any tools to find circular dependencies with Haste-style requires?
FWIW, a check that worked for me was to replace all import paths in React Native from Haste style to normal relative paths (which I needed anyway) and then run [`madge`](https://www.npmjs.com/package/madge) on the code base:
```
$ ~/node_modules/.bin/madge --circular react-native/Libraries
Processed 390 files (7.4s) (81 warnings)
✖ Found 2 circular dependencies!
1) BatchedBridge/NativeModules.js > BatchedBridge/BatchedBridge.js > BatchedBridge/MessageQueue.js > Core/Timers/JSTimers.js
2) StyleSheet/flattenStyle.js > StyleSheet/StyleSheet.js
```
(The second cycle is already eliminated in a8e3c7f578).
[GENERAL] [MINOR] [MessageQueue] - MessageQueue implementation doesn't have a circular dependency on JSTimers.
Closes https://github.com/facebook/react-native/pull/19526
Reviewed By: hramos
Differential Revision: D8458755
Pulled By: yungsters
fbshipit-source-id: e753139b920ba1ad1a6db10f974c03ca195340c7
Summary:
Follow up to #18470, which has not yet landed in a release so we may want to hold off merging this until it has so that people receive the deprecation warning.
***
This PR removes the previously deprecated behavior of touchableHandleActivePressIn/Out (as well as onPressIn/Out being called on TV platforms for focus/blur. Instead, users should utilize the new `onFocus` and `onBlur` for these events.
This was because on TV platforms onPressIn/Out was overloaded to trigger for not only presses but these focus events as well. The normal behavior of true presses will still defer to touchableHandleActivePressIn/Out (which defers to onPressIn/Out).
<!--
Required.
Help reviewers and the release process by writing your own release notes. See below for an example.
-->
[TV] [BREAKING] [Touchable] - On TV platforms `onPressIn` and `onPressOut` on Touchables will now only be triggered for press events, not for focus/blur. Instead, you can use `onFocus` and `onBlur`.
<!--
**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
-->
Cc/ matthargett
Closes https://github.com/facebook/react-native/pull/19718
Differential Revision: D8450514
Pulled By: hramos
fbshipit-source-id: 818e85a338a451834b54d8965602699fc9b24e87
Summary:
Potential fixes for 18890. The issue was that when the setAttributedText method in RCTBaseTextInputView.m is called it does two main things:
Check that the attributed text that it receives is equal to the existing attributed text in the underlying backed up view ( backedTextInputView)
If not set the attributed text of the backed up view to the value passed into the method. This kills the dictation as it is effectively the equivalent of typing in the backed up text view.
self.backedTextInputView.attributedText = attributedText;
is the problem. It kills the dictation. It may have other effects as well.
In all cases I have seen the underlying text of the attributed string that is passed in the same as the text in the backedTextInputView, what was said to the dictation; however the attributes are different, which causes the isEqualToAttributedString: check to fail and thus the update happens, and the keyboard is killed.
Fix is to test for the underlying string equality not the attributed string equality when the input mode is dictation.
By necessity this had to be an integration test on an existing application. To test I enabled the keyboard and started the dictation. It worked with this fixes and not without. Will upload videos later.
This might break attributes on dictation, as it is happening. However anything set on the existing underlying text view should hold.
[IOS] [BUG] [Textinput] fixed an issue where the keyboard dictation ended abruptly.
Closes https://github.com/facebook/react-native/pull/19687
Differential Revision: D8450590
Pulled By: hramos
fbshipit-source-id: f97084131f98e9e0ed1f32111afc0f9f510f3b3b
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
Peter van der Zee
Tim Yung
Himabindu Gadupudi
Peter Argany
Ziqi Chen
Eli White
Bowen Li
Pavlos Vinieratos
Spencer Ahrens
Jeff Thomas
Héctor Ramos
Kirill Nikolaev
Kevin Gozali
Jay Phelps
Eoin Norris
hamaron
Jens Panneel
Mattijs Fuijkschot
Andrew Goodale
Reem Helou
