Techiio-author
Started by Sidhdarth BasuJun 15, 2022

Open
How can i develop a smart- tv wifi remote application using react native?

3 VIEWES 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 3 VIEWES SHARE

can anyone tell me how to do this ?

1 Replies

Techiio-commentatorUtsab Das replied 2 months ago0 likes0 dislikes

TV remote/keyboard input: A new native class, ReactAndroidTVRootViewHelper, sets up key events handlers for TV remote events. When TV remote events occur, this class fires a JS event. This event will be picked up by instances of the TVEventHandler JavaScript object. Application code that needs to implement custom handling of TV remote events can create an instance of TVEventHandler and listen for these events, as in the following code:

var TVEventHandler = require('TVEventHandler');

class Game2048 extends React.Component {
_tvEventHandler: any;

_enableTVEventHandler() {
this._tvEventHandler = new TVEventHandler();
this._tvEventHandler.enable(this, function (cmp, evt) {
if (evt && evt.eventType === 'right') {
cmp.setState({ board: cmp.state.board.move(2) });
} else if (evt && evt.eventType === 'up') {
cmp.setState({ board: cmp.state.board.move(1) });
} else if (evt && evt.eventType === 'left') {
cmp.setState({ board: cmp.state.board.move(0) });
} else if (evt && evt.eventType === 'down') {
cmp.setState({ board: cmp.state.board.move(3) });
} else if (evt && evt.eventType === 'playPause') {
cmp.restartGame();
}
});
}

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

componentDidMount() {
this._enableTVEventHandler();
}

componentWillUnmount() {
this._disableTVEventHandler();
}
}

Native layer: To run React Native project on Android TV make sure to make the following changes to AndroidManifest.xml

<!-- Add custom banner image to display as Android TV launcher icon -->

<application

...

android:banner="@drawable/tv_banner"

>

...

<intent-filter>

...

<!-- Needed to properly create a launch intent when running on Android TV -->

<category android:name="android.intent.category.LEANBACK_LAUNCHER"/>

    </intent-filter>

...

</application>

JavaScript layer: Support for Android TV has been added to Platform.android.js. You can check whether code is running on Android TV by doing

var Platform = require('Platform');

var running_on_android_tv = Platform.isTV;

These things are already in react native documentation. u might not visit the react native official documentation. But ,It's alright, Hope things are helpful now for your project.

You must be Logged in to reply
Techiio-logo

Techiio is on the journey to build an ocean of technical knowledge, scouring the emerging stars in process and proffering them to the corporate world.

Follow us on:

Subscribe to get latest updates

You can unsubscribe anytime from getting updates from us
Developed and maintained by Wikiance
Developed and maintained by Wikiance