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.
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 have been trying for days now to add screens with different cars to the navigation stack. help??
My Expo Snack Link
app.js
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, View } from 'react-native';
import CarsList from './components/CarsList';
import Header from './components/Header';
import { NavigationContainer } from '#react-navigation/native';
export default function App() {
return (
<NavigationContainer>
<View style={styles.container}>
<Header />
<CarsList />
<StatusBar style="auto" />
</View>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
I'm just trying to make a ReactNative app that will display a simple webpage. But all I can see is a blank screen in my browser (Google) and my Expo Go says Network response timed out. Could somebody help me out, please?
I have given my code below:
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, } from 'react-native';
import {WebView} from 'react-native-webview';
export default function App() {
const GOOGLE = "https://www.google.com/"
return (
<View style={styles.container}>
<View>
<WebView
source = {{uri : GOOGLE}}
/>
</View>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Blank screen image...
I have done npm install react-native-webview
you cant npm install react-native-webview because it has native dependencies.
You need to install it through expo by going
expo install react-native-webview
you can read this for more
https://docs.expo.dev/versions/latest/sdk/webview/
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...
I am just importing my files from a custom created folder component to App.js file and import key in not working on manually created files while working on other imports on React and React native.
I am making an application of React-Native using Expo CliCode Image
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import test from './component/test'; // This line is producing error
export default function App() {
return (
<View style={styles.container}>
<test/>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
const styles = StyleSheet.create({`enter code here`
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
TEST COMPONENT :----
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class Test extends React.Component {
render(){
return (
<View style={styles.container}>
<Text>Login js file</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
PLEASE VISIT CODE IMAGE line 3 is causing error
https://i.stack.imgur.com/WRYAt.png