Summary:
A blog post with notes from the second React Native monthly meeting. I've gathered notes after the meeting in this blog post.
No test plan, submitting just a documentation file.
[DOCS] [ENHANCEMENT] [blog/2017-11-06-react-native-monthly-5.md] - Submitting notes from React Native monthly #5.
cc hramos
Closes https://github.com/facebook/react-native/pull/16694
Differential Revision: D6259640
Pulled By: hramos
fbshipit-source-id: 328ab6018300bef91bdc8561ac8cbd64d3d93129
Summary:
Prettier 1.7.0 has config file + pragma support so this works really well with the current prettier usage. Also added a prettier script to run it (taken mostly from the relay repo) and ran it which caused 1 files to change (probably wasn't updated when upgrading prettier to 1.7.0).
**Test plan**
Made sure flow still checked
Run 'yarn prettier', should format only files with `format` using the config in package.json.
Closes https://github.com/facebook/react-native/pull/16176
Differential Revision: D6256899
Pulled By: shergin
fbshipit-source-id: 646d90c15db8032b7b551da228d26d370babf125
Summary:
Allow end users to access the YellowBox API so that warnings can be properly ignored via the API first introduced in a974c140db. Based on that API, you should be able to do the following:
```
import { YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['Warning: ...']);
```
However, if you actually try this today, it results in a broken import error.
Verified using an expo instance. First tried without the YellowBox import, observed a failure to import. Then I added the import statement, and observed no warning on my device.
```
import React from 'react';
import { StyleSheet, Text, View, YellowBox } from 'react-native';
YellowBox.ignoreWarnings(['hey']);
export default class App extends React.Component {
render() {
console.warn('hey!');
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<Text>Changes you make will automatically reload.</Text>
<Text>Shake your phone to open the developer menu.</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
```
[GENERAL] [ENHANCEMENT] [YellowBox] - Export YellowBox API so warnings can be ignored using a non-deprecated API.
Closes https://github.com/facebook/react-native/pull/16709
Differential Revision: D6254819
Pulled By: hramos
fbshipit-source-id: ff92f32e4dedfb01f6902f54fabc62eb64468554
Summary:
update() is called from the choreographer, so it can be
invoked asynchronously relative to RN. If it's called while the node
tree is incomplete, this can be called with no parent. Don't treat an
unparented node as an invariant failure, just skip over it.
Reviewed By: AaaChiuuu
Differential Revision: D6249038
fbshipit-source-id: d22807dff1659bf29a81893ab97d0fe7c19de512
Summary:
This pr adds documentation for the tintColor addition of #4590
<!--
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.
You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html
Happy contributing!
-->
The tintColor was missing from the documentation but works perfectly fine.
Added a tintColor to showActionSheetWithOptions and showShareActionSheetWithOptions in the app i am building right now.
[DOCS][MINOR][ActionSheetIOS] - Added documentation for tintColor in ActionSheet.
Closes https://github.com/facebook/react-native/pull/16679
Differential Revision: D6248070
Pulled By: shergin
fbshipit-source-id: a2276f50b42ff2c5858008f3641c9607f248744a
Summary:
We noticed that on Android the lineHeight behaviour is different from iOS for built in fonts and custom fonts. The problem becomes visible when the lineHeight approaches the fontSize, showing a cut-off on the bottom of the TextView. This issue has been raised before in #10712. There is a mention of a PR with a fix in that issue, which has not been merged yet. This implementation is a less intrusive fix leaving the current lineHeight approach in place and fixing the discrepancy only.
This proposed change prioritises ascent over descent for reduction, making the lineHeight functionality behave identical to iOS.
There is no existing test covering the lineHeight property and its behaviour in the CustomLineHeightSpan. This PR contains new unit tests that covers the various scenario's for the lineHeight calculations.
The original behaviour, before the change can against these unit tests. The case that fails is `shouldReduceAscentThird`, which can be made to succeed on the old code by changing the asserts to:
```
assertThat(fm.top).isEqualTo(-5);
assertThat(fm.ascent).isEqualTo(-5);
assertThat(fm.descent).isEqualTo(-4);
assertThat(fm.bottom).isEqualTo(-4);
```
The unit test succeeds for the current implementation, which has the values for ascent and descent inverted.
Below screenshots show before, after and iOS:
BEFORE
AFTER
iOS
[ANDROID] [BUGFIX] [Text] - Fix the lineHeight behaviour on Android to match iOS
Closes https://github.com/facebook/react-native/pull/16448
Differential Revision: D6221854
Pulled By: andreicoman11
fbshipit-source-id: 7292f0f05f212d79678ac9d73e8a46bf93f1a7c6
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.
You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html
Happy contributing!
-->
While building a React Native application, I've come across the use case of wanting to set a specific locale for DatePickers irrespective of the users OS region setting. Since this is a feature available to native DatePicker components, I think it would be helpful to expose this in React Native as well.
Testing can be done by passing a `locale` prop to a DatePickerIOS. Example:
```
<DatePickerIOS
date={this.state.date}
mode="date"
locale="fr_FR"
onDateChange={date => this.setState({ date: date })}
/>
```
<!--
Help reviewers and the release process by writing your own release notes
**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 ] [ {File} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
[CATEGORY] [TYPE] [LOCATION] - 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
-->
[IOS][ENHANCEMENT][DatePickerIOS] - Adding a locale prop.
Closes https://github.com/facebook/react-native/pull/16639
Differential Revision: D6241981
Pulled By: hramos
fbshipit-source-id: 77b1b85c09f3e12d6b3e103b3d1ffd1f12e2cea9
Summary:
We don't strictly need this since all the other subspecs that use this set up the header search path for ReactCommon anyway but do it just for correctness.
Closes https://github.com/facebook/react-native/pull/16665
Differential Revision: D6241796
Pulled By: hramos
fbshipit-source-id: 19e6363e570d38f06ea970395d68b9cea7fd02ae
Summary:
On Ubuntu (and maybe other distros), the executable for the chromium browser is 'chromium-browser' instead of 'chromium'.
This commit calls 'chromium-browser' before calling 'chromium' if it exists.
Start an example app on Android with "react-native init project && react-native run-android". Open DevTools: it opens chromium correctly.
[CLI] [BUGFIX] [local-cli/server/utils/launchChrome.js] - Fix launchChrome for chromium on Ubuntu
Closes https://github.com/facebook/react-native/pull/16658
Differential Revision: D6241686
Pulled By: hramos
fbshipit-source-id: 5cd435c3c42c29f0916679298e62e7a323468e37
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.
You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html
Happy contributing!
-->
Improved documents by fixing a typo
No code was changed
<!--
Help reviewers and the release process by writing your own release notes
**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 ] [ {File} ]
[ IOS ] [ FEATURE ] [ {Directory} ] |-----------|
[ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} |
[----------] [-------------] [-------------] |-----------|
[CATEGORY] [TYPE] [LOCATION] - 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/16643
Differential Revision: D6241688
Pulled By: hramos
fbshipit-source-id: ffe6f8be369c95bb16fe82719dfc943bb6223191
Summary:
The current example of `Objective-C/Swift` component will not work cos of wrong module name in the example. If change `MyReactNativeApp` to the `RNHighScores` everything starts working.
[DOCS] [BUGFIX] [IntegrationWithExistingApps.md] - Wrong module name in the example.
Closes https://github.com/facebook/react-native/pull/16675
Differential Revision: D6241675
Pulled By: hramos
fbshipit-source-id: d1ce8764399c4589d99060fba726aae0a379f183
Summary:
Resolves#16663.
Walked through the reproduction steps in #16663, but with successful build.
We can also now see the files are included in the `Pods` project:
<img width="236" alt="screen shot 2017-11-03 at 7 43 21 pm" src="https://user-images.githubusercontent.com/33126/32390596-4a06c05c-c0cf-11e7-8616-3ae547f8cca2.png">
(I noticed a subspec called `_ignore_me_subspec_for_linting_` so do we have tests for the podspec?)
[IOS] [BUGFIX] [React.podspec] - Resolves build error about missing symbols for PrivateDatabase.{cpp,h}
Closes https://github.com/facebook/react-native/pull/16664
Differential Revision: D6238178
Pulled By: hramos
fbshipit-source-id: b57007ab8c7c8bd0faf1f2f11269a7a2c28183e5
Summary:
According to the retain code collector, RCTSafeAreaView is in a cycle:
-> _bridge -> RCTCxxBridge -> _moduleDataByName -> __NSDictionaryM -> RCTModuleData -> _instance -> RCTUIManager -> _viewRegistry -> __NSDictionaryM -> RCTSafeAreaView
This should break the cycle.
Reviewed By: shergin
Differential Revision: D6213668
fbshipit-source-id: efb9c1dd148b72f66fe4485b81c16cd4c2d18b17
Summary:
There are a number of $FlowFixMe statements in TarBarIOS.ios.js as a result of recent Flow upgrades introducing new errors/warnings. I had a stab at removing these statements and introducing what are hopefully sensible types.
Only types were changed so `yarn flow` should be sufficient.
[INTERNAL] [MINOR] [TarBarIOS] - |Fix $FlowFixMes|
Closes https://github.com/facebook/react-native/pull/16365
Differential Revision: D6200713
Pulled By: TheSavior
fbshipit-source-id: ecbd58d5831dd04250e794812ea03d202f777d12
Summary:
It would be great to have examples in the documentation of all components. I have created a PR to add an example for `CheckBox`, and now I am adding an example for the `Slider` component.
The PR changes documentation. No further test is required.
[DOCS][ENHANCEMENT][Slider] - Added example to documentation
Closes https://github.com/facebook/react-native/pull/16588
Differential Revision: D6197329
Pulled By: hramos
fbshipit-source-id: 91d1b20fc2d4bae15f9706ac4c155411d91af290
Summary:
Made link to a page more consistent with the linking style used throughout this file [e.g `hitSlop` and `TouchableNativeFeedback`], I almost missed the `'(See docs)'` link.
`TouchableNativeFeedback` was pointing to the wrong URL.
N/A
* [DOCS] [BUGFIX] [ImprovingUserExperience.md] - Adjusted link for `KeyboardAvoidingView`
* [DOCS] [BUGFIX] [ImprovingUserExperience.md] - Fix `TouchableNativeFeedback` URL
Closes https://github.com/facebook/react-native/pull/16609
Differential Revision: D6197335
Pulled By: hramos
fbshipit-source-id: 305d9cf7c9e870882fb74f503b800887d450edcf
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.
You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html
Happy contributing!
-->
I want to animate `shadowOpacity` style property with Native Animated (`useNativeDriver: true`). This is useful for example in an ios-like navigation transition where the shadow fades in with the view that is sliding in from the side. Code comment for `STYLES_WHITELIST` says:
_In general native animated implementation should support any numeric property that doesn't need to be updated through the shadow view hierarchy (all non-layout properties)._
so I just added `shadowOpacity` (and `shadowRadius` too because why not?).
Before this change, setting `shadowOpacity` (or `shadowRadius`) to an `AnimatedValue` (with `useNativeDriver: true`) would throw the error: `Style property 'shadowOpacity' is not supported by the native animated module`.
After adding `shadowOpacity` (and `shadowRadius`), there is no error. The animation looks correct so it seems to be working. I also tried setting a ridiculously large `shadowRadius` and could see that working too.
Please advice on any further testing I should do.
[IOS] [ENHANCEMENT] [NativeAnimated] - Allow `shadowRadius` and `shadowOpacity` as NativeAnimated style properties.
Closes https://github.com/facebook/react-native/pull/16603
Differential Revision: D6195364
Pulled By: hramos
fbshipit-source-id: a55630df43df3c8f9db9921dab0bfbf925b6a09f
Tomislav Tenodi
Jean Lauliac
Omri Gindi
Janic Duplessis
Alex Dvornikov
William Li
Jessica Cao
Marc Horowitz
Patrick Kempff
Dmitry Zakharov
Bartol Karuza
Wei Yeh
Robert Paul
James Ide
Nicolas Feignon
alpparkan
Jaroslav Khorishchenko
Aditya Kumar
Joshua May
Yujie Liu
Miguel Jimenez Esun
Dan Caspi
Jia Li
Avik Chaudhuri
Mehdi Mulani
Dan Zimmerman
Chris Lewis
Uts Sikder
Chandra Patni
Georgiy Kassabli
Pritesh Nandgaonkar
Héctor Ramos Ortiz
Brian Vaughn
Rafael Oleza
Adriano Melo
Liam Sheppard
Jakub Grzmiel
Andreas Amsenius
