React-Native app doesn't display anything - react-native

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.

Related

"Cant find variable: a" error when running React Native app

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

Error React Native Duplicate Declaration "App"

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

How to Open Document Picker on Button Click in React native

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

Unexpected view type nested under text node: class com. facebook.react.uimanager.LayoutShadowNode

I am Developing a sample Application in android when i am Developing sample .js page it's getting eroor like as show below page. please rectify this error
this is my Code:
/**
* Sample React Native App
* https://github.com/facebook/react-native
*/
/* To View the user Bookings Screen */
import React,{Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator,
TouchableOpacity,
Image
} from 'react-native';
class DiagnosticCalender extends React.Component {
render() {
return (
<View style={{flexGrow:1,backgroundColor:'green'}}>
<Text style={styles.welcome}>
Coming Soon
</Text>
</View>
);
}
};
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
fontWeight:'bold',
margin: 10
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
}
});
module.exports = DiagnosticCalender;
So, this my Code when i was run the application getting this error.

React Native Height Adjustment

I just started and installed react-native. After installing, I wrote some codes from skeleton codes, but height is always 667.
Even View height is only 300, AppContainer height is 667, View height is more than 667, it cuts contents not expanding height.
Could you help me to figure out this?
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
export default class AwesomeProject extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<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: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);