Not able to find MarkerView in MapBox - react-native

I'm not able to find markerview in MapBox in this github library
https://github.com/react-native-mapbox-gl/maps, So can anyone help me please?
Or else I'm using PointAnnotation in it like this,
<MapboxGL.MapView style={{ flex: 1 }}>
<MapboxGL.Camera centerCoordinate={[22.470701, 70.057732]} zoomLevel={14} >
</MapboxGL.Camera>
<MapboxGL.PointAnnotation
id="foo1"
coordinate={[22.470701, 70.057732]}
title={'Hello'}>
<View style={{ flexWrap: 'wrap', backgroundColor: 'blue' }}>
<Image source={require('./chat.png')} style={styles.tinyLogo} />
<Text style={{ color: 'white', margin: 10 }}>$50.00</Text>
</View>
<MapboxGL.Callout style={{ borderRadius: 20, width: 150, height: 120 }}>
<View style={{ width: '100%', height: '100%', backgroundColor: 'white' }}>
<Text style={{ marginHorizontal: 10, marginTop: 10 }}>123, Main st,</Text>
<Text style={{ marginHorizontal: 10, marginBottom: 10 }}>Chicago, IL 6061</Text>
<TouchableOpacity style={{ backgroundColor: 'orange', margin: 10, alignItems: 'center' }}>
<Text style={{ margin: 10, color: 'white' }}>Select Shop</Text>
</TouchableOpacity>
</View>
</MapboxGL.Callout>
</MapboxGL.PointAnnotation>
</MapboxGL.MapView>
But that image is not showing, so can anyone help me with what should i do?
Thanks in advance.

An example of MarkerView usage is available here
The MarkerView documentation is available here
From this documentation
If you have static view consider using PointAnnotation or SymbolLayer they'll offer much better performance
So if you are in this case, it seems that you're doing good.

Related

Children overflow when using space-between inside container with flexWrap (React-Native)

Just noticed a very weird behavior when using flexWrap on React-Native and wanted some help to understand if there's any explanation for that.
In summary:
I have a horizontal container that uses flexWrap, with two vertical child containers that will have two squares inside each. The squares have different heights. If I use space-between in the vertical child containers with flexWrap in the horizontal container, the children will overflow. If I remove flexWrap, things work correctly.
This problem doesn't happen on react-native-web, but happens on Android and iOS.
Expo with code: https://snack.expo.dev/fHKKvLlew
Without flexWrap (expected behavior, works correctly)
<View style={{ backgroundColor: 'purple', flexDirection: 'row' }}>
<View style={{ borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}>
<View style={{ backgroundColor: 'red', height: 100, width: 100 }} />
<View style={{ backgroundColor: 'green', height: 100, width: 100 }} />
</View>
<View style={{ borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}>
<View style={{ backgroundColor: 'blue', height: 150, width: 100 }} />
<View style={{ backgroundColor: 'yellow', height: 150, width: 100 }} />
</View>
</View>
With flexWrap (unexpected behavior)
<View style={{ backgroundColor: 'purple', flexDirection: 'row', flexWrap: 'wrap' }}>
<View style={{ borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}>
<View style={{ backgroundColor: 'red', height: 100, width: 100 }} />
<View style={{ backgroundColor: 'green', height: 100, width: 100 }} />
</View>
<View style={{ borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}>
<View style={{ backgroundColor: 'blue', height: 150, width: 100 }} />
<View style={{ backgroundColor: 'yellow', height: 150, width: 100 }} />
</View>
</View>
Anyone knows why the result is not the same when using flexWrap, given that there's still a lot of space available? And why children overflows?
Seems to be a bug (specially because it works fine on web). If so, any idea of a workaround that could result on similar results?
I test the code using codesandbox and I am not able to replicate the problem:
Perhaps there is sometime else causing the problem.
EDIT:
As mentioned, this behavior happens just for react native mobile, not for react native web, one way to get around this is by adding:
alignItems: 'flex-start'
As described in this this post:
Due to performance tweaks flexWrap: wrap no longer works together with alignItems: 'stretch' (the default). If you use flexWrap: wrap you probably will want to add the alignItems: 'flex-start' style as well.
So to replicate your configuration you may try:
<View style={{ alignItems: "flex-start", backgroundColor: 'purple', flexDirection: 'row', flexWrap: 'wrap' }}>
<View style={{ alignSelf: "stretch", borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}>
<View style={{ backgroundColor: 'red', height: 100, width: 100 }} />
<View style={{ backgroundColor: 'green', height: 100, width: 100 }} />
</View>
<View style={{ borderWidth: 1, borderColor: 'white', justifyContent: 'space-between' }}>
<View style={{ backgroundColor: 'blue', height: 150, width: 100 }} />
<View style={{ backgroundColor: 'yellow', height: 150, width: 100 }} />
</View>
</View>

Hi i am new to React Native, Using Native-base I am trying to design Card View

enter image description here][2][![I am facing problem here inside the Card, able to see description part i am trying to implement its coming below the image actually it suppose to come beside the image
`
<ListItem>
<Card
style={{
marginTop: 0,
marginBottom: 0,
marginRight: 0,
marginLeft: 0,
borderTopLeftRadius: 8,
borderTopRightRadius: 8,
flexDirection: 'row',
}}>
<View style={{flex: 1}}>
<CardItem>
<Thumbnail
source={require('../../assets/images/restaurant_128.png')}
/>
</CardItem>
</View>
<View style={{flex: 3, flexDirection: 'column'}}>
<CardItem>
<Body>
<Text>{item.Title}</Text>
<Text style={{backgroundColor: 'green'}}>
{item.Description}
</Text>
</Body>
</CardItem>
</View
</Card>
</ListItem>
`
try this:-
<View style={{
flexDirection: "row",
justifyContent: "flex-start",
alignItems: "center",
backgroundColor: "#B8B2B2",
width: "100%",
height: 100
}}>
<View style={{
width: "30%",
backgroundColor: "red",
height: 100
}}>
<Text>left image here</Text>
</View>
<View style={{
width: "70%",
backgroundColor: "#B8B2B2",
height: 100
}}>
<View style={{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
backgroundColor: "#fff",
height: 50
}}>
<View style={{
width: "30%",
backgroundColor: "teal",
height: 50
}}>
<Text>lamb samosa</Text>
</View>
<View style={{
width: "30%",
backgroundColor: "teal",
height: 50
}}>
<Text>$4.5</Text>
</View>
</View>
<View style={{
width: "100%",
backgroundColor: "#B8B2B2",
height: 50
}}>
<Text>Lorem Ipsum</Text>
</View>
</View>
</View>

How to create html-like navigation dropdown menu in React Native?

Is there a way to create a dropdown navigation menu like in HTML with React Native where the dropdown part is positioned absolute on top of the content that's below the menu?
Without absolute positioning, the dropdown's parent element (image below, blue background) increases its height and the other content is below the dropdown.
When I use position absolute on the dropdown, it's above Item 1 and not below it because React Natives position absolute positions relative to the parent.
My Code:
<View style={{ flex: 1 }}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'baseline', backgroundColor: '#3763a4'}}>
<View style={{ backgroundColor: '#FF0000', flex: 1 }}>
<View style={{ padding: 10 }}>
<Text style={{ color: '#FFFFFF' }}>Item 1</Text>
</View>
<View style={{ padding: 10 }}>
<Text style={{ color: '#FFFFFF' }}>Item 1.1</Text>
<Text style={{ color: '#FFFFFF' }}>Item 1.2</Text>
</View>
</View>
<View style={{ padding: 10, backgroundColor: '#FF0000', flex: 1 }}><Text style={{ color: '#FFFFFF' }}>Item 2</Text></View>
<View style={{ padding: 10, backgroundColor: '#FF0000', flex: 1 }}><Text style={{ color: '#FFFFFF' }}>Item 3</Text></View>
</View>
<WebView
source={myHtml}
/>
</View>
How it looks like:
The Webview is below this. Instead, the dropdown should be positioned in top of the Webview.
How it looks like with position absolute:
I hope my explanation is clear enough. This image and link shows a HTML navigation menu: https://www.w3schools.com/howto/howto_css_dropdown_navbar.asp
Absolute position exists in RN: https://reactnative.dev/docs/layout-props#position, it works almost same as on CSS. Try and investigate!
I've found a solution. I had to wrap the absolute positioned View in another View and add zIndex: 1 to position it on top of the Webview.
Code:
<View style={{ flex: 1 }}>
<View style={{ zIndex: 1, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'baseline', backgroundColor: '#3763a4' }}>
<View style={{ backgroundColor: '#FF0000', flex: 1 }}>
<View style={{ padding: 10 }}>
<Text style={{ color: '#FFFFFF' }}>Item 1</Text>
</View>
<View>
<View style={{ backgroundColor: '#FF0000', padding: 10, position: 'absolute' }}>
<Text style={{ color: '#FFFFFF' }}>Item 1.1</Text>
<Text style={{ color: '#FFFFFF' }}>Item 1.2</Text>
</View>
</View>
</View>
<View style={{ padding: 10, backgroundColor: '#FF0000', flex: 1 }}><Text style={{ color: '#FFFFFF' }}>Item 2</Text></View>
<View style={{ padding: 10, backgroundColor: '#FF0000', flex: 1 }}><Text style={{ color: '#FFFFFF' }}>Item 3</Text></View>
</View>
<WebView
source={myHTML}
/>
</View>
Result:

How to marginBottom view background?

I want to cut a little bit background color to let the text half with it.
I try to use marginBottom, but the text position will move with it.
return (
<View style={{ flex: 1, backgroundColor: 'pink' }>
<View style={{ felx: 1, backgroundColor: 'blue', marginBottom: 40, justifyContent: 'flex-end' }}>
<Text style={{ fontSize: 86, color: 'white' }}>Half</Text>
</View>
</View>
);
Is any simple way can achieve it ?
Thanks.
My idea is a bit different. Try to insert another View & give position: 'absolute' to that view as below,
<View style={{ flex: 1, backgroundColor: 'pink' }}>
<View style={{ flex: 1, backgroundColor: 'blue', marginBottom: 40, justifyContent: 'flex-end' }}>
<View style={{ bottom: -43, position: 'absolute' }}>
<Text style={{ fontSize: 86, color: 'white' }}>Half</Text>
</View>
</View>
</View>
When you assign value to bottommake sure to gave half of the font size.
Hope this helps you. Feel free for doubts.

React Native - two items: one on the left, one in the center

I have been struggling to align two items in the following positions: the first one should be on the left side of the row and the second element needs to be in the center of the row.
The following code below does not fully center my second element:
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<View style={{ paddingLeft: 10 }}>
<Text style={{ fontSize: 20, color: 'red', fontWeight: '200' }}>LEFT_ELEM</Text>
</View>
<View style={{paddingRight: 10 }}>
<Text>
CENTER
</Text>
</View>
{/* Empty view so that space-between works? */}
<View
style={{paddingRight: 10 }}>
</View>
</View>
This was the closest I could get to the result I wanted. However, it does not do the trick. Could anyone know the best way to implement this successfully?
You need to add flex: 1 to parent View and children Views (all children will have flex: 1 if you want them all to be of equal size, otherwise define width/flex for each child View individually).
Try this:
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}>
<View style={{ flex: 1, paddingLeft: 10 }}>
<Text style={{ fontSize: 20, color: 'red', fontWeight: '200' }}>LEFT_ELEM</Text>
</View>
<View style={{ flex: 1, paddingRight: 10 }}>
<Text style={{ textAlign:'center' }}>CENTER</Text>
</View>
<View
style={{ flex: 1, paddingRight: 10 }}>
</View>
</View>
Added style={{ textAlign:'center' }} to Text in center View child to give you an idea of its centered position. You can modify/remove it.
When I learned Android, I was told not to use too many 'layers' of components. In that philosophy, I decided to use 'absolute' property to the left element to achieve a simpler result. In this scheme, the 'left' item is almost stick to the left wall.
<View
style={{
height: 50,
flexDirection: 'row', // a must
alignItems: 'center', // to make items center vertically.
justifyContent: 'center' // to make the second item center horizontally.
}}
>
<MaterialIcons
style={[styles.titleIcon, { position: 'absolute', left: 0 }]} // on left, still center vertically.
name='arrow-back'
onPress={() => {
navigation.goBack();
}}
/>
<Text style={styles.titleText}>{result.name}</Text> // on center automatically
</View>
<View style={{flex:1, flexDirection: 'row', justifyContent: 'space-around'}}>
<View style={{width: 50, height: 50}}>
<Text style={{ fontSize: 20, color: 'red', fontWeight: '200' }}>LEFT_ELEM</Text>
</View>
<View style={{ width: 50, height: 50}}>
<Text>CENTER</Text>
</View>
<View style={{ width: 50, height: 50}}/>
</View>