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
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',
});
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
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'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.
So i am passing some data to the page where i am navigating on click event as
render(){
const goToPageTwo = () => Actions.gray({text:"hello"});
return(
</View>
<Button onPress={goToPageTwo} title="Checkout" color="#841584"/>
</View>
);
}
Now in my other component if i access it as props
this.props.text
It gives an exception saying props is undefined
Please guide how to resolve
Thanks!
Update:
Code which is accessing this.props
import React, { Component } from 'react';
import { Actions } from 'react-native-router-flux'; // New code
import {
StyleSheet,
Text,
Alert,
View
} from 'react-native';
const GrayScreen = () => {
return (
<View style={styles.container}>
<Text style={styles.welcome} onPress={() => Actions.black()}>{this.props.text}</Text>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'gray',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
color: 'blue',
},
});
export default GrayScreen;
code for Routing compponent
import React, { Component } from 'react';
import { Button } from 'react-native';
import Archives from './components/Archives.js';
import ScarletScreen from './components/ScarletScreen.js';
import GrayScreen from './components/GrayScreen.js';
import Zaika from './components/Zaika.js';
import {Table, TableWrapper, Row, Rows, Col, Cols, Cell } from 'react-native-table-component';
import {
Alert,Platform,
StyleSheet,
Text,
View,TextInput,Keyboard
} from 'react-native';
import NavBar, { NavGroup, NavButton, NavButtonText, NavTitle } from 'react-native-nav';
import { Router, Scene } from 'react-native-router-flux';
import App1 from './App1.js';
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 (
<Router>
<Scene key="root">
<Scene
key="zaika"
component={Zaika}
title="Delhi zaika"
initial
/>
<Scene key="app1"
component={App1}
title="app1"
/>
<Scene key="scarlet"
component={ScarletScreen}
title="Scarlet"
/>
<Scene {...this.props}
key="gray"
component={GrayScreen}
title="Gray"
/>
</Scene>
</Router>
);
}
}
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,
},
head: { height: 40, backgroundColor: '#f1f8ff' },
text: { marginLeft: 5 },
row: { height: 30 }
});
You won't have instance property props with React Stateless Functional Component.
The props will pass in as first argument instead:
const GrayScreen = (props) => {
return (
<View style={styles.container}>
<Text style={styles.welcome} onPress={() => Actions.black()}>{props.text}</Text>
</View>
)
}