I am working on React-Native application. i want to implement shaka player in react-native.
any solution?
Have you tried using the shaka-player npm package? You can use it within your React component and instantiate as state.
import React, { useRef, useState, useEffect } from 'react';
import shaka from 'shaka-player';
const Component = () => {
const playerRef = useRef();
const [videoPlayer, setVideoPlayer] = useState();
useEffect(() => {
if (!videoPlayer) {
const newPlayer = new shaka.Player(playerRef.current);
setVideoPlayer(newPlayer);
// you can start using shaka-player APIs with videoPlayer
}
}, []);
return (
<video ref={playerRef} />
);
}
Related
I have an Expo app that will open some web page with a redirect to expo itself. On that case, this is to perform 3DS callbacks. Here is a very simplified version:
import React, {
FC, useEffect, useState,
} from 'react';
import * as Linking from 'expo-linking';
import * as WebBrowser from 'expo-web-browser';
import {
Button,
} from '#private/apps-components';
import {
ButtonProps,
View,
} from 'react-native';
export const MyComponent: FC = () => {
const [loading, setLoading] = useState<boolean>(false);
const urlEventHandler = async (event): Promise<void> => {
console.log('url-event', event);
setLoading(false);
// Stuff...
};
useEffect(() => {
Linking.addEventListener('url', urlEventHandler);
return () => Linking.removeEventListener('url', urlEventHandler);
}, []);
const handlePress: ButtonProps['onPress'] = () => {
setLoading(false);
WebBrowser.openBrowserAsync(aRandomUrlThatWillRedirectToTheApp, {
showInRecents: true,
})
}
return (
<View>
<Button
title="Test"
onPress={handlePress}
loading={loading}
/>
</View>
);
};
export default null;
This is working. However, if the customer close the navigator before the web redirect is being processed, the app is stuck on the loading state.
The question is: How to detect if a user has closed the opened WebBrowser?
Solved this using AppState:
https://reactnative.dev/docs/appstate
if (appState === "active") { // do things after closing the browser }
I haven't actually tested this - could follow up - but you could probably use react-navigation to detect whether the component is in focus or not. IE when you open the web browser, the component is not in focus, but when you close the web browser, the component is back in focus.
For react navigation version 4 you would wrap the component in withNavigationFocus in order to achieve this: https://reactnavigation.org/docs/4.x/function-after-focusing-screen#triggering-an-action-with-the-withnavigationfocus-higher-order-component. For 5, and 5+, you can use the useIsFocused hook: https://reactnavigation.org/docs/5.x/function-after-focusing-screen/#re-rendering-screen-with-the-useisfocused-hook
I'm using expo-cli, can somebody help me in using custom fonts for Expo Managed React Native projects.
Image Link
Install expo-font
expo install expo-font
Then install expo-app-loading
expo install expo-app-loading
Create a folder called hooks where your App.js is located.
Inside hooks folder create a file called useFonts.js paste this code
useFonts.js
import * as Font from 'expo-font';
const useFonts = async () => {
await Font.loadAsync({
Fontello: require('../assets/fonts/fontello.ttf'),
// Place your custom fonts here and make sure that their location is set properly
});
};
export default useFonts;
Then in your App.js paste this code
import React, { useState } from 'react';
import AppLoading from 'expo-app-loading';
import useFonts from './hooks/useFonts';
export default function App() {
const [IsReady, setIsReady] = useState(false);
const LoadFonts = async () => {
await useFonts();
};
if (!IsReady) {
return (
<AppLoading
startAsync={LoadFonts}
onFinish={() => setIsReady(true)}
onError={(error) => console.log(error)}
/>
);
}
return (
<View>
// Your App Content here
</View
);
}
Working Example
I'm trying to access the current video frame in React Native. I was able to do the same with 'react-webcam' while using React.js with the below code.
import React from "react";
import Webcam from "react-webcam";
function MyFunc () {
const cameraRef = useRef(null);
const processFrame = async() => {
if (cameraRef.current.video){
const img = cameraRef.current.video;
// Code to process.
};
setTimeout(() => processFrame(), 500)
};
React.useEffect(() => {
processFrame();
}, [])
return (
<Webcam
align="center"
audio={false}
mirrored={false}
id="img"
ref={cameraRef}
style={{display: "none"}}
/>
);
};
My current code in React Native using Expo Camera is -
import React, { useState, useEffect, useRef } from "react";
import { Camera } from "expo-camera";
export function MyFunc () {
const cameraRef = useRef(null);
const processFrame = async () => {
const img = cameraRef.current.video;
console.log(img); // This prints undefined
setTimeout(() => processFrame(), 500)
};
useEffect(() => {
processFrame();
}, []);
return (
<Camera
ref={cameraRef}
type={Camera.Constants.Type.front}
style={{opacity: 0, width:1, height:1}}
/>
);
};
Please let me know how can I access the current video frame without using the asyncTakePicture if possible.
You need a real-time working camera which is Tensorflow Camera (build from expo-camera)
cameraWithTensors (CameraComponent),
A higher-order-component (HOC) that augments the Expo.Camera component with the ability to yield tensors representing the camera stream.
Because the camera data will be consumed in the process, the original camera component will not render any content. This component provides options that can be used to render the camera preview.
Notably the component allows on-the-fly resizing of the camera image to smaller dimensions, this speeds up data transfer between the native and javascript threads immensely.
For more info: Tensorflow React Native API
im using react native expo and push notification works fine when app is running or in background but with the app is close. it doesnt call the method to handle the notification. I need to redirect to detail page. I tried to use function compoents and class components, tried to migrade to legacy notification and the new one.
import React, {useState, useEffect, useRef} from 'react';
import {
Image, ScrollView,
StyleSheet, Text, TouchableOpacity, Platform,
View, Linking,
} from 'react-native';
import * as Notifications from "expo-notifications";
const HomeScreen = (props) => {
useEffect(() => {
notificationListener.current = Notifications.addNotificationReceivedListener(notification => {
const {request, date} = notification ||{}
const {content} = request ||{}
const {data} = content ||{}
const {annKey,type} = data ||{}
if(annKey) {
// navigation.navigate('Detail', {annKey, updateFeed: true, onSelect},)
}
});
responseListener.current = Notifications.addNotificationResponseReceivedListener(response => {
const {notification} = response ||{}
console.log(notification);
const {request, date} = notification ||{}
const {content} = request ||{}
const {data} = content ||{}
const {annKey, type} = data ||{}
if(annKey){
navigation.navigate('Detail', {annKey, updateFeed: true, onSelect},)
}
});
return () => {
Notifications.removeNotificationSubscription(notificationListener);
Notifications.removeNotificationSubscription(responseListener);
};
}, []);
}
export default HomeScreen;
The problem is that the useEffect() get called too late after the app has finished initializing. Therefore the listener is not added before the system has abandoned the notification, and the handler not called.
Fortunately, since you are using the new expo-notifications library, it introduced the useLastNotificationResponse() React hook. It can replace the addNotificationResponseReceivedListener() listener and returns the last notification the user interacted with (i.e. tap). It can be safely used in a useEffect() hook.
You can find the documentation here : https://docs.expo.io/versions/latest/sdk/notifications/#uselastnotificationresponse-undefined--notificationresponse--null
Here is how to use it (it's better to implement it on your root component):
import * as Notifications from 'expo-notifications';
export default function App() {
const lastNotificationResponse = Notifications.useLastNotificationResponse();
React.useEffect(() => {
if (
lastNotificationResponse &&
lastNotificationResponse.notification.request.content.data['someDataToCheck'] &&
lastNotificationResponse.actionIdentifier === Notifications.DEFAULT_ACTION_IDENTIFIER
) {
// navigate to your desired screen
}
}, [lastNotificationResponse]);
return (
/*
* your app
*/
);
}
You have to add this to your app.json file:
"android": {
"useNextNotificationsApi": true,
},
StatusBarIOS has a method addListener which allows us to listen for changes to the status bar height, like so:
StatusBarIOS.addListener('statusBarFrameWillChange', (statusBarData) => {
this.setState({statusBarHeight: statusBarData.frame.height});
});
StatusBarIOS is deprecated, with a message that the code has been merged into StatusBar
How can we listen for the statusBarFrameWillChange event?
You can use the NativeEventEmitter module, here's an example of a react hook using the module to get the status bar height.
import React, { useState, useEffect } from 'react';
import { NativeEventEmitter, NativeModules } from 'react-native';
const { StatusBarManager } = NativeModules;
export default function useStatusBarHeight() {
const [value, setValue] = useState();
useEffect(() => {
const emitter = new NativeEventEmitter(StatusBarManager);
StatusBarManager.getHeight((statusBarFrameData) => setValue(statusBarFrameData.height));
const listener = emitter.addListener('statusBarFrameWillChange', (data) => setValue(data.frame.height));
return () => listener.remove();
}, []);
return value;
}
This snippet also uses the StatusBarManager to grab the initial height.