Commit Graph

11 Commits

Author SHA1 Message Date
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
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
Philipp von Weitershausen ed903099b4 Add blob implementation with WebSocket integration
Summary:
This is the first PR from a series of PRs grabbou and me will make to add blob support to React Native. The next PR will include blob support for XMLHttpRequest.

I'd like to get this merged with minimal changes to preserve the attribution. My next PR can contain bigger changes.

Blobs are used to transfer binary data between server and client. Currently React Native lacks a way to deal with binary data. The only thing that comes close is uploading files through a URI.

Current workarounds to transfer binary data includes encoding and decoding them to base64 and and transferring them as string, which is not ideal, since it increases the payload size and the whole payload needs to be sent via the bridge every time changes are made.

The PR adds a way to deal with blobs via a new native module. The blob is constructed on the native side and the data never needs to pass through the bridge. Currently the only way to create a blob is to receive a blob from the server via websocket.

The PR is largely a direct port of https://github.com/silklabs/silk/tree/master/react-native-blobs by philikon into RN (with changes to integrate with RN), and attributed as such.

> **Note:** This is a breaking change for all people running iOS without CocoaPods. You will have to manually add `RCTBlob.xcodeproj` to your `Libraries` and then, add it to Build Phases. Just follow the process of manual linking. We'll also need to document this process in the release notes.

Related discussion - https://github.com/facebook/react-native/issues/11103

- `Image` can't show image when `URL.createObjectURL` is used with large images on Android

The websocket integration can be tested via a simple server,

```js
const fs = require('fs');
const http = require('http');

const WebSocketServer = require('ws').Server;

const wss = new WebSocketServer({
  server: http.createServer().listen(7232),
});

wss.on('connection', (ws) => {
  ws.on('message', (d) => {
    console.log(d);
  });

  ws.send(fs.readFileSync('./some-file'));
});
```

Then on the client,

```js
var ws = new WebSocket('ws://localhost:7232');

ws.binaryType = 'blob';

ws.onerror = (error) => {
  console.error(error);
};

ws.onmessage = (e) => {
  console.log(e.data);
  ws.send(e.data);
};
```

cc brentvatne ide
Closes https://github.com/facebook/react-native/pull/11417

Reviewed By: sahrens

Differential Revision: D5188484

Pulled By: javache

fbshipit-source-id: 6afcbc4d19aa7a27b0dc9d52701ba400e7d7e98f
2017-07-26 08:23:20 -07:00
David Aurelio a710f9a81e Move packager launcher scripts outside of `packager/`
Summary: in order to prepare open sourcing React Native Packager, we have to move scripts specific to React Native to a directory that will continue to exist.

Reviewed By: javache

Differential Revision: D5112193

fbshipit-source-id: eac77d0d981aecef7ee52365a6856340420a5638
2017-05-23 16:17:09 -07:00
rh389 e0c3d56d3a Fix template release build: Add -ObjC and -lc++ to tests target
Summary:
Fixes https://github.com/facebook/react-native/issues/11861 - the release config is currently broken for projects created by `react-native init` in `master`, 0.40 and 0.39.

I'm still investigating when and how this got broken but this seems to be a clean fix. I've added `-ObjC` as well to match the main target but I'm not sure yet whether that's necessary.

To test:
```
react-native init fooproject --version react-native@rh389/react-native#missinglinkerflags
```
Open in XCode, Edit scheme (⌘<), Change `Build Configuration` to `Release`, build.

Update: The `-lc++` flag became necessary when 33deaad196 landed because of the libstdc++ dependencies of `RCTLog`. Still not sure about `-ObjC`. javache ?
Closes https://github.com/facebook/react-native/pull/11889

Differential Revision: D4421685

Pulled By: javache

fbshipit-source-id: 954edaef773f8cef7b7ad671fa4d1f2bfc2f20f2
2017-01-16 13:13:31 -08:00
dlowder-salesforce d625a72f63 Apple TV support 6: Add tvOS target to react-native-cli template project
Summary:
**Motivation**

New iOS project generation with react-native-cli should allow developers to build for Apple TV as well as iPhone/iPad.

**Test plan**

Added to `scripts/run-ci-e2e-tests.js` and `.travis.yml` to have the new tvOS target automatically built and tested in Travis CI.
Closes https://github.com/facebook/react-native/pull/11591

Differential Revision: D4375593

Pulled By: mkonicek

fbshipit-source-id: 4e241caa400a88e6b2f91416fa26b48ae01cb7b6
2016-12-30 18:43:59 -08:00
Tomas Roos 8680681a3d Updated imports to libyoga*.a in HelloWorld
Summary:
Fixes #11605

HelloWorld refers to CSSLayout even thought master has moved on and the library is now called Yoga.
Closes https://github.com/facebook/react-native/pull/11606

Differential Revision: D4365469

fbshipit-source-id: e0eaac400449f0ba767bf98f3bd8e8185fb6fd12
2016-12-22 23:58:28 -08: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
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
Martin Konicek b74da13a75 Fix after using hg
Summary:
I had to re-do my CLI pull request internally using hg because shipit couldn't import binary files even after debugging with the OSS team. While using hg I messed up. This should fix it:

- Remove files added by mistake when using 'hg addremove'
- Add Xcode project that was ignored by hg (probably at fb we don't want people to check in Xcode projects since we use Buck)

**Test Plan**
Travis tests on this pull request.
Closes https://github.com/facebook/react-native/pull/11043

Differential Revision: D4212755

Pulled By: bestander

fbshipit-source-id: c762472ed31b9845425c1766510dce7761a35ae0
2016-11-21 04:58:29 -08:00