I want to create a UI like the picture below.
How can I implement it? Anyone have an idea for this. Pls help me.
Thanks
Yes.. you can design that arrow with position: 'absolute' css property.
try to implement below code!
<View style={{ marginTop: 10, marginHorizontal: 15 }}>
<View style={{ position: 'relative' }}>
<View style={{ borderWidth: 1, padding: 5, backgroundColor: '#e5f8ff', borderColor: '#007299' }}>
<Text>Top Note</Text>
</View>
<View style={{ position: 'absolute', top: 9, left: -5 }}>
<View style={{ borderBottomWidth: 1, borderLeftWidth: 1 ,backgroundColor: '#e5f8ff', borderColor: '#007299', width: 10, height: 10, transform: [{ rotate: '45deg'}] }}>
</View>
</View>
</View>
</View>
check this image
Here is a working Demo
As also #pds answer suggest you need to make the arrow component as absolute to position it over the message body.
Using CSS triangle and absolute positioning you can get the working demo.
Here are some libraries which will help you to achieve your whole UI :
triangle : https://github.com/Jpoliachik/react-native-triangle
timeline-listview : https://github.com/thegamenicorus/react-native-timeline-listview
timeline-theme : https://github.com/tomzaku/react-native-timeline-theme
Related
I am having issues formatting my X-axis using react-native svg-charts. The top of the labels are being cut off and I am unsure if they are aligning correctly with the barchart elements. I have used content inset to try and align them manually and I am using the rotation style to make the labels fit better on screen (not overlapping).
The relevant code is below:
const verticalContentInset = { bottom: 5, top: 30 }
<View style={{ flexDirection: 'column', flex: 1, width: '100%', paddingBottom: 5 }}>
<View style={{ flexDirection: 'row', height: 300, padding: 20}}>
<YAxis
data={volumeData}
style={{ marginBottom: 30 }}
contentInset={verticalContentInset}
svg={YaxesSvg}
numberOfTicks={10}
formatLabel={(value) => `${value}%`}
/>
<BarChart style={{ flex: 1 }} data={newData} yAccessor={({item}) => item.y} contentInset={{ top: 30, bottom: 30 }}>
<Grid />
</BarChart>
</View>
<View style={{ height: 150 }}>
<XAxis
data={mineralName}
style={{ height: 150}}
contentInset={{ left: 20, right: 40}}
scale={scale.scaleBand}
svg={{ fontSize: 10, rotation: 40, fill: 'black', originY: 35 }}
formatLabel={(value, index) => '----' + mineralName[index] }
/>
</View>
</View>
Screenshot of the code above when it is rendered:
As you can see some of the X-axis values are being cut off from the top and I have experimented with many values and cannot seem to find the sweet-spot where labels are rendering correctly. I would like to add more to the labels but firstly need the formatting to be fixed. The Y-axis is also hacked into place using content inset. Any help is greatly appreciated as I have trawled through the resources offered by the github repo and more. Thanks a mil!
I also suffered with this issue.
I added a y-transform to the svg props of the XAxis component and it sorted it for me.
<XAxis
svg={{
translateY: 5,
...
}}
...
/>
Try adding that and see how you go.
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.
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.
I have used borderRadius in Image and loop it. It works in some images however others are rectangular. If I touch it then it shows the radius and disappears as soon as it is untouched. Using overflow hidden doesn't do the trick as well.
I'm confused I used the same style but the result is different. I've tested it on Android devices only.
https://snack.expo.io/#codebyte99/multiplearrays
code:
<TouchableOpacity activeOpacity={0.8}>
<ImageBackground
source={{
uri: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcREX0q18KDbtN-obe1EFxAwNg27xgR_KItZ7U8MkXnH7zBCEr_ASQ",
}}
style={[
{
width: 200,
height: 80,
resizeMode: "center",
justifyContent: "flex-end",
alignItems: "center",
margin: 5,
marginRight: 0,
marginTop: 0,
marginBottom: 5,
borderRadius: 6,
overflow: "hidden",
},
]}
>
<Text>{childItem.title}</Text>
</ImageBackground>
</TouchableOpacity>;
You have to set the borderRadius to Image, not in style:
<Image source={{...}} borderRadius={6} .../>
And you don't set overflow: 'hidden' in image style, but in the View:
<View style={{ ..., overflow: 'hidden' }}>
<Image ..../>
</View>
Wrap the Image in a View with overflow: "hidden" and apply borderRadius to that, e.g.
<View
style={{
width: 30,
height: 30,
borderRadius: 15,
overflow: "hidden",
}}
>
<Image
style={{ width: 30, height: 30}}
source={{ uri }}
></Image>
</View>
(I could not find a way to get borderRadius to work on the image directly on Android.)
Applying the same fixed height and width to the image and borderRadius as half of the (height/width) will solve the border issue for android in react-native. Note: Make sure you have resizeMode as 'cover'
<Image key={index} source={{ 'uri' }} resizeMode='cover' style={{ height: 40, width: 40, borderRadius: 20 }} />
This code work different on iOS and Android - And I don`t understand why?
I try to make autocomplete, and list of suggestion render inside header component - but should be over header+Content
<View style={{flex: 1}}>
<View style={{
height: 50,
backgroundColor: 'red',
left: 0,
position: 'absolute',
right: 0,
top: 0,
zIndex: 1
}}>
<Text>Header</Text>
<View style={{
backgroundColor: '#3F9',
left: 50,
position: 'absolute',
height: 100,
right: 50,
top: 25,
zIndex: 1
}}><Text>Should overlay Content</Text></View>
</View>
<View style={{flex: 1, backgroundColor: 'yellow'}} >
<Text>Content</Text>
</View>
It's better to stay away from "zIndex" since it won't work as expected in Android. instead use the order of the elements along with position:'absolute' . it'll work fine.
reference - How to overlap in react-native
I think I found what happens.
As I read on Facebook documentation
The overflow style property defaults to hidden and cannot be changed on Android