I am testing the vibrate feature for ios using expo and it seems pretty straight forwared on the docs. For some reason though I can not get the iphone to vibrate. I can get it to console log at the time of vibrate call. Any ideas on how I can get this working?
app.js toy example
import * as React from 'react';
import { Text, View, StyleSheet, Vibration, TouchableOpacity } from 'react-native';
export default function App() {
const startVibration = () => {
console.log('start vibration')
Vibration.vibrate()
}
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => startVibration()}>
<Text>Vibrate Once</Text>
</TouchableOpacity>
</View>
)}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#efefef',
padding: 8,
},
});
I went into the settings on an iphone and toggled vibrate on silent and vibrate on ring and now the vibrate works.
Related
I created a react native app with expo. However, when I run it using expo start I get a fully white screen with nothing else displayed.
Screenshot:
Code :
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
This is usually a network error. Try using npx expo start --offline
If you are running it on device, it might be because of styling of Text. Try giving some style to it:
<Text style={{color: "black"}}>Open up App.js to start working on your app!</Text>
I am using Expo and React Native and I want to display a Lottie animation. On iOS this works like a charm - on Android the animation will play once and then it will not play again. It seems that reset() somehow behaves strange.
What am I doing wrong here? You can also have a look at a corresponding Expo snack.
import { Button, View } from 'react-native';
import React, { useRef } from 'react';
import LottieView from 'lottie-react-native';
import likeAnimation from './assets/animation.json';
export default function App() {
const animation = useRef(null);
const onPress = () => {
animation.current.play();
};
const onAnimationFinish = () => {
animation.current.reset();
}
return (
<View style={{ paddingTop: 200, backgroundColor: '#dddddd', flex: 1 }}>
<LottieView
loop={false}
speed={1.5}
autoSize
ref={animation}
source={likeAnimation}
onAnimationFinish={onAnimationFinish}
/>
<Button onPress={onPress} title="Click me!" />
</View>
);
}
I simply created a react-native-project using expo and added react-native-tts and tried to use the speak function but it is giving Native module cannot be null.
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Button, StyleSheet, Text, View } from 'react-native';
import Tts from 'react-native-tts';
export default function App() {
return (
<View style={styles.container}>
<Button
onPress = {() => {Tts.speak("Hello, world!")}}
title = "voice"
/>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
This is an expo project and react-native-tts is not made for expo. So for text to speech I need to use expo-speech or eject the project from expo.
I am new to React Native.
I am using Android Emulator from Android Studio, and I did not change anything at all from any .json file... Whenever the emulator is running it's always a blank screen... It does not display any single error by the way...
App.js:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default App;
Just press R two times... that simple, yes...
Im very new to react-native and expo.
I can't solve this problem myself.
My previous code was this.
import React, {Component} from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import firebase from 'firebase';
export default class Home extends React.Component {
handleSignOut = () => {
firebase
.auth()
.signOut()
.then(result => alert('sign out success'))
.catch(error => console.error(error));
};
render() {
return (
<View style={styles.container}>
<Text>Main</Text>
<TouchableOpacity onPress={this.handleSignOut}>
<Text>Sign Out</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center'
}
});
Then I just changed the text 'Main' to 'Home' and saved.
After that expo client was reloaded but nothing changed :(
I would appreciate it if you could give me any advices!
Not sure which version of Expo you're using (expo --version), but I spun off a quick Expo project, copy pasted your code (minus the Firebase parts) and it works seamlessly.
Maybe try closing and reopening your emulator/simulator.