MapBox with react-native.
How to know if a point is on "water"(ocean) or land.
can't find function visibleFeatures in react-native?
var LocationSelect = function(props) {
const mapContainer = useRef(null);
function onMapPointSelect(data) {
/// Get if point is water or land
mapContainer.visibleFeatures(data.geometry.coordinates, styleLayerIdentifiers: ["water"]);
}
return (
<View style={styles.mapContainer}>
<MapboxGL.MapView style={styles.map}
onLayout={onLayout}
onPress={onMapPointSelect}
ref={el => (mapContainer.current = el)} >
</MapboxGL.MapView>
</View>
);
}
Thank you very much
Related
Im making this menu that when the user clicks at an option, it changes the background image, but i cant use the hook that i created as a parameter to the source of the image. Can someone find where im wrong and how to fix it?
Heres the part of my code referents to the menu and the hooks:
export function Home(){
let imagens = {
vovo: '../assets/vovoJuju.png',
mc: '../assets/mcJuju.png',
pato: '../assets/patoJuju.png',
}
const navigation = useNavigation<any>();
const [showBottomSheet, setShowBottomSheet] = React.useState(false);
const [param, setParam] = useState(1);
const [skin, setSkin] = useState('vovo')
const hide = () => {
setShowBottomSheet(false)
}
function handleAbout(){
navigation.navigate('About');
}
useEffect(() => {
if(param==1){
setSkin('vovo');
}
else if(param==2){
setSkin('mc');
}
else if(param==3){
setSkin('pato');
}
})
return(
<SafeAreaView style={styles.container}>
<TouchableOpacity onPress={handleAbout}>
<Counter />
</TouchableOpacity>
<TouchableOpacity onPress={() => {
setShowBottomSheet(true)
}}
>
<Image source={skin} style={styles.imgvj}/>
</TouchableOpacity>
<BottomSheet show={showBottomSheet} height={290} onOuterClick={hide}>
<Pressable onPress={hide} style={styles.bottomSheetContent}>
<Image source={barrinhaLoja} style={styles.barra}/>
</Pressable>
<View style={styles.conteudoLoja}>
<View style={styles.marginLeft48}>
<TouchableOpacity onPress={() => {
setParam(1);
}}>
<Image source={vovoJuju} style={styles.vovo}/>
<Text style={styles.legendasLoja}>Vovó Juju</Text>
</TouchableOpacity>
</View>
<View>
<TouchableOpacity onPress={() => {
setParam(2);
}}>
<Image source={mcJuju} style={styles.mc}/>
<Text style={styles.legendasLoja}>MC Juju</Text>
</TouchableOpacity>
</View>
<View>
<TouchableOpacity onPress={() => {
setParam(3);
}}>
<Image source={patoJuju} style={styles.pato}/>
<Text style={styles.legendasLoja}>Pato Juju</Text>
</TouchableOpacity>
</View>
</View>
</BottomSheet>
I created the "let imagens", "const param", "const skin" and the "useEffect trying" to make this function. I already tried using the source in different ways such as source={skin} and source={imagens[skin]} but it havent worked.
I'm not certain if this solves your problem, but here's how the first few lines of your component should look like without useEffect:
const imagens = {
vovo: '../assets/vovoJuju.png',
mc: '../assets/mcJuju.png',
pato: '../assets/patoJuju.png',
};
export function Home(){
const navigation = useNavigation<any>();
const [showBottomSheet, setShowBottomSheet] = React.useState(false);
const [param, setParam] = useState(1);
const hide = () => {
setShowBottomSheet(false)
}
function handleAbout(){
navigation.navigate('About');
}
let skin = 'vovo';
switch(param) {
case 1: skin = 'vovo'; break;
case 2: skin = 'mc'; break;
case 3: skin = 'pato'; break;
}
return /* the rest goes here */
}
To reference the actual image, you would use something like {imagens[skin]}.
I moved imagens outside of this function because it never changes, but it doesn't impact anything otherwise.
I don't know what I did wrong in this function, I thought I had a return but I don't think it's being considered, and when I change the closing brackets or parenthesis it shows an error :/
Can someone help me?
function PopSheet() {
let popupRef = React.createRef()
const sheet =() => {
const onShowPopup =()=> {
popupRef.show()
}
const onClosePopup =()=> {
popupRef.close()
}
return (
<SafeAreaView style ={styles.container}>
<TouchableWithoutFeedback onPress={onShowPopup}>
</TouchableWithoutFeedback>
<BottomPopup
title="Demo Popup"
ref ={(target) => popupRef =target}/>
onTouchOutside={onClosePopup}
</SafeAreaView>
);
}
};
You need to use the render function which is responsible for rendering or display the JSX element into your app.
render() {
return (
<SafeAreaView style={styles.container}>
<TouchableWithoutFeedback
onPress={onShowPopup}></TouchableWithoutFeedback>
<BottomPopup title="Demo Popup" ref={target => (popupRef = target)} />
onTouchOutside={onClosePopup}
</SafeAreaView>
);
}
i have broken my head trying to understand a problem with my code. I'm new with React Native so there may be a standard behavior that i am unaware of. This is my problem:
In my component i have a useEffect() to load my data like "componentDidMount":
useEffect( () => {
async function loadDadosLista(){
let listaRecebida = await getListaByID(route.params.idLista);
setLista(listaRecebida);
};
loadDadosLista();
}, []);
My function works correctly, the function getListaById accesses my realm.db and return my object lista. After that I can access the data and associate it with components of type TextInput. My real problem is that any change the i do in any component using properties of lista, overwrites all data leaving only the one that has been modified. I'm using spread operator but apparently it doesn't work. Below is my complete code for better understanding.
function ListConfig(){
const [lista, setLista] = useState({});
useEffect( () => {
async function loadDadosLista(){
let listaRecebida = await getListaByID(route.params.idLista);
setLista(listaRecebida);
};
loadDadosLista();
}, []);
return(
<View style={styles.container}>
<View style={[styles.containerLinha, styles.linha2]}>
<View style={styles.inputLocal}>
<TextInput
name='estabelecimento'
placeholder='Venda do seu Francisco'
placeholderTextColor={theme.colors.cinzaPrimario}
style={styles.textInputLocal(theme)}
value={lista.estabelecimento}
maxLength={25}
onChangeText={ (value) => {
setLista({
...lista,
estabelecimento: value
})
}}
textAlignVertical='bottom'
/>
<IconLocation width={20} height={24} />
</View>
</View>
<View style={styles.containerNotif}>
<Text style={styles.textoNotif(theme)}>
Me notifique 20 minutos antes
</Text>
<ToggleSwitch
isOn={lista.notificacaoAtiva}
onColor={theme.colors.cinzaSecundario}
offColor={theme.colors.cinzaSecundario}
thumbOnStyle={{
backgroundColor: theme.colors.destaque
}}
size="medium"
onToggle={(isOn) => {
setLista({
...lista,
notificacaoAtiva: isOn
});
}}
/>
</View>
</View>
);
}
export default ListConfig;
My object lista have this properties:
{
estabelecimento: 'nameOfEstabelecimento',
notificacaoAtiva: true
}
I am Developing sample react-native Application, in that application i am using react-native-maps. It's Working fine maps showing current Location, But ,I have Custom latitude Longitude,now I want to navigate to that particular location when i click a Button.
Here This is My Code:
<MapView
ref='map'
style={styles.map}
region={this.state.mapRegion}
showsUserLocation={true}
followUserLocation={true}
zoomEnabled={true}
pitchEnabled={true}
showsCompass={true}
showsBuildings={true}
showsTraffic={true}
showsIndoors={true}
onRegionChange={this.onRegionChange.bind(this)}
onPress={this.onMapPress.bind(this)}>
{this.state.markers.length != 0 || this.state.markers != undefined ?(
this.state.markers.map(marker => (
<MapView.Marker
coordinate={{
latitude: marker.Latitude||this.state.lastLat||region.latitude,
longitude:marker.Longitude||this.state.lastLong||region.longitude
}}
image = {
marker.EmergencyService == true ?(
require('./Imgs/emergencyService.png')):
(require('./Imgs/regularService.png'))
}
onCalloutPress={() => this.bookDoctorsAppointment(marker)}
>
<MyCustomMarkerView marker={marker} navigator={this.props.navigator}/>
</MapView.Marker>
)
)):(<View></View>)}
</MapView>
It seems there are a bunch of methods available, I try animateToRegion below:
https://github.com/airbnb/react-native-maps/blob/master/docs/mapview.md#methods
So try using that ref:
class MyComp extends Component {
setMap = () => {
if (this.map) {
console.log('keys on this.map:', Object.keys(this.map));
this.map.animateToRegion(...);
}
}
getRefMap = el => this.map = el; // this also triggers when <MapView unmounts but el will be `null` so you can test if (el) { alert('mounted') } else { alert('unmounted') }
render() {
return (
<View>
<Text onPress={this.setMap}>Set map!</Text>
<MapView ref={this.getRefMap} ...>;
</View>
)
}
}
I am trying to send an image source and title to a custom-made stateless component in React Native, as props. (imageSource and Title)
the props.imageSource line is causing an error, any help appreciated. Here is the code in question:
const MainPageButton = (props) => {
var imageSource = require({props.imageSource});
return (
<TouchableOpacity>
<Image source={imageSource} />
<Text>{props.title}</Text>
</TouchableOpacity>
)
}
You should use object destructuring instead:
const MainPageButton = ({imageSource, title}) => {
var imageSource = require(imageSource);
return (
<TouchableOpacity>
<Image source={imageSource} />
<Text>{title}</Text>
</TouchableOpacity>
)
}
replace
var imageSource = require({props.imageSource});
with
var imageSource = require(props.imageSource);
props.imageSource will give you string which is enough for you to use