react-native-maps Bug with children components keep moving location? - react-native

https://ufile.io/1bdoq
Bug:
Mapview wrapped children components may or may not leave the parent component when app loads.
Simulator:
iOS iPhone 6
xCode 10
Environment :
react-native-cli: 2.0.1
react-native: 0.57.0
"react-native-maps": "^0.22.1",
import React, { Component } from 'react';
import {View, Text, TouchableOpacity} from 'react-native'
import MapView from 'react-native-maps';
import { SearchBar } from 'react-native-elements'
import FontAwesome5 from 'react-native-vector-icons/dist/FontAwesome5'
export default class Search extends Component {
static navigationOptions = {
title: 'Search',
header: null
};
constructor(props){
super(props);
this.state = {
region: {
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
},
}
}
onRegionChange(region) {
this.setState({ region });
}
render(){
return(
<View style={{flex:1}}>
<MapView
style={{flex: 1}}
onRegionChange={(region) => this.onRegionChange(region)}
initialRegion={this.state.region}
>
<SearchBar
containerStyle={{backgroundColor: 'rgba(0,0,0,0)', borderTopWidth: 0, borderBottomWidth: 0, marginLeft: 10, marginRight: 10}}
inputStyle={{backgroundColor: 'white', marginTop: 30}}
icon={{type: 'material', color: '#86939e', name: 'search',style:{marginTop: 22, zIndex: 9999999}}}
lightTheme
/>
<TouchableOpacity style={{ height: 30, width: 150, backgroundColor:'white', justifyContent: 'center', paddingLeft: 10, paddingRight: 10}}>
<Text style={{textAlign: 'center'}}>Current Location</Text>
</TouchableOpacity>
<TouchableOpacity style={{ height: 30, width: 30, backgroundColor:'blue', justifyContent: 'center'}}>
<FontAwesome5 name="location-arrow" size={20} color="white"/>
</TouchableOpacity>
</MapView>
</View>
)
}
}

please close. READ THE DOCS do not wrap your components within the mapview, but put it underneath, and use absolute.

Related

How to fix issue with KeyboardAwareScrollView?

Screenshot
Screenshot2
import React from 'react';
import { View, SafeAreaView, StyleSheet, TextInput, Text, TouchableOpacity, Platform } from 'react-native';
import MapView, { UrlTile } from 'react-native-maps';
import tw from 'tailwind-react-native-classnames';
import { Card } from 'react-native-shadow-cards';
import { useNavigation } from '#react-navigation/native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
const MapScreen = () => {
const navigation = useNavigation();
let location = {
latitude: 5.354846154402075,
longitude: 100.30152659738222,
latitudeDelta: 0.001,
longitudeDelta: 0.002
}
return (
<SafeAreaView style={tw`bg-white h-full`}>
<View style={tw`h-2/3`}>
<MapView
style={styles.map}
mapType='standard'
region={location}>
<UrlTile
urlTemplate='https://api.maptiler.com/maps/openstreetmap/256/{z}/{x}/{y}.jpg?key=2fFGEOiBVDCSMRNfaU70'
shouldReplaceMapContent={true}>
</UrlTile>
</MapView>
</View>
<KeyboardAwareScrollView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
bounces={false}
enableOnAndroid={true}
scrollEnabled={true}
enableAutomaticScroll={true}
contentContainerStyle={{ flex: 1 }}>
<View style={styles.cardContainer}>
<Card style={styles.cardView}>
<Text style={{ fontSize: 11, paddingTop: 10, paddingLeft: 10 }}>From</Text>
<View style={styles.inputBox}>
<TextInput
style={{ paddingVertical: 0, paddingLeft: 10 }}
placeholder='Current Location'
keyboardType='current-location'>
</TextInput>
</View>
<Text style={{ fontSize: 11, paddingTop: 10, paddingLeft: 10 }}>To</Text>
<View style={styles.inputBox}>
<TextInput
style={{ paddingVertical: 0, paddingLeft: 10 }}
placeholder='Destination'
keyboardType='destination'>
</TextInput>
</View>
<View>
<TouchableOpacity
onPress={() => navigation.navigate('ShowResultScreen')}
style={styles.button}>
<Text
style={{
textAlign: 'center',
fontWeight: '700',
fontSize: 17,
color: '#fff'
}}>
Search
</Text>
</TouchableOpacity>
</View>
</Card>
</View>
</KeyboardAwareScrollView>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
map: {
width: '100%',
height: '100%',
},
cardContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
borderRadius: 25,
shadowOpacity: 0.8
},
cardView: {
width: '97%',
height: '95%',
paddingLeft: 10,
paddingTop: 3
},
button: {
backgroundColor: '#5AA9E6',
padding: 10,
borderRadius: 10,
marginTop: 15,
marginRight: 10
},
inputBox: {
borderRadius: 10,
width: '97%',
height: '15%',
backgroundColor: '#F5F3F4',
marginTop: 10
}
});
export default MapScreen;
I want to make the input section below is scrollable and not covered by the keyboard when the keyboard is pop up so that the Search button can be pressed after typing the required input.
Update: I have used KeyboardAwareScrollView instead of using KeyboardAvoidingView and ScrollView. However, the result is like the Screenshot2.
The easiest way is to use the package react-native-keyboard-aware-scroll-view.

How to Overlay selected custom marker in react-native-maps

I use react-native-maps to display an array of positions using custom marker. I want to overlay the selected maker, but did not found the right solution. Using position: 'absolute' for the selected marker changes its position in the map.
Here is the code of the MapView:
<MapView
style={styles.map}
region={region} // initial region is user location if myPosition or coordinates of search
// onRegionChange={onRegionChange}
>
<View style={{position: 'absolute'}}>
{data.map((item) => (
<Marker
onPress={() => handleMarkerPress(item)}
coordinate={{
latitude: item.latitude,
longitude: item.longitude,
}}
// image={require('Resources/geoloc.png')}
// pinColor={item.id === visibleItemId ? 'red' : 'blue'}
key={item.id}>
<MosqueMarquer
mosqueImage={item.images}
itemId={item.id}
visibleItemId={visibleItemId}
distance={item.distance_result}
/>
</Marker>
))}
{isUserGeoLoc ? (
<Marker
coordinate={{
latitude: userLocation.latitude,
longitude: userLocation.longitude,
}}
description={'Your are here'}>
<Image
resizeMode="contain"
source={require('Resources/user_location.png')}
style={{tintColor: '#4280ee', height: 25}}
/>
</Marker>
) : null}
</View>
</MapView>
And here is the custom marker code:
const MosqueMarquer = (props) => {
const relativeStyle =
props.itemId == props.visibleItemId
? {position: 'absolute', tintColor: '#428947', color: '#fff', zIndex: 1}
: {position: null, tintColor: '#fff', color: '#3c423d', zIndex: 0};
return (
<ImageBackground
resizeMode="contain"
source={require('Resources/square_marker.png')}
style={{
...styles.imageBackground,
position: relativeStyle.position,
zIndex: relativeStyle.zIndex,
}}
imageStyle={{tintColor: relativeStyle.tintColor}}>
<Text style={{...styles.text, color: relativeStyle.color}}>
{props.distance}m
</Text>
</ImageBackground>
);
};
export default MosqueMarquer;
const styles = StyleSheet.create({
imageBackground: {
width: 70,
height: 70,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: common.FONT_SIZE_H38,
},
});
the selected marker in green is under the none selected one:
THANKS
<XMarksTheSpot coordinates={coordinatesOfYOurMarker} center={center} />
XMarksTheSpot ->
import React from 'react';
import PropTypes from 'prop-types';
import { View } from 'react-native';
import { Polygon, Polyline, Marker } from 'react-native-maps';
class XMarksTheSpot extends React.Component {
render() {
return (
<View>
<Polygon
coordinates={this.props.coordinates}
strokeColor="rgba(0, 0, 0, 1)"
strokeWidth={3}
/>
<Polyline
coordinates={[this.props.coordinates[0], this.props.coordinates[2]]}
/>
<Polyline
coordinates={[this.props.coordinates[1], this.props.coordinates[3]]}
/>
<Marker coordinate={this.props.center} />
</View>
);
}
}
XMarksTheSpot.propTypes = {
coordinates: PropTypes.array,
center: PropTypes.object,
zIndex: PropTypes.number,
};
export default XMarksTheSpot;

How to open a facebook, instagram.. (social network) profile from my app

I'm creating an application using react native and I need to allow user to open all the available social networks of another user.
I saw that question and this one, but they doesn't works for me.
can anyone help
EDIT
I know how to create icons and call social networks' website, however, what I want is to open a user profile in a social networks app
I remarked that for instagram, the user profile url, opens the app, howover for Fb, it opens the website,
This following is used in my project. Its the contact US page of my react native app.
Works fine for me.
import React, { Component } from 'react';
import { StyleSheet, Text, Dimensions, View, TouchableNativeFeedback, TouchableOpacity, Image, Linking, ScrollView, Platform } from 'react-native';
import { Icon, Card, CardItem } from 'native-base';
import Colors from '../config/Colors';
import Dimens from '../config/Dimens';
import { RNToasty } from 'react-native-toasty';
import OneSignal from 'react-native-onesignal';
import { getStatusBarHeight } from 'react-native-status-bar-height';
import { colors } from 'react-native-elements';
import { Header } from 'react-navigation';
import HeaderBackground from '../components/HeaderBackground';
var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;
class SocialMedia extends Component {
constructor(props) {
super(props);
}
static navigationOptions = ({ navigation }) => {
return {
header: (props) => <HeaderBackground {...props} />,
headerStyle: {
backgroundColor: Colors.transparent,
paddingTop: Platform.OS === 'ios' ? 0 : getStatusBarHeight(),
height: Header.HEIGHT + (Platform.OS === 'ios' ? 0 : getStatusBarHeight()),
},
title: 'Social Media',
headerTintColor: Colors.white,
headerTitleStyle: {
fontWeight: 'bold',
padding: 5,
paddingTop: 10
},
headerMode: 'float',
headerLeft: <Icon
onPress={() => navigation.goBack()}
name="arrow-back"
type='MaterialIcons'
style={{ color: 'white', marginLeft: 10, padding: 5, paddingTop: 10 }}
/>,
}
}
render() {
return (
<View style={styles.container}>
<View style={styles.cardContainer}>
<TouchableOpacity background={TouchableNativeFeedback.Ripple(Colors.secondaryColor, false)} onPress={() => { Linking.openURL('https://www.facebook.com/max/') }}>
<Card style={styles.card}>
<CardItem style={styles.cardBody}>
<Image source={require('../assets/icons/Contact_Facebook.jpg')} style={styles.icon} resizeMode='contain' />
<Text style={styles.iconText}>Facebook</Text>
</CardItem>
</Card>
</TouchableOpacity>
<TouchableOpacity background={TouchableNativeFeedback.Ripple(Colors.secondaryColor, false)} onPress={() => { Linking.openURL('https://www.instagram.com/max/') }}>
<Card style={styles.card}>
<CardItem style={styles.cardBody}>
<Image source={require('../assets/icons/Contact_Insta.jpg')} style={styles.icon} resizeMode='contain' />
<Text style={styles.iconText}>Instagram</Text>
</CardItem>
</Card>
</TouchableOpacity>
<TouchableOpacity background={TouchableNativeFeedback.Ripple(Colors.secondaryColor, false)} onPress={() => { Linking.openURL('https://www.youtube.com/channel/UCnQoipGmBRC1XTOUY8c1UdA') }}>
<Card style={styles.card}>
<CardItem style={styles.cardBody}>
<Image source={require('../assets/icons/Contact_YT.jpg')} style={styles.icon} resizeMode='contain' />
<Text style={styles.iconText}>YouTube</Text>
</CardItem>
</Card>
</TouchableOpacity>
<TouchableOpacity background={TouchableNativeFeedback.Ripple(Colors.secondaryColor, false)} onPress={() => { Linking.openURL('https://max.com/') }}>
<Card style={styles.card}>
<CardItem style={styles.cardBody}>
<Image source={require('../assets/icons/Contact_web.jpg')} style={styles.icon} resizeMode='contain' />
<Text style={styles.iconText}>Website</Text>
</CardItem>
</Card>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 8
},
contentContainer: {
paddingBottom: 20
},
cardContainer: {
flex: 1,
padding: 5,
width: '100%',
},
card: {
padding: 5,
height: height * .20,
width: '100%',
backgroundColor: '#fff',
flexDirection: 'column',
//alignItems: 'center',
//justifyContent: 'center',
shadowColor: '#1A9EAEFF',
shadowOffset: { width: 3, height: 3 },
shadowOpacity: 3,
shadowRadius: 2,
elevation: 10,
borderRadius: 5,
overflow: 'hidden'
},
cardBody: {
flex: 1,
flexDirection: 'row',
},
iconText: {
flex: 1,
fontWeight: 'bold',
alignItems: 'center',
justifyContent: 'center',
fontSize: 18,
color: '#1A9EAEFF'
},
icon: {
flex: 1,
width: '100%',
height: width * .18,
},
});
export default SocialMedia;
Hope this helps..
You're good to go!!
For instagram this is working for me,
Linking.openURL('https://www.instagram.com/profile_username/');
for facebook its just opening the facebook app.
Linking.openURL('fb://profile_username/');

Add search bar to react-native-maps when using expo

I would like to add a search bar to my maps screen and then use google to find the location associated with the input text and move the map there.
This is what I have right now:
import React, { Component } from 'react';
import {
View
} from 'react-native';
import { Mapview } from 'expo';
export default class screen extends Component {
constructor(props) {
super(props);
this.state = {
initialRegion: {
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}
};
}
render() {
return (
<View>
<MapView
style={{ flex: 1 }}
initialRegion={this.state.initialRegion}
/>
</View>
)
}
}
I cannot find this feature in the react-native-maps documentation. Is this something I need to build myself?
This answer covers adding a search box onto your map.
As specified in the react-native-maps docs (https://github.com/react-native-maps/react-native-maps#overlaying-other-components-on-the-map) you need to use absolute positioning.
For example the following code:
<MapView loadingEnabled={true} style={styles.map} />
<View style={{ position: 'absolute', top: 10, width: '100%' }}>
<TextInput
style={{
borderRadius: 10,
margin: 10,
color: '#000',
borderColor: '#666',
backgroundColor: '#FFF',
borderWidth: 1,
height: 45,
paddingHorizontal: 10,
fontSize: 18,
}}
placeholder={'Search'}
placeholderTextColor={'#666'}
/>
</View>
Will produce the following layout.

navigate.dispatch(DrawerActions.closeDrawer()) not working in React Native

On click of a cross button the drawer should be closed, that is the
thing I am trying. I have passed down the props inside component but
giving error that navigate.dispatch(DrawerActions.closeDrawer()) is
undefined.
I am providing My code
SideMenu.js which the layout of drawer menu. From here I am passing
props to drawerheader.
import React, {Component} from 'react';
import { View, StyleSheet} from 'react-native';
import DrawerHeader from './DrawerHeader';
import DrawerMenu from './DrawerMenu';
import { StackNavigator } from 'react-navigation';
class SideMenuLayout extends Component {
state = {
menuNames:[{
id:'0',
name:'My Profile',
link:''
},{
id:'1',
name:'Place Order',
link:''
},{
id:'2',
name:'Order History',
link:'OrderHistory'
},{
id:'3',
name:'Payment',
link:''
},{
id:'4',
name:'Recharge',
link:''
},{
id:'5',
name:'Help',
link:''
},{
id:'6',
name:'Logout',
link:''
}]
}
render () {
return (
<View style={styles.container} >
<DrawerHeader navigation={this.props.navigation}/>
<DrawerMenu
navigation={this.props.navigation}
menuItems={this.state}
style={{ marginTop: 106/3}}
/>
</View>
);
}
}
export default SideMenuLayout;
const styles = StyleSheet.create({
container:{
flex:1,
backgroundColor: "#ffffff",
}
});
Drawer Header code goes here. Here I am trying to close the navigation drawer.
import React, {Component} from 'react';
import {Text, View, StyleSheet,Image,TouchableOpacity} from 'react-native';
import { FontAwesome } from '#expo/vector-icons';
import { DrawerActions, StackNavigator } from 'react-navigation';
const DrawerHeader = (props)=> {
const { navigate } = props.navigation;
return (
<View style={{backgroundColor: '#d61822',width:DRAWER_CONTAINER_WIDTH/3,height:DRAWER_CONTAINER_HEIGHT/3 }}>
<View style={styles.titleContainer}>
<View style={{ marginLeft:20, backgroundColor:'#d61822',height:40 }}>
<Text style={{fontSize:28,fontStyle:'italic',color:'#ffff',fontWeight:'bold'}}>
Prabhuji Online
</Text>
</View>
<View style={{ marginLeft:35,backgroundColor:'#d61822',width: 50, height: 40,paddingRight:10,alignItems:'center',justifyContent:'center' }}>
<TouchableOpacity onPress={()=>navigate.dispatch(DrawerActions.closeDrawer())}>
<Text style={{fontSize:20,color:'#ffff',}}>
<FontAwesome
style={{ alignSelf: 'flex-end'}}
name="times"
size={18}
color="#ffffff"
/>
</Text>
</TouchableOpacity>
</View>
</View>
<View style={styles.fakeContainer}>
</View>
<View style={{
position:'absolute',
top: 170/3,
marginLeft:20,
width:220/3,
height:220/3,
backgroundColor:'#fffcf9',
borderRadius:(220/3)/2,
justifyContent:'center',
alignContent:'center',
alignItems:'center',
shadowColor: "#000",
shadowOffset: {
width: 0,
height: 5,
},
shadowOpacity: 0.25,
shadowRadius: 6.27,
elevation: 7,
}}>
<Image
tintColor='red'
style={{
width: 111/3,
height: 111/3,
}}
source={require('../../../assets/place_order.png')}/>
</View>
</View>
);
}
export default DrawerHeader;
const styles = StyleSheet.create({
titleContainer:{
backgroundColor: '#d61822',
flexDirection: 'row',
height:TITLE_CONTAINER_HEIGHT/3,
marginTop: 50/3,
},
fakeContainer:{
position:'relative',
height:FAKE_CONTAINER_HEIGHT/3,
backgroundColor: '#ffffff',
//backgroundColor: 'yellow',
}
});
Can any one please tell me what is going wrong here?
I have also tried navigate.closeDrawer(). But same error is giving.
Instead of using the navigate call, you need to dispatch the action like this: this.props.navigation.dispatch(*your action here*), as described in the docs: https://reactnavigation.org/docs/en/navigation-prop.html#dispatch-send-an-action-to-the-router