Commit Graph

34 Commits

Author SHA1 Message Date
Peter Argany 38197c8230 Support Input Accessory View (iOS Only) [1/N]
Reviewed By: mmmulani

Differential Revision: D6886573

fbshipit-source-id: 71e1f812b1cc1698e4380211a6cedd59011b5495
2018-02-27 11:09:30 -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
Sergei Dryganets 605a6e4031 CI for iOS fixed
Summary:
iOS TV CI is currently broken.

CI for both iOS and iOS TV successfully pass.
 [INTERNAL] Continous integration for iOS fixed.
Closes https://github.com/facebook/react-native/pull/17564

Differential Revision: D6711693

Pulled By: hramos

fbshipit-source-id: c36ffc2581dac69cb6e4f8670f21c2816496e9df
2018-01-12 07:46:17 -08:00
Valentin Shergin c491b22233 RCTBaseTextInputViewManager: new base class for TextInput view managers
Summary: Bunch or identical code was moved to superclass.

Reviewed By: mmmulani

Differential Revision: D6663772

fbshipit-source-id: 82321f56bbab0e9d17c0227c97dd86904cf5ab30
2018-01-07 18:31:20 -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
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
Valentin Shergin aa97c9ac27 Updated project file to fix Apple TV build
Reviewed By: rsnara

Differential Revision: D6015068

fbshipit-source-id: 3c2cd902457e32dab843764267a1475a078eb64d
2017-10-09 16:31:46 -07:00
Adam Comella 9c4ec30c15 iOS: Support allowFontScaling on TextInput
Summary:
Currently, only `Text` supports the `allowFontScaling` prop. This commit adds support for it on `TextInput`.

As part of this change, the TextInput setters for font attributes (e.g. size, weight) had to be refactored. The problem with them is that they use RCTFont's helpers which create a new font based on an existing font. These helpers lose information. In particular, they lose the scaleMultiplier.

For example, suppose the font size is 12 and the device's font multiplier is set to 1.5. So we'd create a font with size 12 and scaleMultiplier 1.5 which is an effective size of 18 (which is the only thing stored in the font). Next, suppose the device's font multiplier changes to 1. So we'd use an RCTFont helper to create a new font based on the existing font but with a scaleMultiplier of 1. However, the font didn't store the font size (12) and scaleMultiplier (1.5) separately. It just knows the (effective) font size of 18. So RCTFont thinks the new font has a font size of 18 and a scaleMultiplier of 1 so its effective font size is 18. This is incorrect and it should have been 12.

To fix this, the font attributes are now all stored individually. Anytime one of them changes, updateFont is called which recreates the font from scratch. This happens to fix some bugs around fontStyle and fontWeight which were reported several times before: #13730, #12738, #2140, #8533.

Created a test app where I verified that `allowFontScaling` works properly for `TextInputs` for all values (`undefined`, `true`, `false`) for a variety of `TextInputs`:
  - Singleline TextInput
  - Singleline TextInput's placeholder
  - Multiline TextInput
  - Multiline TextInput's placeholder
  - Multiline TextInput using children instead of `value`

Also, verified switching `fontSize`, `fontWeight`, `fontStyle` and `fontFamily` through a bunch of combinations works properly.

Lastly, my team has been using this change in our app.

Adam Comella
Microsoft Corp.
Closes https://github.com/facebook/react-native/pull/14030

Reviewed By: TheSavior

Differential Revision: D5899959

Pulled By: shergin

fbshipit-source-id: c8c8c4d4d670cd2a142286e79bfffef3b58cecd3
2017-10-01 21:45:33 -07:00
Adlai Holler 0f440130b6 Standardize project indentation settings on 2 spaces
Summary:
Hi React Native folks! Love your work!

To make contributing easier, this sets the indentation settings of all the Xcode projects to 2 spaces to match their contents.
Closes https://github.com/facebook/react-native/pull/15275

Differential Revision: D5526462

Pulled By: javache

fbshipit-source-id: cbf0a8a87a1dbe31fceed2f0fffc53839cc06e59
2017-07-31 05:20:03 -07:00
Valentin Shergin ee9697e515 Introducing `RCTBackedTextInputDelegate`
Summary:
Nothing behavioral changed in this diff; just moving code around.

`RCTBackedTextInputDelegate` is the new protocol which supposed to be common determinator among of UITextFieldDelegate and UITextViewDelegate
(and bunch of events and notifications around UITextInput and UITextView).

We need this reach two goals in the future:
 * Incapsulate UIKit imperfections related hack in dedicated protocol adapter. So, doing this we can fix more UIKit related bugs without touching real RN text handling logic. (Yes, we still have a bunch of bugs, which we cannot fix because it is undoable with the current architecture. This diff does NOT fix anything though.)
 * We can unify logic in RCTTextField and RCTTextView (even more!), moving it to a superclass. If we do so, we can fix another bunch of bugs related to RN imperfections. And have singleline/multiline inputs implementations even more consistent.

Reviewed By: mmmulani

Differential Revision: D5296041

fbshipit-source-id: 318fd850e946a3c34933002a6bde34a0a45a6293
2017-07-18 14:46:22 -07:00
Valentin Shergin 3364488af0 Introducting `RCTTextInput`, base class for both text inputs
Summary: Some basic same to both classes functionality was moved to base class, and it is just a beginning.

Reviewed By: mmmulani

Differential Revision: D5144429

fbshipit-source-id: 56c6400d46f4cf3c0058fe936cba524dd5d490df
2017-06-27 16:22:44 -07:00
Valentin Shergin 6ba8e29c89 Introducing `RCTBackedTextInputViewProtocol`
Summary: RCTBackedTextInputViewProtocol is supposed to unify interface of backed text inputs which will make them accessible from managers and wrapper views.

Reviewed By: mmmulani

Differential Revision: D5144428

fbshipit-source-id: 473e7364d4af2edcd87c5555200e1325c38a8214
2017-06-27 16:22:44 -07:00
Valentin Shergin e13b9c6e49 RCTTextField was spliited into two classes
Summary:
Motivation:
 * We maintain two different implementation of <TextInput> (multilined and singlelined), this change makes the implementations much similar which will help us to support and improve both of them in the (near) future;
 * We have to have separated RCTView-based container view for (TextField) to support sofisticated bordering and so on;
 * It opens to us possibility to unify UITextView and UITextField subclasses and remove code duplication across RCTTextView and RCTTextField;
 * Making things decoupled in general will allow us to fix existing bugs with events.

Reviewed By: mmmulani

Differential Revision: D5083010

fbshipit-source-id: 2f2d42c2244d2b39256c51480c1f16f4e3947c01
2017-05-29 16:01:11 -07:00
Pieter De Baets 7c9173bc9e Enable -Wimplicit-retain-self en sync warning config for all projects
Summary:
This is enforced for all of our internal iOS code and a common cause of import failures.

cc janicduplessis
Closes https://github.com/facebook/react-native/pull/13124

Differential Revision: D4765016

fbshipit-source-id: 7c8248c98bca0fa6bad24d5a52b666243375e0db
2017-03-23 15:01:34 -07:00
Valentin Shergin b53d76efb7 Better TextInput: RCTUITextView was decoupled in separate file and now handles placeholder feature
Reviewed By: mmmulani

Differential Revision: D4663151

fbshipit-source-id: ce57ca4bebf4676df2ae5e586a1b175ec2aac760
2017-03-20 00:02:58 -07:00
Valentin Shergin fa30f41403 Better TextInput: RCTTextView and RCTTextField was marked as Yoga leaf nodes
Reviewed By: mmmulani

Differential Revision: D4639060

fbshipit-source-id: d4580303a61a7f86cf8bb6ec016fd9834340ffe0
2017-03-13 13:46:26 -07:00
Pieter De Baets 59407f3660 Redo exported headers and include paths for opensource
Summary:
Xcode really sucks, per some discussion on e1577df1fd and https://developer.apple.com/library/content/technotes/tn2215/_index.html, if you use the headers phase, and mark headers in your static library as public, they will actually end up in the final package that's built and you can't submit to the app store! This changes our xcode setup to use a copy files phase instead.

I've also changed the header include path to be $(BUILT_PRODUCTS_DIR)/include, which is added to the include path by Xcode by default, so 3rd party libraries should not be impacted by these changes anymore.

Reviewed By: mkonicek

Differential Revision: D4291607

fbshipit-source-id: 969b9ebcbeb8161f85427f8c429e198d9d0fae30
2016-12-07 15:28:29 -08:00
Pieter De Baets e1577df1fd Move all header imports to "<React/..>"
Summary:
To make React Native play nicely with our internal build infrastructure we need to properly namespace all of our header includes.

Where previously you could do `#import "RCTBridge.h"`, you must now write this as `#import <React/RCTBridge.h>`. If your xcode project still has a custom header include path, both variants will likely continue to work, but for new projects, we're defaulting the header include path to `$(BUILT_PRODUCTS_DIR)/usr/local/include`, where the React and CSSLayout targets will copy a subset of headers too. To make Xcode copy headers phase work properly, you may need to add React as an explicit dependency to your app's scheme and disable "parallelize build".

Reviewed By: mmmulani

Differential Revision: D4213120

fbshipit-source-id: 84a32a4b250c27699e6795f43584f13d594a9a82
2016-11-23 07:58:39 -08:00
Adam Comella 8016d838be iOS: Fix autoCorrect doesn't revert to initial state
Summary:
There's an inconsistency in autoCorrect's default state:
  - If you don't specify a value for autoCorrect, it defaults to on.
  - If you specify true/false for autoCorrect and later specify null, autoCorrect turns off. It should have reverted to its initial state of on.

The reason for this discrepancy is that autoCorrect is exposed to JS as a boolean but it is actually an enum with three states in native:
  - UITextAutocorrectionTypeDefault (the default value)
  - UITextAutocorrectionTypeYes
  - UITextAutocorrectionTypeNo

This is fixed by explicitly mapping JS null to UITextAutocorrectionTypeDefault.

**Test plan (required)**

Verified that switching `autoCorrect` between `true`, `false`, and `null` all work correctly in single line and multiline `TextInputs`.

Adam Comella
Microsoft Corp.
Closes https://github.com/facebook/react-native/pull/11055

Differential Revision: D4226419

Pulled By: javache

fbshipit-source-id: e3e5769a3aa537f00fb56ca4ae622ff4213481c5
2016-11-23 05:43:35 -08:00
Pieter De Baets 7c91f894ba Fix CSSLayout import hack, update podspec
Summary: Correct header import paths, update podspec so we point at the copy in ReactCommon (and can eventually remove the copy under React)

Reviewed By: astreet

Differential Revision: D4204501

fbshipit-source-id: e979a010092f025b2cdc289e1e5f22fc7b65a8d1
2016-11-21 09:13:36 -08:00
Douglas Lowder 8622998335 Apple TV support 2: Xcode projects and CI (scripts/objc-test.sh)
Summary:
* Motivation *

Second PR for Apple TV support.

* Test plan *

Apple TV tests have been added to scripts/objc-test.sh
Closes https://github.com/facebook/react-native/pull/10227

Differential Revision: D3974064

Pulled By: javache

fbshipit-source-id: 36dffb4517efa489e40fa713a30655d1d76ef646
2016-10-05 07:28:44 -07:00
Pieter De Baets 07553d0f1c Update React Native minimum OS version to iOS8
Reviewed By: majak

Differential Revision: D3723143

fbshipit-source-id: 482f9820370b752d937e6df7f74c33d53a0a2e7d
2016-09-01 19:43:47 -07:00
Janic Duplessis f0a3c56048 Add TextInput controlled selection prop on iOS
Summary:
This adds support for a controlled `selection` prop on `TextInput` on iOS (Android PR coming soon). This is based on the work by ehd in #2668 which hasn't been updated for a while, kept the original commit and worked on fixing what was missing based on the feedback in the original PR.

What I changed is:
- Make the prop properly controlled by JS
- Add a RCTTextSelection class to map the JS object into and the corresponding RCTConvert category
- Make sure the selection change event is properly triggered when the input is focused
- Cleanup setSelection
- Changed TextInput to use function refs to appease the linter

** Test plan **
Tested using the TextInput selection example in UIExplorer on iOS.
Also tested that it doesn't break Android.
Closes https://github.com/facebook/react-native/pull/8958

Differential Revision: D3771229

Pulled By: javache

fbshipit-source-id: b8ede46b97fb3faf3061bb2dac102160c4b20ce7
2016-08-25 17:28:37 -07:00
Nick Lockwood ef5cec4f08 Text highlighting on iOS
Summary:
This diff implements highlighting of tapped text subranges for the iOS `<Text>` component, styled to match how iOS webkit views highlight links (translucent grey overlay with rounded corners).

Highlighting is enabled by default for any `<Text>` component which has an onPress handler. To disable the highlight, add `suppressHighlighting={true}` to the component props.
2015-07-24 08:41:58 -08:00
Nick Lockwood a886e4c66b Migrated RCTText into FBReactKit 2015-07-08 07:13:00 -08:00
Nick Lockwood 650fc9de4c Increased warning levels to -Wall -Wextra, and fixed Xcode 7 beta issues
Summary:
@public

I've increased the warning levels in the OSS frameworks, which caught a bunch of minor issues. I also fixed some new errors in Xcode 7 relating to designated initializers and TLS security.

Test Plan:
* Test the sample apps and make sure they still work.
* Run tests.
2015-06-15 07:52:50 -08:00
Brent Vatne c09bdebcd5 Add support for multiline TextInput via UITextView
Summary:
@nicklockwood - Could I get a review of this?

Just took `RCTTextField` and ported it from `UITextField` to `UITextView` as you mentioned in another discussion, and removed any `UITextField` specific attributes.

- How do you think this should behave when there are subviews?
- Do you know how we can respond to the `UIControlEventEditingDidEndOnExit` event to respond to submit? Because `UITextView` isn't a `UIControl` we can't just use `addTarget` with `UIControlEventEditingDidEndOnExit`.
- Any other feedback?

Still going to look over the `UITextView` docs in more detail and make sure we expose all important options, and add it to the UIExplorer example, just putting this out here for feedback.

![multiline](https://cloud.githubusercontent.com/assets/90494/7310854/32174d6a-e9e8-11e4-919e-71e54cf3c739.gif)

Closes https://github.com/facebook/react-native/pull/991
Github Author: Brent Vatne <brent.vatne@madriska.com>

Test Plan: Imported from GitHub, without a `Test Plan:` line.
2015-04-29 01:33:58 -08:00
Tadeu Zagallo d293bed5ab [ReactNative] Fix analyze errors on oss 2015-04-24 08:28:35 -08:00
laiso e35521300a (Xcode) Set indent=2 in all xcodeproj files.
Summary:
These are default settings now.
I saw my Xcode be configured indent=4.

![2015-03-30 12 16 11 pm](https://cloud.githubusercontent.com/assets/39830/6889697/98f8b930-d6d6-11e4-81c8-d2146855d127.png)

Closes https://github.com/facebook/react-native/pull/472
Github Author: laiso <laiso@lai.so>

Test Plan: Imported from GitHub, without a `Test Plan:` line.
2015-04-01 17:14:45 -08:00
Tadeu Zagallo 20291a02df [ReactNative] s/ReactKit/React/g 2015-03-26 02:42:24 -08:00
Alex Akers 48cc440bd3 [React Native] Fix iOS 7 crashes b/c missing Photos.fmwk 2015-03-23 08:06:58 -08:00
Spencer Ahrens 3daaf1741c [ReactNative] Clean up libraries and include paths 2015-03-03 10:46:34 -08:00
Spencer Ahrens 99f7a0ab9d [ReactNative] Pull out some OSS modules into separate libs 2015-02-27 08:36:52 -08:00