I am trying to build an application for android tv. But when use 'TVEventHandler' It show TVEventHandler Module is not installed. I also try to install TVEventHandler but it show:
Standard error:
E404
Not Found - GET https://registry.npmjs.org/TVEventHandler - Not found
Here Is my Code:
_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();
}
It's because TVEventHandler and other components for build android tv deleted from react native core.
So you should run this command and it's converted your react native to tv os:
yarn add react-native#npm:react-native-tvos#latest
And your react native version after install react-native-tvos :
Now TVEventHandler and another tv build components added to your react native if you checked ./node_modules/react_native/Libraries/components
Related
how to check react-native network lost connection? I tried the below code and its throwing an error. I want to display and alert when app lost it's network connection?
CheckConnectivity = () => {
// For Android devices
if (Platform.OS === "android") {
NetInfo.isConnected.fetch().then(isConnected => {
console.log(isConnected,">>>")
if (isConnected) {
Alert.alert("You are online!");
} else {
Alert.alert("You are offline!");
}
});
} else {
// For iOS devices
NetInfo.isConnected.addEventListener(
"connectionChange",
this.handleFirstConnectivityChange
);
}
};
handleFirstConnectivityChange = isConnected => {
NetInfo.isConnected.removeEventListener(
"connectionChange",
this.handleFirstConnectivityChange
);
if (isConnected === false) {
Alert.alert("You are offline!");
} else {
Alert.alert("You are online!");
}
};
It looks like you are using the wrong API. For example, this is for WEB
NetInfo.isConnected.removeEventListener
If you check it here: https://github.com/react-native-netinfo/react-native-netinfo/blob/ba5c22cf2045b690243984a548ee25f4f6371e4a/src/internal/nativeModule.web.ts#L59
You need to follow this examples:
https://github.com/react-native-netinfo/react-native-netinfo/blob/master/example/IsConnected.tsx
https://github.com/react-native-netinfo/react-native-netinfo/blob/master/example/ConnectionInfoSubscription.tsx
I have published a react native application to google play store for android tv.
For tv, I have received notification for:
Play/Pause key event is not respected during playback
Your media apps that play video or music content must respect the play/pause key during playback. Please refer to our Media Play/Pause documentation and Update the Playback State documentation for details.
For example, your app does not pause the video being played when pressing the pause button on the Android TV controller.
How do I fix this issue for react-native android TV apps?
try adding play/pause Event Listeners
const _tvEventHandler = new TVEventHandler();
const [isPaused, setIsPaused] = useState(false);
const _enableTVEventHandler = () => {
_tvEventHandler.enable(this, function (cmp, evt) {
console.log(evt);
if (evt && evt.eventType === 'right') {
console.log(evt.eventType);
} else if (evt && evt.eventType === 'up') {
console.log(evt.eventType);
} else if (evt && evt.eventType === 'left') {
console.log(evt.eventType);
} else if (evt && evt.eventType === 'down') {
console.log(evt.eventType);
} else if (evt && evt.eventType === 'select') {
setIsPaused(!isPaused);
}
});
};
🐛 Bug Report
AppLink.fetchDeferredAppLink() always returns null in android and undefined in iOS.
To Reproduce
I use https://developers.facebook.com/tools/app-ads-helper to test the deep-link. Here i enter the uri-scheme of the app and checked both Send Notification & Send Deferred.
It shows two popup,
If i click on the notification which i received on the developer facebook account, it is opening the installed app, but the method AppLink.fetchDeferredAppLink() always returns null/undefined.
I tried uninstaling the app, then clicked on the deferred link, then installed and opened the app, still same.
Code Example
const fbsdkInit = (bool) => {
if (bool) {
Settings.setAdvertiserTrackingEnabled(bool).then(() => {
Settings.initializeSDK();
AppLink.fetchDeferredAppLink().then((link) =>
console.log("Link 1", link)
);
});
} else {
Settings.initializeSDK();
AppLink.fetchDeferredAppLink().then((link) => console.log("Link 2", link));
}
};
async function getATTPermissionForFbAppEvents() {
const ATT_CHECK = await check(PERMISSIONS.IOS.APP_TRACKING_TRANSPARENCY);
if (ATT_CHECK === RESULTS.DENIED) {
try {
const ATT = await request(PERMISSIONS.IOS.APP_TRACKING_TRANSPARENCY);
if (ATT === RESULTS.DENIED) {
getATTPermissionForFbAppEvents();
} else {
if (ATT === RESULTS.GRANTED) {
fbsdkInit(true);
} else {
fbsdkInit(false);
}
}
} catch (error) {
fbsdkInit(false);
}
} else if (ATT_CHECK === RESULTS.GRANTED) {
fbsdkInit(true);
} else {
fbsdkInit(false);
}
}
componentDidMount() {
if (Platform.OS === "ios" && Number(Platform.Version) > 14.4) {
getATTPermissionForFbAppEvents();
} else {
fbsdkInit(true);
}
}
I have already tried to solve this problem using
react-native-contacts getAll return null,
react-native-contacts returns undefined.
But, unfortunately, I can't get success.
I've already run below shells:
npm install react-native-contacts --save
react-native link react-native-contacts
Here is my code =========
import Contacts from 'react-native-contacts';
componentDidMount() {
if(Platform.OS === 'ios'){
Contacts.getAll((err, contacts) => {
if (err) {
throw err;
}
// contacts returned
console.log("contacts => ", contacts);
})
}else if(Platform.OS === 'android'){
PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.READ_CONTACTS,
{
title: 'Contacts',
message: 'This app would like to view your contacts.'
}
).then(() => {
Contacts.getAll((err, contacts) => {
if (err === 'denied'){
// error
} else {
// contacts returned in Array
console.log("contacts => ", contacts);
}
})
})
}
}
======================================
Here is my result.
screen shoot my error terminal
My environment :
> expo --version
> 4.0.6
> node --version
> v14.15.0
> npm --version
> 6.14.8
As You Are Using Expo You Can Try Using The Contacts Module From Expo . The Documentation For Contacts https://docs.expo.io/versions/v32.0.0/sdk/contacts/ .
In Case You Want To Use react-native-contacts You must eject expo and continue with react-native-cli
import { Contacts } from 'expo';
const { data } = await Contacts.getContactsAsync({
fields: [Contacts.Fields.Emails],
});
if (data.length > 0) {
const contact = data[0];
console.log(contact);
}
I'm using https://github.com/AppsFlyerSDK/react-native-appsflyer in our react-native app.
I managed to set up the iOS part of it and ran the integration tests successfully
but I'm struggling with the Android integration.
1st problem:
When I build the app on my device I get this error:
'Attempt to invoke virtual method \'android.content.Context android.app.Application.getApplicationContext()\' on a null object reference'
inside the appsFlyer.initSdk
2nd problem:
When I run the Android SDK Integration test:
I get this result (see screenshot)
Here's my code :
```
...
...
// appsFlyer options
const options = {
devKey: 'Bl9i45ho07lp43',
isDebug: true,
};
if (Platform.OS === 'ios') {
options.appId = '1165972436';
}
this.onInstallConversionDataCanceller = appsFlyer.onInstallConversionData(
(data) => {
console.log(data);
}
);
appsFlyer.initSdk(options,
(result) => {
console.log(result);
},
(error) => {
console.error('error inside appsFlyer.initSdk ==>', error);
}
);
.....
.....
class App extends React.PureComponent {
state = {
appState: AppState.currentState,
}
componentDidMount() {
AppState.addEventListener('change', this._handleAppStateChange);
}
componentWillUnmount() {
if (this.onInstallConversionDataCanceller) {
this.onInstallConversionDataCanceller();
}
AppState.removeEventListener('change', this._handleAppStateChange);
}
_handleAppStateChange = (nextAppState) => {
if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
if (Platform.OS === 'ios') {
appsFlyer.trackAppLaunch();
}
}
if (this.state.appState.match(/active|foreground/) && nextAppState === 'background') {
if (this.onInstallConversionDataCanceller) {
this.onInstallConversionDataCanceller();
}
}
this.setState({ appState: nextAppState });
}
}
```
I found the solution:
Initially, I was following the documentation by adding
new RNAppsFlyerPackage(MainApplication.this) inside the getPackages() method in MainApplication.java but I kept having an error saying I couldn't use arguments with RNAppsFlyerPackage()
I had to remove the arguments so that I can build the project, but that didn't make the Android integration tests
1 - The solution was to clean the project
2 - delete the node_modules using :
rm -rf /node_modules
3- after doing that, I was prompted to use arguments inside the method
new RNAppsFlyerPackage(MainApplication.this)
and now the Android integration tests are passing