I have below code to use react-native-map on an android Genymotion simulator. And I followed the instruction from https://github.com/lelandrichardson/react-native-maps/blob/master/docs/installation.md to setup the dependencies. But when I run react-native run-android, it doesn't show the UI. Instead, it shows a while page with a line in the middle. I am able to load the map on an ios device with the similar code. What wrong with my code for android?
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View,
Image,
ListView,
TextInput,
TouchableHighlight,
Dimensions,
//MapView,
} from 'react-native';
import MapView from 'react-native-maps';
const styles = StyleSheet.create({
map: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
container: {
flexDirection: 'row',
justifyContent: 'space-between',
padding: 30,
flex: 1,
alignItems: 'center'
},
inputText: {
height: 36,
padding: 4,
marginRight: 5,
flex: 4,
fontSize: 18,
borderWidth: 1,
borderColor: '#48BBEC',
borderRadius: 8,
color: '#48BBEC'
}
});
class MapPage extends Component{
constructor(props){
super(props);
this.state = {
region:{
latitude: 4.21048,
longitude: 101.97577,
latitudeDelta: 10,
longitudeDelta: 5
}
}
}
render() {
return(
<View style={styles.container}>
<TextInput style={styles.inputText}></TextInput>
<MapView
style={ styles.map }
mapType={"standard"}
region={this.state.region}
zoomEnabled={true}
scrollEnabled={true}
showsScale={true}
></MapView>
</View>
)
}
}
module.exports = MapPage;
Related
Text is not moving, I tried to use justifyContent, alignItems and textAlign but not working. Working on visual studio and react-native, using my phone to emulator.
you can see the code ^^
I hope that u can help me
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
TouchableOpacity,
TextInput,
Image,
Picker,
ImageBackground
} from 'react-native';
export default class App extends Component {
render() {
return (
<ImageBackground
source={require('./resim.jpg')}
style={styles.container}>
<View styles={styles.overlayContainer}>
<View styles={styles.top}>
<Text style={styles.header}>FIRST</Text>
</View>
</View>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
width: '100%',
height: '100%',
},
overlayContainer: {
flex: 1,
backgroundColor: 'rgba(47,163,218, .4)',
},
top: {
height: '50%',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white'
},
header: {
color: '#fff',
fontSize: 28
}
});
Please help me guys please.
overlayContainer: { flex: 1,backgroundColor:'rgba(47,163,218, .4)' },
top: { height: '50%', alignItems: 'center',justifyContent: 'center',backgroundColor: 'white' },
header: { color: '#fff', fontSize: 28 }
Try:
Add width size for top style and overlayContainer style
I am a newbie to react-native. I am currently trying to implement the code which can scan and capture image for an ID card. Basically i am able to take image and save to gallery by using react native camera, but i have no idea how to detect the ID card border. I am seeking help which can guide me about the card border detection or some open source library that can implement such function.
Basically, I have already tried to implement react-native-documentscanner-android and rn-doc-scanner-android library. But react-native-documentscanner-android library i failed to implement and the rn-doc-scanner-android is without card border detection function.
Here is my code:
import React, {Component} from 'react';
import { RNCamera } from 'react-native-camera';
import {
StyleSheet,
View,
Text,
TouchableOpacity,
ToastAndroid
} from 'react-native';
import {
Colors
} from 'react-native/Libraries/NewAppScreen';
import Dimensions from 'Dimensions';
import CameraRoll from "#react-native-community/cameraroll";
export default class App extends Component {
constructor(props){
super(props)
}
state = {
barcodes: [],
}
render(){
const { height, width } = Dimensions.get('window');
const maskRowHeight = Math.round((height - 500) / 20);
const maskColWidth = (width - 300) / 2;
return (
<View style={styles.container}>
<RNCamera
ref={ref => {
this.camera = ref;
}}
style={{
flex: 1,
width: '100%',
justifyContent: "center"
}}
>
<View style={styles.maskOutter}>
<View style={[{ flex: maskRowHeight }, styles.maskRow, styles.maskFrame]} />
<View style={[{ flex: 30 }, styles.maskCenter]}>
<View style={[{ width: maskColWidth }, styles.maskFrame]} />
<View style={styles.maskInner} />
<View style={[{ width: maskColWidth }, styles.maskFrame]} />
</View>
<View style={[{ flex: maskRowHeight }, styles.maskRow, styles.maskFrame]} />
</View>
</RNCamera>
<View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center', backgroundColor: '#2E8B57', margin: 5}}>
<TouchableOpacity onPress={this.takePicture.bind(this)} style={styles.capture}>
<Text style={{ fontSize: 14 }}> SNAP </Text>
</TouchableOpacity>
</View>
</View>
);
}
takePicture = async() => {
if (this.camera) {
const options = { quality: 0.5, base64: true };
const data = await this.camera.takePictureAsync(options);
console.log(data.uri);
ToastAndroid.show(data.uri, ToastAndroid.LONG);
if(data.uri!= null){
console.log('not null')
}else{
console.log('null')
}
CameraRoll.saveToCameraRoll(data.uri);
}
};
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#2E8B57",
overflow: 'hidden',
//width: 350,
//height: 150,
},
camera: {
flex: 1,
alignItems: "center",
justifyContent: "center"
},
scrollView: {
backgroundColor: Colors.lighter,
},
engine: {
right: 0,
},
body: {
backgroundColor: Colors.white,
},
sectionContainer: {
marginTop: 32,
paddingHorizontal: 24,
},
sectionTitle: {
fontSize: 24,
fontWeight: '600',
color: Colors.black,
},
sectionDescription: {
marginTop: 8,
fontSize: 18,
fontWeight: '400',
color: Colors.dark,
},
highlight: {
fontWeight: '700',
},
footer: {
color: Colors.dark,
fontSize: 12,
fontWeight: '600',
padding: 4,
paddingRight: 12,
textAlign: 'right',
},
maskOutter: {
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
alignItems: 'center',
justifyContent: 'space-around',
},
maskInner: {
width: 300,
//height: 300,
backgroundColor: 'transparent',
borderColor: '#DC143C',
borderWidth: 1,
},
maskFrame: {
backgroundColor: 'rgba(1,1,1,0.6)',
},
maskRow: {
width: '100%',
},
maskCenter: { flexDirection: 'row' },
});
I am looking to add a circular bottom to the toolbar in a react-native application that is as shown in the image below.
How do I achieve it in the app?
Here is the working example. Hope this helps
/**
* Sample React Native App
* https://github.com/facebook/react-native
* #flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
TouchableOpacity,
Dimensions,
Image,
FlatList,
AsyncStorage
} from 'react-native';
const window = Dimensions.get('window');
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',
});
var localizedString;
type Props = {};
export default class App extends Component<Props> {
constructor(Props){
super(Props);
this.state={
collapse: false
};
this.collapseEnable =this.collapseEnable.bind(this);
this.collapseDisable =this.collapseDisable.bind(this);
}
collapseEnable(){
this.setState({
collapse:true
})
}
collapseDisable(){
this.setState({
collapse:false
})
}
render() {
return (
<View style={{ flex: 1 }}>
{(this.state.collapse==false)?
<TouchableOpacity style={{height:40, backgroundColor:'pink', alignItems:'center', justifyContent:'center'}} onPress={()=>{this.collapseEnable()}}>
<Text style={{fontSize:20}}>Click here</Text>
</TouchableOpacity>
:
<TouchableOpacity style={styles.container} onPress={()=>{this.collapseDisable()}}>
<View style={styles.background} >
</View>
</TouchableOpacity>
}
</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,
},
container: {
alignSelf: 'center',
justifyContent:'center',
width: '100%',
overflow: 'hidden', // for hide the not important parts from circle
height: 100
},
background: { // this shape is a circle
borderRadius: 800, // border borderRadius same as width and height
width: '200%',
height: 800,
marginLeft: -200, // reposition the circle inside parent view
position: 'absolute',
bottom: 0, // show the bottom part of circle
overflow: 'hidden',
backgroundColor:'pink' // hide not important part of image
},
});
I am making a simple ListView by fetching books details from an API. The app runs well but I get a warning and some ReferenceError. You can have a look at the error here. I have also provided the code below.
Code for index.android.js:
import React, {Component} from 'react';
import {StyleSheet,Image,View,ListView,AppRegistry} from 'react-native';
import BookItem from './BookItem.js';
class dhrumil extends Component{
constructor(){
super();
var ds = new ListView.DataSource({rowHasChanged: (r1,r2) => r1!==r2});
this.state={
dataSource: ds.cloneWithRows([])
}
}
componentDidMount(){
fetch('http://api.nytimes.com/svc/books/v3/lists/hardcover-fiction?response-format=json&api-key=73b19491b83909c7e07016f4bb4644f9:2:60667290')
.then((response) => response.json())
.then((rjson) => {
this.setState({
dataSource: ds.cloneWithRows(rjson.results.books)
});
})
.catch((error)=>{
console.warn(error);
});
}
render(){
return(
<ListView style={styles.container}
dataSource= {this.state.dataSource}
renderRow={(rowData)=> {
return <BookItem style={styles.row}
coverURL={rowData.book_image}
title={rowData.title}
author={rowData.author}
/>;
}
}
/>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FFFFFF',
paddingTop: 24
},
row: {
flex: 1,
height: 44,
fontSize: 24,
padding: 42,
borderWidth: 1,
borderColor: '#DDDDDD'
}
});
AppRegistry.registerComponent('dhrumil',()=> dhrumil);
Code for BookItem.js:
import React,{Component} from 'react';
import {StyleSheet,View,Text,Image,AppRegistry} from 'react-native';
class BookItem extends Component{
propTypes:{
coverURL: React.PropTypes.string.isRequired,
author: React.PropTypes.string.isRequired,
title: React.PropTypes.string.isRequired
}
render(){
return(
<View style={styles.bookItem}>
<Image style={styles.cover} source={this.props.coverURL}/>
<View style={styles.info}>
<Text style={styles.author}>{this.props.author}</Text>
<Text style={styles.title}>{this.props.title}</Text>
</View>
</View>
);
}
}
var styles = StyleSheet.create({
bookItem:{
flex: 1,
flexDirection: 'row',
backgroundColor: '#FFFFFF',
borderBottomColor: '#AAAAAA',
borderBottomWidth: 2,
},
cover:{
flex: 1,
height: 150,
resizeMode: 'contain'
},
info:{
flex: 3,
alignItems: 'flex-end',
flexDirection: 'column',
alignSelf: 'center',
padding: 20
},
author:{
fontSize: 18
},
title:{
fontSize: 18,
fontWeight: 'bold'
}
});
AppRegistry.registerComponent("BookItem",()=> BookItem);
What could possibly be wrong and how do I solve it?
Well the warning already say it all. Just add enableEmptySections to your listview component and the warning is gone.
Hi everyone,
I am new to Android development using react-native and I got this error which I have no idea where this come from because I am not using ScrollView at all!
I am trying to render a list on the initial screen and its data is coming from an api call.
My code is
import React, { Component } from 'react';
import {
Image,
ListView,
TouchableHighlight,
Text,
View,
StyleSheet
} from 'react-native';
import Api from '../../Utils/api';
import CategoryRow from './CategoryRow';
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 12,
flexDirection: 'row',
alignItems: 'center',
},
text: {
marginLeft: 12,
fontSize: 16,
},
photo: {
height: 40,
width: 40,
borderRadius: 20,
},
separator: {
flex: 1,
height: StyleSheet.hairlineWidth,
backgroundColor: '#8E8E8E',
}
});
class Main extends React.Component {
constructor(props){
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows(['row 1', 'row 2'])
}
}
componentDidMount(){
Api.getCategories()
.then((res) => {
this.setState({
dataSource: ds.cloneWithRows(res)
})
})
.catch();
}
render() {
return(
<ListView
style={styles.container}
dataSource = {this.state.dataSource}
renderRow={(data) => <CategoryRow {...data} />}
/>
)
}
}
module.exports = Main;
And the code for categoryRow is:
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 12,
flexDirection: 'row',
alignItems: 'center',
},
text: {
marginLeft: 12,
fontSize: 16,
},
photo: {
height: 40,
width: 40,
borderRadius: 20,
},
});
const CategoryRow = (props) => (
<View style={styles.container}>
<Text style={styles.text}>
${props.name}
</Text>
</View>
);
export default CategoryRow;
Example of data :
[
{
"categoryId": 1,
"code": "15",
"name": "Photography",
"description": "Are you a photo junkie? Then join the “snap pack” and travel to some of the most photogenic places on earth. Our photography trips put you on an itinerary specially geared towards getting the perfect pic, with a group of like-minded travellers. Learn new tricks, share your knowledge, and never worry about taking the time to get the shot. Bonus: someone always has an extra lens cap.",
"categoryTypeId": 1,
"categoryType": {
"categoryTypeId": 1,
"name": "Activity"
}
}
]
Can someone please help me to find out where is the problem and how to resolve this error?
I think ListView uses the ScrollView props. See here http://facebook.github.io/react-native/releases/0.35/docs/listview.html#scrollview
From the error, it seems you should specify alignItems: 'center' in the contentContainerStyle prop of the ListView. Remove it from styles.container
<ListView contentContainerStyle={{alignItems: 'center'}}>
....
</ListView>
render() {
return(
<View style={{
alignItems: 'center'
}}>
<ListView
style={styles.container}
dataSource = {this.state.dataSource}
renderRow={(data) => <CategoryRow {...data} />}
/>)
</View>
}