Commit Graph

533 Commits

Author SHA1 Message Date
Semen Zhydenko 8ffc16c6e7 Typos in code
Summary:
To fix typos

No testing required, changed only internal things names

No

addtionalStyles -> additionalStyles
occured -> occurred
recomendedType -> recommendedType
markDirtyAndPropogate -> markDirtyAndPropagate
targetting -> targeting
RCTApplyTranformationAccordingLayoutDirection -> RCTApplyTransformationAccordingLayoutDirection (tranform -> transform)
Closes https://github.com/facebook/react-native/pull/17587

Differential Revision: D6832696

Pulled By: shergin

fbshipit-source-id: 452287e5ce82df5c6b87126cb21889b7bd9d73c1
2018-01-29 19:17:33 -08:00
Adam Putinski 31288161e1 Add accessibilityElementsHidden prop
Summary:
Allow iOS to have similar accessibility functionality to Android. This PR exposes the `accessibilityElementsHidden` property on iOS which is similar to Android's `importantForAccessibility="no-hide-descendants"`

I didn't see any existing examples for testing native props being passed through, but I did add an example to the RNTester app. I've attached some screenshots using the Accessibility Inspector to verify the property was correctly passed through.

![a](https://user-images.githubusercontent.com/603528/34998153-50e66776-faac-11e7-826d-1445a6813929.png)
![b](https://user-images.githubusercontent.com/603528/34998158-535a7420-faac-11e7-80d4-992fb7cd82dd.png)

I've updated the website with appropriate documentation.

https://github.com/facebook/react-native-website/pull/141

![screen shot 2018-01-16 at 10 23 50](https://user-images.githubusercontent.com/603528/34998202-6f2f39a6-faac-11e7-8651-0cfe8e037a30.png)
![screen shot 2018-01-16 at 10 23 59](https://user-images.githubusercontent.com/603528/34998205-711d6f94-faac-11e7-974d-54340c72fce4.png)

[IOS] [FEATURE] [View] - Added accessibilityElementsHidden property
Closes https://github.com/facebook/react-native/pull/17627

Differential Revision: D6806444

Pulled By: hramos

fbshipit-source-id: 50d31fdb92f4c59ae9355b019c422418b2e6cc24
2018-01-29 14:44:11 -08:00
Valentin Shergin e3ff3cf6cb Removed outdated assertion in RCTShadowView related to breaking change in Yoga
Summary: It's been more than two years; I think everyone already migrated and learned the new behavior.

Reviewed By: emilsjolander

Differential Revision: D6829885

fbshipit-source-id: a86d56fb7235a137e9ce6e360d7ae2224b047313
2018-01-29 10:47:14 -08:00
Vojtech Novak ed5872e2cc Make sure refreshControl shows up on initial render if specified
Summary:
[this commit](2e1707d0e6) which was just a small refactor broke refreshControl behavior - if we render FlatList with refreshing=true, the refreshControl won't be visible on initial render.

The problem is, the [previous beginRefreshing method](2e1707d0e6 (diff-cfafa8d7e42ab87ab863f917e187a4aeL51)) was renamed to `beginRefreshingProgramatically` and the old call was left in one place [here](2e1707d0e6 (diff-cfafa8d7e42ab87ab863f917e187a4aeR47)).

Now, I am not sure what kind of jumping the mentioned commit was fixing, but since this fix only concerns the initial render, I believe it will not influence the jumping fix.

I have tested this locally in my app, can provide a video if needed.

none

 [IOS] [BUGFIX] [RefreshControl] - Make sure refreshControl shows up on initial render if specified
Closes https://github.com/facebook/react-native/pull/17727

Differential Revision: D6827402

Pulled By: shergin

fbshipit-source-id: 25849244e87af54f25d636b6ade7adcf88958980
2018-01-28 22:29:51 -08:00
Valentin Shergin 2716f53220 The New <Text> on iOS
Summary:
This is a complete rewrite of RCTText, the part of React Native which manages Text and TextInput components.

Key points:

* It's understandable now. It follows a simple architectural pattern, and it's easy to debug and iterate. Text flow layout is a first-class citizen in React Native layout system now, not just a wired special case. It also brings entirely new possibilities such as nested interleaving <Text> and <View> components.
* All <Text>-specific APIs were removed from UIManager and co (it's about ~16 public methods which were used exclusively only by <Text>).
* It relies on new Yoga measurement/cloning API and on-dirty handler. So, it removes built-in dirty propagation subsystem from RN completely.
* It caches string fragments properly and granularly on a per-node basis which makes updating text-containing components more performant.
* It does not instantiate UIView for virtual components which reduces memory utilization.
* It drastically improves <TextInput> capabilities (e.g. rich text inside single line <TextInput> is now supported).

Screenshots:
https://cl.ly/2j3r1V0L0324
https://cl.ly/3N2V3C3d3q3R

Reviewed By: mmmulani

Differential Revision: D6617326

fbshipit-source-id: 35d4d81b35c9870e9557d0211c0e934e6072a41e
2018-01-24 00:03:01 -08:00
Spencer Ahrens 65184ec6b0 rename and extend new maintain visible content position feature
Summary:
Builds off of cae7179c94

- Make the prop a dictionary for more configuration options
- Rename `maintainPositionAtOrBeyondIndex` -> `maintainVisibleContentPosition` + `minIndexForVisible`
- Add autoscroll threshold feature

Given the async native of RN JS and background layout, there is no way to trigger the scrollTo from JS without risking a delay, so we add the feature in native code.

== Test Plan ==
ScrollViewExample:
https://youtu.be/pmY8pxC9PRs

Reviewed By: shergin

Differential Revision: D6729160

fbshipit-source-id: 70f9bae460ce84567857a4f696da78ce9b3b834c
2018-01-18 14:01:50 -08:00
Valentin Shergin 6882132421 Introduced -[RCTShadowView contentFrame]
Summary:
Another trivial sugar/helper to access computed by Yoga layout metrics.
We will use it soon in the new Text render/layout engine.

Reviewed By: mmmulani

Differential Revision: D6671979

fbshipit-source-id: d36933415c2fa50bae5cc171434d8f0b281955b7
2018-01-16 12:57:46 -08:00
Semen Zhydenko d2c569795c Typos in comments and log messages
Summary:
No code changes, no testing required.

alligned -> aligned
allignment -> alignment
completly -> completely
conseptually -> conceptually
decendents -> descendants
indefinetly -> indefinitely
dimention -> dimension
doesnt -> doesn't
safegaurd -> safeguard
intialization -> initialization
hierachy -> hierarchy
happend -> happened
gaurd -> guard
programatically -> programmatically
initalized -> initialized
immidiately -> immediately
occured -> occurred
unkown -> unknown
neccessary -> necessary
neccesarily -> necessarily
occuring -> occurring
comoponent -> component
propogate -> propagate
recieved -> received
referece -> reference
perfomance -> performance
recieving -> receiving
subsquently -> subsequently
scoll -> scroll
suprisingly -> surprisingly
targetting -> targeting
tranform -> transform
symetrical -> symmetrical
wtih -> with
Closes https://github.com/facebook/react-native/pull/17578

Differential Revision: D6718791

Pulled By: shergin

fbshipit-source-id: 4ab79c1131ec5971d35a0c7199eba7ec0a0918ad
2018-01-12 22:18:45 -08:00
Spencer Ahrens cae7179c94 new feature to support smooth bi-directional content loading
Summary:
== Problem / Background ==

Most lists paginate in a single direction (standard infinite list), but some paginate in both directions. Most common example is a chat thread where new messages show up on the bottom, and old content can be loaded by scrolling up. Comment threads are another example.

Right now, adding content to the bottom of a scroll view is smooth - the content doesn't jump. But when adding to the top of the scrollview, the content gets pushed down, which is jarring (note this may appear reversed because of inverting the list which is common for chat applications).

== Approach ==

The basic idea is simple - we set a flag in JS, then for every uimanager transaction, we record which is the first eligible and visible view in the ScrollView, and compare it's new origin to the old one. If it has changed, we update the contentOffset of the ScrollView to compensate.

This is done by observing `willPerformMounting` directly (only from scrollviews that have this new property set), and then observing the prev state with prependUIBlock and making the update synchronously in addUIBlock to avoid any flicker.

There is also a way to skip views that we don't care about, like a spinner at the top of the view that we don't want to stay in place - we actually want it to get pushed up by the new content, replaced visually in the viewport.

== Notes ==

Most chat applications will probably want to do a scrollToTop when new content comes in and the user is already scrolled at or near the bottom.

This is glitchy if visible children are re-ordered, which could be fixed with additional logic, but it doesn't come up in the type of applications we're targetting here so punting on that.

== Test Plan ==

https://youtu.be/4GcqDGz9eOE

Reviewed By: shergin

Differential Revision: D6696921

fbshipit-source-id: 822e7dfcb207006cd1ba098356324ea81f619428
2018-01-12 19:16:00 -08:00
Stepan Hruda 2c74f93a62 Change setProjectRoot argument to NuclideUri
Reviewed By: matthewwithanm

Differential Revision: D6624825

fbshipit-source-id: 06df9af5c7be321b19f13efa8125fb10d8e00422
2018-01-10 12:32:55 -08:00
Douglas 3bd89867d6 Import RCTTVRemoteHandler only on tvOS
Summary:
Fix issue #17027 (`RCTModalHostView` has a tvOS dependency that was not wrapped in `TARGET_OS_TV`)

Existing test automation should pass.

[GENERAL] [BUGFIX] [tvOS] Fix cocoapods compile issue in RCTModalHostView
Closes https://github.com/facebook/react-native/pull/17502

Differential Revision: D6688166

Pulled By: hramos

fbshipit-source-id: 38297f439f75a8303f59f83b92e004c6c73d9bf6
2018-01-09 15:46:47 -08:00
Valentin Shergin f96f9c5fd6 Sideeffectless measuring of shadow views
Summary:
That's now possible thanks to new Yoga's clonning API.
That will speed up RCTSurface measuring (see the next diff in stack) and should illuminate a class of problems in CK interop layer.
We also will use it in the new text layout engine (in React Native).

Reviewed By: gkassabli

Differential Revision: D6665632

fbshipit-source-id: e94909f0af89e9c7fc5e46b95090ecb3c52546a2
2018-01-07 18:31:20 -08:00
Valentin Shergin d9e5b313bb Helpers for proper conversion float values between CG and YG representations
Summary:
Yoga and CoreGraphics have different opinions about how "infinity" value
should be represented.
Yoga uses `NAN` which requires additional effort to compare all those values,
whereas GoreGraphics uses `GFLOAT_MAX` which can be easyly compared with
standard `==` operator.

Messing with this can cause super weired bugs like 100% CPU load for couple of seconds somewhere in CoreGraphics.

Reviewed By: mmmulani

Differential Revision: D6665633

fbshipit-source-id: b6236c6fa50d1f8fb0c9576203922f7b24b7301e
2018-01-07 18:31:20 -08:00
Valentin Shergin af226ef949 Designated methods to control dirty propagation
Summary:
Those are supposed to replace all `dirtyText`, `dirtyPropagation`, `isPropagationDirty`, `setTextComputed`, `isTextDirty` and so on.
We will use it widely soon (and remove all old ones).

Reviewed By: mmmulani

Differential Revision: D6665634

fbshipit-source-id: 3c1db7154e90b71446756f2495627b163c779996
2018-01-07 18:31:20 -08:00
Pieter De Baets a0ff8c7706 Fix ReactLegacy and delete RCTViewControllerProtocol
Summary:
It's always bothered that we have this protocol and I figured it could just be merged with RCTWrapperViewController.
Closes https://github.com/facebook/react-native/pull/17290

Reviewed By: mmmulani

Differential Revision: D6611544

Pulled By: javache

fbshipit-source-id: a50b9d5adbeb2c48dbadbbfc1c77ccf6d1aae144
2017-12-20 15:20:00 -08:00
Valentin Shergin 0ae4c47daa `-[UIView _DEBUG_reactShadowView]` was removed
Summary:
Nobody uses it.
If the reference to the bridge is available (which is should be case for testing purposes at least), it is easy to get same information.

Reviewed By: mmmulani

Differential Revision: D6596376

fbshipit-source-id: 066eeb1e9465b4e0cc9d9b5b6bf41722450870e4
2017-12-19 23:46:09 -08:00
Valentin Shergin 7d1dedadd7 New implementation of handling `didUpdateReactSubviews` and `didUpdateReactSubviews` events
Summary:
Motivation:
* Current implementation of `didUpdateReactSubviews` relies on `processUpdatedProperties:parentProperties:` method of RCTShadowView, which we plan to remove.
* The existing implementation does not call handlers on unmounted nodes (because they are not part of traversing tree), which is not correct.
* The current implementation is tight with RCTComponentData, which is conceptually wrong, it should be a UIManager thing.
* The new implementation must be much more performant because of simplicity. (We can measure it only after removing `processUpdatedProperties`.)

Reviewed By: mmmulani

Differential Revision: D6595780

fbshipit-source-id: a517207c17b5d5db839c9ce99a37136292acf78c
2017-12-19 23:46:09 -08:00
Valentin Shergin 19a9c5e41d The Great File Renaming in RCTText
Summary:
The previous file/class name convention seemed cool... but now it drives me BANANAS! It makes all this code really hard to maintain.
So, evething were renamed following common modern RN convention.

Reviewed By: mmmulani

Differential Revision: D6605090

fbshipit-source-id: 88ca13d793a5d2adaac2b7922ec6bd4654aacec5
2017-12-19 20:14:00 -08:00
Pritesh Nandgaonkar f1055bcac8 Make YGNode as c++ struct with properties exposed through accessors
Reviewed By: emilsjolander

Differential Revision: D6592257

fbshipit-source-id: 641e8b9462ad00731a094511f9f5608b23a6bb21
2017-12-19 11:32:49 -08:00
Valentin Shergin 2679f3efb6 Demolishing of background color propagation infra
Summary: As it was mentioned in previous diffs, we are removing this because it overcomplicates rendering layer and provides (almost) no benefits (and cannot be implemented 100% accurate way).

Reviewed By: mmmulani

Differential Revision: D6582560

fbshipit-source-id: 0778db96a45dd8e2520268d5d00792677cb01a20
2017-12-19 09:11:49 -08:00
Valentin Shergin d2dc451407 reactBridgeDidFinishTransaction was finally removed
Summary:
We are removing `reactBridgeDidFinishTransaction`.
Why?
 * It is a performance drain. Supporting this requires dispatching main-thread block on every single transaction complete;
 * It has "too broad" non-conceptual semantic which encouraged using this as a "band-aid solution" for poorly designed components;
 * It is conceptually incompatible with new approaches that we are trying to implement to optimize the render layer;
 * It was deprecated for very long time.

Reviewed By: mmmulani

Differential Revision: D6549729

fbshipit-source-id: 58094aab982c67cec3d7fa3b616c637cb84d697f
2017-12-18 11:47:26 -08:00
Valentin Shergin b263560c73 reactBridgeDidFinishTransaction was removed from RCTTabBar
Summary:
We are removing `reactBridgeDidFinishTransaction`.
Why?
 * It is a performance drain. Supporting this requires dispatching main-thread block on every single transaction complete;
 * It has "too broad" non-conceptual semantic which encouraged using this as a "band-aid solution" for poorly designed components;
 * It is conceptually incompatible with new approaches that we are trying to implement to optimize the render layer;
 * It was deprecated for very long time.

This diff replaces usage of `reactBridgeDidFinishTransaction` with `uiManagerDidPerformMounting` which has very similar semantic except that fact that `uiManagerDidPerformMounting` is called asynchronously on the next run loop tick. And this should be okay because new React partial rendering does not guarantee synchronous execution anyways.

Reviewed By: mmmulani

Differential Revision: D6549586

fbshipit-source-id: 589b814f83b91ed8fabf7e638e7554ab3c9d286e
2017-12-18 11:47:26 -08:00
Valentin Shergin 099b28006b `reactBridgeDidFinishTransaction` was removed from RCTNavigator
Summary:
We are removing `reactBridgeDidFinishTransaction`.
Why?
 * It is a performance drain. Supporting this requires dispatching main-thread block on every single transaction complete;
 * It has "too broad" non-conceptual semantic which encouraged using this as a "band-aid solution" for poorly designed components;
 * It is conceptually incompatible with new approaches that we are trying to implement to optimize the render layer;
 * It was deprecated for very long time.

This diff replaces usage of `reactBridgeDidFinishTransaction` with `uiManagerDidPerformMounting` which has very similar semantic except that fact that `uiManagerDidPerformMounting` is called asynchronously on the next run loop tick. And this should be okay because new React partial rendering does not guarantee synchronous execution anyways.

Reviewed By: mmmulani

Differential Revision: D6549217

fbshipit-source-id: 2649e943e82e6fbe02c7678583a97db3f5800201
2017-12-18 11:47:26 -08:00
Valentin Shergin b8e60a3ca3 reactSetInheritedBackgroundColor was removed from RCTView
Summary:
Now setting explicit backgroundColor style is required for Views with background shadow,
otherwise the shadow will be generated based on content of the view (which is expected behaviour).

Reviewed By: mmmulani

Differential Revision: D6582587

fbshipit-source-id: 0514cb3c57bad17d2af40810b0e0f7ddc96a2c31
2017-12-18 11:47:26 -08:00
Valentin Shergin 2789ba016b zIndex prop was removed from RCTShadowView
Summary:
This was leftovers from old implementation of zIndex feature.
Janic janicduplessis refactored this and moved all logic to UIView layer, so we don't need this prop anymore in shadow realm.
More info: https://github.com/facebook/react-native/pull/14011

Reviewed By: mmmulani

Differential Revision: D6574414

fbshipit-source-id: 2cae19350765689784d7884ed875878d39b4e3f1
2017-12-18 11:47:26 -08:00
Valentin Shergin 098a63a1ce ScrollView related files were moved to dedicated folder
Summary: Trivial.

Reviewed By: rsnara

Differential Revision: D6539747

fbshipit-source-id: 716a02be185bde79e60011fcc226131972e74951
2017-12-11 19:08:00 -08:00
Valentin Shergin a255204e3e Removing `reactBridgeDidFinishTransaction` from RCTScrollView
Summary:
We are removing `reactBridgeDidFinishTransaction`.
Why?
 * It is a performance drain. Supporting this requires dispatching main-thread block on every single transaction complete;
 * It has "too broad" non-conceptual semantic which encouraged using this as a "band-aid solution" for poorly designed components;
 * It is conceptually incompatible with new approaches that we are trying to implement to optimize the render layer;
 * It was deprecated for very long time.

This diff removes `reactBridgeDidFinishTransaction` from RCTScrollView component. As I mentioned, because of the semantic of `reactBridgeDidFinishTransaction` is extremely broad, it's hard to capture what exact case it should handle. Based on comments and existing logic, it seems it tight to `contentSize` property and the size of RCTScrollContentView.

Reviewed By: rsnara

Differential Revision: D6538419

fbshipit-source-id: ccc6f5fea327471f10f1738d3da5214c0d362953
2017-12-11 19:08:00 -08:00
Eric Davison 36ad813899 Adding support for custom accessibility actions on iOS.
Summary:
This feature has been requested by customers.  Our previous (pre-react) application had support for custom accessibility actions.

This feature allows UI elements to provide a list of custom actions that can be read when VoiceOver is enabled.  UI elements expose one accessibility action by default.  Some UI elements may support multiple actions though other mechanisms like tap and hold.  To expose these actions in an accessible way iOS provides custom accessibility actions.

Feature was tested in the iOS simulator using the Accessibility Inspector.  Custom actions were added to a button and observed in the tool.  Custom actions were also invoked using the tool and then stepped through in the debugger.

The feature was also tested on an iPhone.  VoiceOver was enabled on the device and custom actions were observed for controls that exposed them.

We have been using this feature in our app for some time as well.

[IOS] [ENHANCEMENT] [Accessibility] - Added support for custom accessibility actions

Eric Davison
Microsoft Corp.
Closes https://github.com/facebook/react-native/pull/17020

Differential Revision: D6472283

Pulled By: shergin

fbshipit-source-id: 4ac4697dca07028e87ffe71b70c00280e7f2043c
2017-12-04 23:31:50 -08:00
Alex Kotliarskyi e19d9dec9b Make testID work for iOS tabs
Reviewed By: shergin

Differential Revision: D6455054

fbshipit-source-id: 3c667b585e9332a1dbfff1fd3325f2c95985a5be
2017-12-04 11:17:10 -08:00
Sophie Alpert 2e1707d0e6 Fix RCTRefreshControl jumping
Reviewed By: shergin

Differential Revision: D6470066

fbshipit-source-id: 44fb03c264d98af61dccfa0146690fd49ee9f2ab
2017-12-03 16:15:53 -08:00
chendo 19b0a65c5e Improve accessibilityLabel performance
Summary:
Integration testing with Appium on iOS is slow. Profiling with Instruments.app points to `RCTView`'s `accessibilityLabel` method being a hot point in React Native, due to the `RCTRecursiveAccessibilityLabel` function.

I did a baseline benchmark by using Appium's `find_element(accessibility_id: <label>)` call on our application 10 times and got a baseline result of 0.6s for one of our primary screens.

After implementing the change and performing the same call 10 times, I got 0.48s for the same call, for a 20% performance increase in `find_element`.

[iOS] [View] - Improve performance of `RCTView` `accessibilityLabel`

<!--
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/17022

Differential Revision: D6459462

Pulled By: shergin

fbshipit-source-id: 3de7e5dc075281e35e62b4d4234d3f7fac5aae23
2017-12-01 10:16:39 -08:00
Nikita Tuk 15179f1798 Fixed fractional border width on iOS
Summary:
Incorrect render for borders that are not proportional to device pixel: borders get stretched and become significantly bigger than expected.
Rdar: http://www.openradar.me/15959788

Incorrect render for borders that are not proportional to device pixel: borders get stretched and become significantly bigger than expected.
Rdar: http://www.openradar.me/15959788

Reviewed By: shergin

Differential Revision: D6317674

fbshipit-source-id: 6bc331447458583a02c0e56d0d011a31d31d70a8
2017-11-21 12:16:21 -08:00
Douglas 45185947ee Fix tvOS compile issues; enable TVEventHandler in Modal (fix #15389)
Summary:
**Motivation**

Fix an issue (#15389) where `TVEventHandler` would not work when a modal was visible.  The solution adds the gesture recognizers from the native `RCTTVRemoteHandler` to the native modal view (except for the menu button recognizer, which still needs special handling in modals).  This PR also fixes some breakages in compiling React Native for tvOS.

**Test plan**

Compilation fixes should enable tvOS compile test to pass in Travis CI.

The modal fix can be tested with the following component, modified from the original source in #15389 .

``` javascript
import React, { Component } from 'react';
import ReactNative from 'ReactNative';
import {
    Text,
    View,
    StyleSheet,
    TouchableHighlight,
    TVEventHandler,
    Modal,
} from 'react-native';

export default class Events extends Component {

    constructor(props) {
        super(props);

        this.state = {
            modalVisible: false,
        };
        this._tvEventHandler = new TVEventHandler();
    }

    _enableTVEventHandler() {
        this._tvEventHandler.enable(this, (cmp, evt) => {
            const myTag = ReactNative.findNodeHandle(cmp);
            console.log('Event.js TVEventHandler: ', evt.eventType);
            // if (evt.eventType !== 'blur' && evt.eventType !== 'focus') {
            //  console.log('Event.js TVEventHandler: ', evt.eventType);
            // }
        });
    }

    _disableTVEventHandler() {
        if (this._tvEventHandler) {
            this._tvEventHandler.disable();
            delete this._tvEventHandler;
        }
    }

    componentDidMount() {
        this._enableTVEventHandler();
    }

    componentWillUnmount() {
        this._disableTVEventHandler();
    }

    _renderRow() {
        return (
            <View style={styles.row}>
                {
                    Array.from({ length: 7 }).map((_, index) => {
                        return (
                            <TouchableHighlight
                                key={index}
                                onPress={() => { this.setState({ modalVisible: !this.state.modalVisible }); }}
                            >
                                <View style={styles.item}>
                                    <Text style={styles.itemText}>{ index }</Text>
                                </View>
                            </TouchableHighlight>
                        );
                    })
                }
            </View>
        );
    }

    onTVEvent(cmp, evt) {
      console.log('Modal.js TVEventHandler: ', evt.eventType);
    }

    hideModal() {
      this.setState({
        modalVisible: false
      });
    }

    render() {
        return (
            <View style={styles.container}>
                <Modal visible={this.state.modalVisible}
                       onRequestClose={() => this.hideModal()}>
                    <View style={styles.modal}>
                        { this._renderRow() }
                        { this._renderRow() }
                    </View>
                </Modal>
                { this._renderRow() }
                { this._renderRow() }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'darkslategrey',
    },
    row: {
        flexDirection: 'row',
        padding: 30,
    },
    item: {
        width: 200,
        height: 100,
        borderColor: 'cyan',
        borderWidth: 2,
        margin: 30,
        alignItems: 'center',
        justifyContent: 'center',
    },
    itemText: {
        fontSize: 40,
        color: 'cyan',
    },
    modal: {
        flex: 1,
        backgroundColor: 'steelblue',
    },
});
```
**Release Notes**

After this change, the `onRequestClose` property will be required for a `Modal` in Apple TV.
Closes https://github.com/facebook/react-native/pull/16076

Differential Revision: D6288801

Pulled By: hramos

fbshipit-source-id: 446ae94a060387324aa9e528bd93cdabc9b5b37f
2017-11-09 13:54:54 -08:00
Vojtech Novak 75d62bf0a8 fix #10747 (ScrollView rendered incorrectly with RefreshControl)
Summary:
set the y offset to 0, since 0 offset is where we want to be after we hide the refreshControl.

Tested in emulator with ios 8, 9, 10 and also with section headers.
Closes https://github.com/facebook/react-native/pull/15033

Differential Revision: D6265930

Pulled By: shergin

fbshipit-source-id: b249c4713de68fc6b3a32cee7f995dc352315970
2017-11-07 16:16:56 -08:00
Robert Paul fd9c3618fc - Adding locale prop to DatePickerIOS
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
2017-11-04 14:40:24 -07:00
Mehdi Mulani b8a5136d22 Fix memory leak in RCTSafeAreaView
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
2017-11-02 08:51:34 -07:00
Y.Shing 2546c95ac8 Fix iOS 11 WebView extra white space on top due to contentInsetAdjustmentBehavior
Summary:
Same IOS 11 issue as https://github.com/facebook/react-native/pull/15023
Fixes the annoying 20px content insert on top.
<!--
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!

-->

Fix the behaviour of WebView when building the iOS project with Xcode 9 due to the `contentInsetAdjustmentBehavior`.

![expected](https://user-images.githubusercontent.com/5630513/32207551-b7789668-bdca-11e7-840a-f325b2767d08.jpg)
![iphone_x_after](https://user-images.githubusercontent.com/5630513/32207557-beb8fd6e-bdca-11e7-87d0-18d533f20125.jpg)

![issue_normal_iphone_ios11](https://user-images.githubusercontent.com/5630513/32207572-d773be5c-bdca-11e7-8e28-8f0783eef1cd.jpg)
![iphone_x_before](https://user-images.githubusercontent.com/5630513/32207581-e3e93234-bdca-11e7-847d-f801bbf05d55.jpg)

<!--
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] [WebView] - Fix extra white space added to webView due to iOS 11 contentInsetAdjustmentBehavior
Closes https://github.com/facebook/react-native/pull/16519

Differential Revision: D6195670

Pulled By: shergin

fbshipit-source-id: 08d4d4dc700059bb7707e038dc4f592af0275896
2017-10-30 23:29:20 -07:00
Aditya Kumar bbc90b4dc2 Move RCTConvertSelectorForType to their respective using modules
Reviewed By: javache

Differential Revision: D6137419

fbshipit-source-id: a30193469e7a061331d3d6798324475890c75625
2017-10-26 17:03:41 -07:00
Ramanpreet Nara efa4d3c222 Rename I18nManager Left/Right swap methods
Reviewed By: fkgozali

Differential Revision: D6140072

fbshipit-source-id: 282dc614c036de8f217a729f21a1bbe92b8afd7d
2017-10-24 20:45:59 -07:00
Sam Mueller d38b95f8b7 (iOS) Support for ExtraBold alias of Heavy (font-weight 800)
Summary:
ExtraBold is a fairly common suffix in font naming. A good example is "Circe-ExtraBold". It's usually synonymous with Heavy or Black at font weight 800, as described here: https://www.webtype.com/info/articles/fonts-weights/

This fixes a regression with ExtraBold fonts introduced in d3007b0 where simply having an extrabold font will cause `weightOfFont` to choose this weight aggressively, resulting in all bold text erroneously interpreted as extrabold/heavy. This fix ensures that extrabold is detected before bold, and correctly attributed to `UIFontWeightHeavy`.
Closes https://github.com/facebook/react-native/pull/16323

Differential Revision: D6119059

Pulled By: shergin

fbshipit-source-id: 56a5c30584f220974308a7d6068c8d952aa20fb8
2017-10-23 11:24:18 -07:00
Ramanpreet Nara 64284bf66e iOS: Implement margin(Start|End) styles for RN
Reviewed By: mmmulani

Differential Revision: D5884168

fbshipit-source-id: 4d37583ba79324e6cf8caaa20cecf865f28337f7
2017-10-18 19:33:31 -07:00
Ramanpreet Nara 0a70c026cb iOS: Implement padding(Start|End) styles for RN
Reviewed By: mmmulani

Differential Revision: D5876934

fbshipit-source-id: 55fc49e0fddeaf0e6541d3159f35783e02bd6260
2017-10-18 19:33:31 -07:00
Ramanpreet Nara 1b5f8d3ee5 iOS: Implement border(Top|Bottom)(Start|End)Radius and border(Start|End)(Color|Width) RN styles
Reviewed By: shergin

Differential Revision: D5874536

fbshipit-source-id: 5ad237bddb70745aef0341cddb172da5ee388c38
2017-10-18 19:33:31 -07:00
Ramanpreet Nara 38b5506599 iOS: Forward RN start/end styles to Yoga
Reviewed By: mmmulani

Differential Revision: D5853589

fbshipit-source-id: 9acee0993a25dce5f4b1ce506746b789b1c4c763
2017-10-18 19:33:31 -07:00
Valentin Shergin 32e5c8e5b5 Deprecated stuff was removed from RCTShadowView
Summary: It was deprecated awhile ago.

Reviewed By: javache

Differential Revision: D5990504

fbshipit-source-id: a218410d17f5f450d573338522b689e035106aba
2017-10-09 17:22:35 -07:00
Valentin Shergin b0c1bd284f `[RCTShadowView localData]` is now only setter.
Summary: It saves 8 bytes per shadowView instance, and it is more logical because it does nothing by default.

Reviewed By: javache

Differential Revision: D5997804

fbshipit-source-id: c985a11aeea881e95911469e10c8c27429a2718a
2017-10-09 10:46:08 -07:00
Ramanpreet Nara 992ade1fc5 Re-render views when direction changes
Reviewed By: shergin

Differential Revision: D5959573

fbshipit-source-id: 36b2cde921362a934a2c88a3ed05be5082ed08bf
2017-10-03 13:01:06 -07:00
Jason Carreiro abed3cf6c4 Revert D5944488: [RN][iOS]: Re-render views when direction changes
Differential Revision: D5944488

fbshipit-source-id: 79e695dcc0ea7d09544ace1525828333a5818c5a
2017-10-02 12:19:25 -07:00
Ramanpreet Nara 9bbc70c442 Re-render views when direction changes
Summary:
This is required for D5874536, wherein I'll be introducing direction-aware props for borders.

When a view's border changes due to a direction update, only the frames of its children update. Therefore, only the children `UIView`s get a chance to be re-rendered. This is incorrect because the view that's had its borders changed also needs to re-render. So, I keep a track of the layout direction in a property on all shadow views. Then, when I update that prop within `applyLayoutNode`, I push shadow views into the `viewsWithNewFrames` set.

Reviewed By: mmmulani

Differential Revision: D5944488

fbshipit-source-id: 3f23e9973f3555612920703cdb6cec38e6360d2d
2017-10-02 11:15:48 -07:00
Valentin Shergin 6d67e2dbbc Bunch of utility funcs were moved to RCTUIManagerUtils
Summary: Because `RCTUIManager` is already overcomplicated and that stuff deserves separate file and header.

Reviewed By: javache

Differential Revision: D5856653

fbshipit-source-id: 7001bb8ba611976bf3b82d6a25f5619810a35b34
2017-09-26 14:08:28 -07:00