When I run this React Native application on my Android device, I get an error on the device saying "Cant find variable: a". How would I go about fixing this? I've posted my code below.
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
Are you using TypeScript? how about remove type Props = {};
and update
export default class App extends Component<Props>
to:
export default class App extends Component
Related
I'm new to react-native and try to build some basic app. I'm trying to render a custom component named 'Home' in my app.js but i received the error: ReferenceEroor: Can't find variable:instructions . I tought this was one of the easiest things to add a custom component until this error.. Is anyone who could help me further?
Code app.js:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import Home from './src/Home';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
export default class App extends Component {
render() {
return (
<View style={styles.main}>
<Home/>
</View>
);
}
}
const styles = StyleSheet.create({
main: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
Code Home.js:
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
const Home = () => (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to Picoo!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
)
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
export default Home;
Receiving this error:
You're tryind to access instructions variable declared in your Home componant file ... and it's declared in a different scope
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
I get this error
"Failed to load bundle(http://localhost:8081/index.bundle?platform=ios$dev=true&minnify=false)with error;(index.js:/Users/Floyd/sites/crm.node_modules/react-native/index.js"Duplicate declaration"App"[0m[90........
app.js file
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to The CRM!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
And index.js file
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(crm, () => App);
If you use the lower version, this problem will most likely be solved.
Version 0.55.0 is fine
react-native init --version="react-native#0.55.0" YOUR_APP_NAME
I Have tried the same which is given in this link (https://www.npmjs.com/package/react-native-document-picker) But it open the document picker on the form load itself.
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button} from 'react-native';
import { DocumentPicker, DocumentPickerUtil } from 'react-native-document-picker';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component<Props> {
TryUploadFile = () => {
DocumentPicker.show({
filetype: [DocumentPickerUtil.images()],
},(error,res) => {
// Android
console.log(
res.uri,
res.type, // mime type
res.fileName,
res.fileSize
);
});
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
<Button title="Upload File" onPress={this.TryUploadFile()}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
But it is loading the document picker on loading the application ad noting is visible.
Change this onPress={this.TryUploadFile()} to onPress={this.TryUploadFile} on Button
I'm an absolute newbie when it comes to react-native. I've been following a tutorial, but not all of the code is provided. I've done my best - the app compiles - but all I see is a blank white page in iOS simulator. Can anyone help me understand why I'm not seeing the labels from the SearchPage component?
App.js:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
'use strict';
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
NavigatorIOS
} from 'react-native';
import SearchPage from './SearchPage';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
export default class App extends Component<{}> {
render() {
return (
<NavigatorIOS
style={styles.container}
initialRoute={
{
title: 'Property Finder',
component: SearchPage,
}
} />
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
description: {
fontSize: 18,
textAlign: 'center',
color: '#656565',
marginTop: 65,
},
});
SearchPage.js:
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
Text,
TextInput,
View,
Button,
ActivityIndicator,
Image,
} from 'react-native';
export default class SearchPage extends Component<{}> {
render() {
return (
<View style={styles.container}>
<Text style={styles.description}>
Search for houses to buy!
</Text>
<Text style={styles.description}>
Search by place-name or postcode.
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
description: {
marginBottom: 20,
fontSize: 18,
textAlign: 'center',
color: '#656565'
},
container: {
padding: 30,
marginTop: 65,
alignItems: 'center'
},
});
If I replace App.render() with the guts of SearchPage.render(), then I do see the 2 labels.
The tutorial is iOS-specific. Simulator is iPhone 6 iOS 11.2.
If any other info is needed please leave a comment.
In the middle of making a react native application and I'm experimenting with functional programming within React Native and for some reason when I convert the prebuilt code into an arrow function the HOT RELOADING responds but doesn't push the changes please help.
Here's the prebuilt code w/ class
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import Component1 from './app/components/msg/propsMsg'
export default class tutorial extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome a React Native Sandbox!
</Text>
<Component1 msg="props MSG"/>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#fefefe',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('tutorial', () => tutorial);
Here's my attempt at turning it functional
const tutorial = () => {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome a React Native Sandbox!
</Text>
<Component1 msg="props MSG 2"/>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
)
}
export default tutorial