I'm trying to start a new recording in Expo react native but for some odd reason the app crashes.
The code i written is pretty much copy paste from the official expo docs.
import React, { useState, useEffect } from 'react';
import { Audio } from 'expo-av';
import PitchFinder from "pitchfinder";
import { StyleSheet, Text, View, Button } from 'react-native';
const Tuner = () => {
const pitchFinder = new PitchFinder.YIN();
const start = async () => {
const recording = new Audio.Recording();
console.log(recording)
await recording.prepareToRecordAsync(Audio.RECORDING_OPTIONS_PRESET_HIGH_QUALITY);
await recording.startAsync();
const audio_stream = recording.getURI();
console.log(audio_stream);
await recording.stopAndUnloadAsync();
}
return (
<View>
<Button title="Start recording" onPress={() => start()} />
</View>
)
};
export default Tuner;
The app crashes at await recording.prepareToRecordAsync(Audio.RECORDING_OPTIONS_PRESET_HIGH_QUALITY);
with the error
Unhandled Rejection (TypeError): Cannot read property 'uri' of undefined
please check Expo documentation again
check permission
https://docs.expo.io/versions/latest/sdk/audio/
try with
const recording = new Audio.Recording();
try {
await recording.prepareToRecordAsync(Audio.RECORDING_OPTIONS_PRESET_HIGH_QUALITY);
await recording.startAsync();
// You are now recording!
} catch (error) {
// An error occurred!
}
Related
I try to play video from server. This is my code:
import React, {useState, useEffect} from 'react';
import { Button } from 'react-native';
import { Audio } from 'expo-av';
export default function App() {
const [audioStatus, setAudioStatus] = useState(false)
const [sound, setSound] = useState(new Audio.Sound());
useEffect(()=>{
(async () => {
console.log('status', audioStatus)
if (audioStatus) {
await sound.loadAsync('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3')
try {
await sound.playAsync()
} catch (e) {
console.log(e)
}
}else {
await sound.stopAsync()
await sound.unloadAsync()
}
})()
},[audioStatus])
return (
<Button color={audioStatus ? 'red' : 'green'} title={'play'} onPress={()=>setAudioStatus(!audioStatus)} />
);
}
And I get error:
LOG status false
WARN Possible Unhandled Promise Rejection (id: 15):
Error: Cannot complete operation because sound is not loaded.
http://192.168.100.60:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:100133:28
generatorResume#[native code]
asyncGeneratorStep#http://192.168.100.60:19000/node_modules/expo/AppEntry.bundle?platform=android&dev=true&hot=false:20982:26
It looks like your post is mostly code; please add some more details.It looks like your post is mostly code; please add some more details.
In my app, all other Expo AdMob ads are working very well except AdMobInterstitial. AdMobInterstitial ads showing only once. when I try to visit the next time on that page the ads not showing. I am not getting any errors as well. could you please tell me what's wrong with the below codes? Appreciate your support.
I am using this-> npm i expo-ads-admob
import React, { useEffect, useState, } from 'react';
import { Text, View } from 'react-native';
import {
AdMobBanner,
AdMobInterstitial,
PublisherBanner,
AdMobRewarded,
setTestDeviceIDAsync,
} from 'expo-ads-admob';
const interstitial = async () => {
await AdMobInterstitial.setAdUnitID('ca-app-pub-3940256099942544/1033173712');
try {
await AdMobInterstitial.requestAdAsync({ servePersonalizedAds: true});
await AdMobInterstitial.showAdAsync();
} catch (error) {
console.log(e);
}
}
const TestAds = ({ navigation }) =>{
useEffect (() => {
interstitial();
},[])
return (
<View>
<Text>Hello World Testing</Text>
</View>
});
export default TestAds;
Trying to import .ttf for font in expo cli.
I also have splash screen. I wanna show the splash screen until the font loads.
Font: Josefin Sans.
"expo": "~45.0.0"
I took reference from following links but nothing works:
Using Custom Fonts: https://docs.expo.dev/guides/using-custom-fonts/
Splash Screen: https://docs.expo.dev/versions/latest/sdk/splash-screen/
Code (App.js)
import { useState, useEffect, useCallback } from "react";
import { Text } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { StatusBar } from "expo-status-bar";
import Header from "./components/Header.component";
import styles from "./styles/appStyle";
import * as Font from "expo-font";
import * as SplashScreen from "expo-splash-screen";
const App = () => {
const [appIsReady, setAppIsReady] = useState(false);
useEffect(() => {
async function prepare() {
try {
// Pre-load fonts
await Font.loadAsync({
"JosefinSans-Regular": require("./assets/fonts/JosefinSans-Regular.ttf"),
});
// Artificially delay for two seconds to simulate a slow loading
// experience. Please remove this if you copy and paste the code!
await new Promise((resolve) => setTimeout(resolve, 2000));
} catch (e) {
} finally {
// Tell the application to render
setAppIsReady(true);
}
}
prepare();
}, []);
const onLayoutRootView = useCallback(async () => {
if (appIsReady) {
// This tells the splash screen to hide immediately! If we call this after
// `setAppIsReady`, then we may see a blank screen while the app is
// loading its initial state and rendering its first pixels. So instead,
// we hide the splash screen once we know the root view has already
// performed layout.
await SplashScreen.hideAsync();
}
}, [appIsReady]);
if (!appIsReady) {
return null;
}
return (
<>
<SafeAreaView style={styles.container} onLayout={onLayoutRootView}>
<Header />
<Text>Hello World!</Text>
<StatusBar style="light" backgroundColor="#05060B" />
</SafeAreaView>
</>
);
};
export default App;
Error
Android Bundling failed 12ms
Unable to resolve module ./assets/fonts/JosefinSans-Regular.ttf from C:\Users\user\Desktop\app\App.js:
None of these files exist:
* JosefinSans-Regular.ttf
* assets\fonts\JosefinSans-Regular.ttf\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
18 | // Pre-load fonts
19 | await Font.loadAsync({
> 20 | "JosefinSans-Regular": require("./assets/fonts/JosefinSans-Regular.ttf"),
| ^
21 | });
22 | // Artificially delay for two seconds to simulate a slow loading
23 | // experience. Please remove this if you copy and paste the code!
File Structure:
Snap.png
Answer
expo install #expo-google-fonts/josefin-sans expo-font
And the code looks like this.
import { useState, useEffect, useCallback } from "react";
import { Text } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { StatusBar } from "expo-status-bar";
import Header from "./components/Header.component";
import styles from "./styles/appStyle";
import * as Font from "expo-font";
import * as SplashScreen from "expo-splash-screen";
import {
useFonts,
JosefinSans_100Thin,
JosefinSans_200ExtraLight,
JosefinSans_300Light,
JosefinSans_400Regular,
JosefinSans_500Medium,
JosefinSans_600SemiBold,
JosefinSans_700Bold,
JosefinSans_100Thin_Italic,
JosefinSans_200ExtraLight_Italic,
JosefinSans_300Light_Italic,
JosefinSans_400Regular_Italic,
JosefinSans_500Medium_Italic,
JosefinSans_600SemiBold_Italic,
JosefinSans_700Bold_Italic,
} from "#expo-google-fonts/josefin-sans";
const App = () => {
const [appIsReady, setAppIsReady] = useState(false);
let [fontsLoaded] = useFonts({
JosefinSans_100Thin,
JosefinSans_200ExtraLight,
JosefinSans_300Light,
JosefinSans_400Regular,
JosefinSans_500Medium,
JosefinSans_600SemiBold,
JosefinSans_700Bold,
JosefinSans_100Thin_Italic,
JosefinSans_200ExtraLight_Italic,
JosefinSans_300Light_Italic,
JosefinSans_400Regular_Italic,
JosefinSans_500Medium_Italic,
JosefinSans_600SemiBold_Italic,
JosefinSans_700Bold_Italic,
});
const prepare = async () => {
try {
// Pre-load fonts
await Font.loadAsync(fontsLoaded)
.then(() => {
setAppIsReady(true);
})
.catch((err) => {});
// Artificially delay for two seconds to simulate a slow loading
// experience. Please remove this if you copy and paste the code!
// await new Promise((resolve) => setTimeout(resolve, 2000));
} catch (e) {}
};
useEffect(() => {
prepare();
}, []);
const onLayoutRootView = useCallback(async () => {
if (appIsReady) {
// This tells the splash screen to hide immediately! If we call this after
// `setAppIsReady`, then we may see a blank screen while the app is
// loading its initial state and rendering its first pixels. So instead,
// we hide the splash screen once we know the root view has already
// performed layout.
await SplashScreen.hideAsync();
}
}, [appIsReady]);
if (!appIsReady) {
return null;
}
return (
<>
<SafeAreaView style={styles.container} onLayout={onLayoutRootView}>
<Header />
<Text>Hello World!</Text>
<StatusBar style="light" backgroundColor="#05060B" />
</SafeAreaView>
</>
);
};
export default App;
I am getting the following error while trying to integrate the google login into a react native app and got the following error. It was working fine before. Could someone help. Unable to figure the error
import type {Node} from 'react';
import { GoogleSignin } from '#react-native-google-signin/google-signin';
import auth from '#react-native-firebase/auth';
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
useColorScheme,
View,
Button
} from 'react-native';
const App: () => Node = () => {
GoogleSignin.configure({
webClientId: 'xxx',
});
const signInWithGoogleAsync = async() => {
const { idToken } = await GoogleSignin.signIn();
// Create a Google credential with the token
const googleCredential = auth.GoogleAuthProvider.credential(idToken);
// Sign-in the user with the credential
const user_sign_in = auth().signInWithCredential(googleCredential);
user_sign_in.then((user) =>{
console.log(user);
})
.catch((error)=>{
console.log(error);
})
}
return (
<View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
<Button
title='Sign in with Google'
onPress={signInWithGoogleAsync}
/>
</View>
);
};
export default App;
Hello i get the above error when i run my project what am i doing wrong?
import * as WebBrowser from 'expo-web-browser';
import React , {Component} from 'react';
import {PermissionsAndroid} from 'react-native';
import {
Image,
Platform,
ScrollView,
StyleSheet,
Text,
Button,
TouchableOpacity,
View,
Switch
} from 'react-native';
import { MonoText } from '../components/StyledText';
import {Linking , SMS }from 'expo';
import * as Permissions from 'expo-permissions'
class Sendsms extends Component {
state = {switch1Value: false}
toggleSwitch1 = (value) => {
this.setState({switch1Value: value});
console.log('Switch 1 is: ' + value);
}
askSMSPermissionsAsync = async () => {
await Permissions.askAsync(Permissions.SMS);
};
HandlePress = () =>{
console.log('try to send sms');
}
render(){
return(
<View>
<Text>{this.state.switch1Value ? 'Switch is ON' : 'Switch is OFF'}</Text>
<Switch onValueChange = {this.toggleSwitch1.bind(this)} value = {this.state.switch1Value}/>
<Button title="sendSMS" onPress={this.askSMSPermissionsAsync} />
</View>
)
}
}
I tried rebulding project and deleting the build folder with no luck
I also tried to copy the code in some other project still same error
export default Sendsms;
You need to wrap your await call in a try/catch to handle the rejected promise. I'm not sure why it's getting rejected but you could console.log to find out by doing:
askSMSPermissionsAsync = async () => {
try {
await Permissions.askAsync(Permissions.SMS);
} catch(e) {
console.log(e);
}
};
Remember that await is just syntactic sugar for a promise.
await Permissions.askAsync(Permissions.SMS); results into a Promise which might be rejected. When using promises, always use a try {} catch(e) {} to catch any rejections.
Check the logging for more info about the rejection.
So:
askSMSPermissionsAsync = async () => {
try {
await Permissions.askAsync(Permissions.SMS);
} catch (e) {
console.error(e);
}
};