Summary:
Border radius already works properly with native animated but was not in the whitelisted props.
Tested in an app that animating border radius with native animated actually works.
[GENERAL] [ENHANCEMENT] [NativeAnimated] - Support border radius
Closes https://github.com/facebook/react-native/pull/18574
Differential Revision: D7415956
Pulled By: hramos
fbshipit-source-id: 6dd46bcdcb10c6a1956dd1f526212f33a4f44425
Summary:
We currently handle empty body poorly in the iOS blob implementation, this happens because of an early return that cause the blob response to not be processed by the blob module, resulting in an empty string as the body instead of a blob object. We also need to make sure to create an empty blob object when data is nil (empty body) as per the XMLHttpRequest spec. The Android implementation was already handling this properly.
Fixes#18223
Send a HEAD request
```js
fetch('https://apipre.monkimun.com/whoami', {
body: null,
method: 'HEAD',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
})
```
[IOS][BUGFIX][Blob] - Fix blob response parsing for empty body
Closes https://github.com/facebook/react-native/pull/18547
Differential Revision: D7415950
Pulled By: hramos
fbshipit-source-id: 56860532c6171255869f02a0960f55d155184a46
Summary:
This commit makes the websocket's delegate dispatch queue use `RCTWebSocketModule`'s method queue.
This fixes a bug where didReceiveMessage was called on the wrong queue, which is especially harmful if the websocket has a contentHandler expects to be running on the RCTWebSocketModule's method queue.
This also fixes the race condition where `_contentHandlers` and `_sockets` can be mutated from the main dispatch queue (the default in `RCTRSWebSocket`) and `RCTWebSocketModule`'s method queue.
Websockets still work, and hopefully crash less now.
- [iOS][BUGFIX][WebSocket] fix crashes caused by a race condition in websocket delegates.
Closes https://github.com/facebook/react-native/pull/18530
Differential Revision: D7394298
Pulled By: hramos
fbshipit-source-id: 230466ccb47ea532ced15cd7603256a19077b32b
Summary:
invertStickyHeaders was being set to "this.props.inverted" -- it should just inherit from the props of VirtualizedList instead, per discussion in https://github.com/facebook/react-native/issues/18471Fixes#18471
Pass "invertStickyHeaders: false" to a SectionList (or FlatList), and expect that your sticky headers stick to the bottom of the ScrollView, instead of the top.
none
[ANDROID] [BUGFIX] [SectionList] - invertStickyHeaders can now be set from SectionList or FlatList.
Closes https://github.com/facebook/react-native/pull/18524
Differential Revision: D7386163
Pulled By: hramos
fbshipit-source-id: 3b66dfca280e657303f69f98c5a8bc0df033f9f7
Summary: Simply moving it out of shims to not confuse React project
Reviewed By: bvaughn
Differential Revision: D7341846
fbshipit-source-id: b1a0cdb0caca977de744699521f42556699993a7
Summary:
Using platform checks can make it difficult to incorporate changes for other platforms (e.g. Windows).
Using a check for the underlying function accomplishes the same goal without relying on an Android-specific check. This change allows this JS file to be re-used instead of copied and modified.
[X] Run Jest tests
[X] Test in RNTester on simulators
[X] Test in Playground
No related PR's found :)
[GENERAL] [ENHANCEMENT] [Libraries/ReactNative/requireFabricComponent.js] - Simplified check against UIManager to support additional platforms, removing Android-specific check
Closes https://github.com/facebook/react-native/pull/18381
Differential Revision: D7336214
Pulled By: hramos
fbshipit-source-id: e936f1fdcf36556c528115ee3f79197883d7b7d4
Summary: The pull request that added this (#17397) simply forgot to remove the callback, which would cause crashes if the RCTNetInfo module was ever deallocated. While that usually doesn't happen in apps, it can if the user logs out and you need to wipe all the RCT modules (to remove user data, for instance).
Reviewed By: PeteTheHeat
Differential Revision: D7322999
fbshipit-source-id: e49ec7311b39920f7b7743a5854c0dda1dbccc73
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!
-->
The caret/cursor did not appear when the TextInput was empty. Found that the cause was because the frame of the TextInput had an height of 0
Just fill and clear a TextInput and the caret/cursor will always appear there.
<!--
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] [BUGFIX] [TextInput] - This was causing the cursor/caret to not appear since the size of the frame had an height of 0.
Closes https://github.com/facebook/react-native/pull/18355
Differential Revision: D7319723
Pulled By: shergin
fbshipit-source-id: b0249ab5493b6ac310d1898ff20c0bad78cf82c9
Summary:
Nested scrolling in scrollViews, listViews and flatLists are enabled on iOS by default, but needs to be enabled manually on Android. This PR introduces a `nestedScrollEnabled` property to ScrollViews to support nested scrolling on Android 21 and above.
Enabling nested scroll will resolve issues with coordinator layout in android and required to support a collapsing toolbar.
Tested on the test app. We are also using this property in our app currently to support scrolling behaviour required by coordinator layouts.
[ANDROID] [ENHANCEMENT] [ScrollView] - Added a prop to enable nested scrolling
Closes https://github.com/facebook/react-native/pull/18299
Reviewed By: sahrens
Differential Revision: D7256604
Pulled By: mdvacca
fbshipit-source-id: fb8b7f1b5bed39837a2066db7f2a8798d52a3fd6
Summary:
On Android there's no number-pad but numeric instead, for my use-case I need number only (without decimal and sign, for PIN input)
I write it so there's no breaking change for those already using the `TextInput` Component
None
[ANDROID][ENHANCEMENT][Component] Add number-pad keyboardType
Closes https://github.com/facebook/react-native/pull/18350
Reviewed By: achen1
Differential Revision: D7269721
Pulled By: mdvacca
fbshipit-source-id: 82571dce948e0cf2e4354dc46c69198ec69ba65a
Summary: Adding some explanation and examples of when to use these types.
Reviewed By: yungsters
Differential Revision: D7270185
fbshipit-source-id: c82f061ffb77e33133a59d268a08f7a95fd02fb6
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!
-->
On iOS, when the parent Text contains the `lineHeight` style prop, and the children are also Text components they don't inherit the lineHeight prop.
This is for **iOS** only.
Create a react-native project with React Native 0.54.0 or 0.54.1 and change the app to:
```js
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Text style={{ fontWeight: 'bold', lineHeight: 40 }}>
<Text style={{ color: 'orange' }}>I am bold and orange, </Text>
<Text style={{ color: 'red' }}>I am bold and red, </Text>
<Text style={{ color: 'blue' }}>I am bold and blue, </Text>
<Text style={{ color: 'purple' }}>I am bold and purple, </Text>
<Text style={{ color: 'yellow' }}>I am bold and yellow, </Text>
<Text style={{ color: 'pink' }}>I am bold and pink</Text>
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'black',
flex: 1,
justifyContent: 'center',
padding: 50,
},
});
```
It displays:
But should look like:
New <Text> iOS https://github.com/facebook/react-native/commit/2716f53
<!--
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] [MINOR] [Text] - Inherit lineheight
Closes https://github.com/facebook/react-native/pull/18340
Differential Revision: D7276655
Pulled By: shergin
fbshipit-source-id: 0fe26536bb74da77be8405911fc699a622bc0b2f
Summary:
A common UI pattern for list empty states is some text/images centered inside the visible part of the list. This is pretty hard to do currently because we wrap ListEmptyComponent with an extra view with no way to style it so we cannot just use `flex: 1` to make it fill the available space.
- Added an example of ListEmptyComponent in the FlatList example in RNTester
Before (no way to make ListEmptyComponent fill the space):
<img width="377" alt="screen shot 2018-03-05 at 5 24 15 pm" src="https://user-images.githubusercontent.com/2677334/37003152-129db3ac-209a-11e8-9600-110f10d57144.png">
After:
<img width="377" alt="screen shot 2018-03-05 at 5 09 20 pm" src="https://user-images.githubusercontent.com/2677334/37002809-e6971178-2098-11e8-8cf7-74bfb2f6a992.png">
- Tested some edge cases like returning null from the ListEmptyComponent
- Tested in an app that uses FlatList + ListEmptyComponent
[GENERAL] [MINOR] [VirtualizedList] - Don't wrap ListEmptyComponent in an extra view
Closes https://github.com/facebook/react-native/pull/18206
Differential Revision: D7266274
Pulled By: sahrens
fbshipit-source-id: 4636d2418474a4c86ac63e5e18a9afc391a518c5
Summary: Utilizing ES6 Classes instead of createReactClass lets us actually enforce the way Text is used via Flow.
Reviewed By: fkgozali
Differential Revision: D7227755
fbshipit-source-id: 8e8285f9ebb3783a0dc4837c37c163178910ff9f
Summary:
`<Image resizeMode="repeat" />` for Android, matching the iOS implementation (#7968). (Non-goal: changing the component's API for finer-grained control / feature parity with CSS - this would be nice in the future)
As requested in e.g. #14158.
Given https://github.com/facebook/fresco/issues/1575, and lacking the context to follow the specific recommendations in https://github.com/facebook/fresco/issues/1575#issuecomment-267004303, I've opted for a minimal change within RN itself.
It's likely that performance can be improved by offloading this work to Fresco in some clever way; but I'm assuming that the present naive approach is still an improvement over a userland implementation with `onLayout` and multiple `<Image>` instances.
- Picking up on a TODO note in the existing code, I implemented `MultiPostprocessor` to allow arbitrary chaining of Fresco-compatible postprocessors inside `ReactImageView`.
- Rather than extensively refactor `ImageResizeMode`, `ReactImageManager` and `ReactImageView`, I mostly preserved the existing API that maps `resizeMode` values to [`ScaleType`](http://frescolib.org/javadoc/reference/com/facebook/drawee/drawable/ScalingUtils.ScaleType.html) instances, and simply added a second mapping, to [`TileMode`](https://developer.android.com/reference/android/graphics/Shader.TileMode.html).
- To match the iOS rendering exactly for oversized images, I found that scaling with a custom `ScaleType` was required - a kind of combination of `CENTER_INSIDE` and `FIT_START` which Fresco doesn't provide - so I implemented that as `ScaleTypeStartInside`. (This is, frankly, questionable as the default behaviour on iOS to begin with - but I am aiming for parity here)
- `resizeMode="repeat"` is therefore unpacked by the view manager to the effect of:
```js
view.setScaleType(ScaleTypeStartInside.INSTANCE);
view.setTileMode(Shader.TileMode.REPEAT);
```
And the added postprocessing in the view (in case of a non-`CLAMP` tile mode) consists of waiting for layout, allocating a destination bitmap and painting the source bitmap with the requested tile mode and scale type.
Note that as in https://github.com/facebook/react-native/pull/17398#issue-285235247, I have neither updated nor tested the "Flat" UI implementation - everything compiles but I've taken [this comment](https://github.com/facebook/react-native/issues/12770#issuecomment-294052694) to mean there's no point in trying to wade through it on my own right now; I'm happy to tackle it if given some pointers.
Also, I'm happy to address any code style issues or other feedback; I'm new to this codebase and a very infrequent Android/Java coder.
Tested by enabling the relevant case in RNTester on Android.
| iOS | Android |
|-|-|
| <img src=https://user-images.githubusercontent.com/2246565/34461897-4e12008e-ee2f-11e7-8581-1dc0cc8f2779.png width=300>| <img src=https://user-images.githubusercontent.com/2246565/34461894-40b2c8ec-ee2f-11e7-8a8f-96704f3c8caa.png width=300> |
Docs update: https://github.com/facebook/react-native-website/pull/106
[ANDROID] [FEATURE] [Image] - Implement resizeMode=repeat
Closes https://github.com/facebook/react-native/pull/17404
Reviewed By: achen1
Differential Revision: D7070329
Pulled By: mdvacca
fbshipit-source-id: 6a72fcbdcc7c7c2daf293dc1d8b6728f54ad0249
Summary:
Don't lock out other non-iOS platforms (e.g. Windows) with an overly
specific check. This change allows this JS file to be re-used instead of copied and modified. There was one other instance of this pattern, but I'll submit it separate for easier cherry-picking.
Tested Android and iOS playground on simulators.
[GENERAL] [ENHANCEMENT] - some core ReactNative JS library files will be easier to re-use across RN platforms.
Closes https://github.com/facebook/react-native/pull/18308
Differential Revision: D7230803
Pulled By: hramos
fbshipit-source-id: 11e03183535a7453cee00dc1e795c27f2fd2bf5d
Summary:
The flow type for View using createReactClass was essentially `any`, allowing any Prop to be passed in, only pseudo enforced at run time via propTypes.
This diff converts View away from createReactClass and instead uses ReactNative.NativeComponent. This was previously typed as any as well which didn't buy us much. This change converts View to be an ES6 React class component to ensure proptypechecking, and exposes the methods copied from NativeMethodsMixin.
Reviewed By: yungsters
Differential Revision: D5933888
fbshipit-source-id: eae63b818203e0e86741f9f154ec9cf3498369e2
Janic Duplessis
Gustavo Gard
Jake
Danny Cochran
Andrew Chen (Eng)
Eli White
Héctor Ramos
Kevin Gozali
Jeff Hampton
Charles Dick
Sam Goldman
Peter Argany
Mehdi Mulani
Dmitry Zakharov
Cristiano Santos
tuncaulubilge
Brian Vaughn
Khaer Ansori
Alejandro Paredes Alva
Moti Zilberman
Vince Oppedisano
Matt Hargett
Jiajie Zhu
Tim Yung
Alex Dvornikov
Alexey Lang
