I have created this button and I am trying to achieve something like this:
Here's my approach so far:
<TouchableOpacity disabled={disabled} style={{position:'absolute', bottom:5, right:10}}
onPress={()=>navigation.navigate('FilterByIngreds')}>
<View style={floatStyle}>
<Image style={{ width:40, height: 44, justifyContent:'center', alignItems:'center'}}
source= {require('../../assets/img/05_items/ingIcon.png')}/>
</View>
<View style={{width:16, height:16, borderWidth:2, borderColor:'#fff',
borderRadius:8, backgroundColor:'rgba(65, 204, 151, 1)',
position:'absolute', top:2, right:5, zIndex:5}}/>
</TouchableOpacity>
But the DOT is behind the Button.
Any help will be appreciated. Thanks in advance!
You need to remove < View style={floatstyle} > and try this code
< TouchableOpacity
disabled={true}
style={{ position: "absolute", bottom: 5, right: 10 }}
onPress={() => navigation.navigate("FilterByIngreds")}
>
<Image
style={{
width: 100,
height: 100,
justifyContent: "center",
borderRadius: 100 / 2,
backgroundColor: "#000",
alignItems: "center"
}}
/>
<View
style={{
width: 16,
height: 16,
borderWidth: 2,
borderColor: "#f0f",
borderRadius: 8,
backgroundColor: "rgba(65, 204, 151, 1)",
position: "absolute",
top: 5,
right: 10,
zIndex: 5
}}
/>
</TouchableOpacity>
Related
My code is the following
My touchable opacity that does the d.onSelect is not being responsive, it only responds to the upper top half around the border, but nothing happens when I press on a players component from the bottom half. can any one explain or help
<>
<TouchableOpacity
onPress={
props.disabled === true
? () => null
: d.onSelect
}
style={{
backgroundColor: 'red'
}}
>
<LinearGradient
colors={[Colors.Player1, Colors.Player2]}
style={{
borderRadius: 10,
margin: 10,
paddingHorizontal: 3,
paddingVertical: 10,
justifyContent: 'center',
alignItems: 'center',
borderColor: Colors.Player1,
borderWidth: 3,
backgroundColor: Colors.NewBlue
}}
>
<ImageBackground
source={require('../assets/frame2.png')}
style={{
height: 40,
width: 40,
justifyContent: 'center',
alignItems: 'center',
overflow: 'hidden'
}}
>
<Image
source={{ uri: d.image }}
style={{
height: '75%',
width: '75%'
}}
resizeMode='contain'
/>
</ImageBackground>
<Text
style={{
textAlign: 'center',
color: '#fff',
textShadowColor:
'rgba(0, 0, 0, 0.75)',
textShadowOffset: {
width: 1,
height: 1
},
textShadowRadius: 1,
fontSize: 9,
fontFamily: 'Montserrat_semi_bold'
}}
>
{d.name && d.name.split(' ', 1)}
</Text>
</LinearGradient>
</TouchableOpacity>
</>
which results in the image
Without knowing all the context or having an expo snack, I'd say you need to ensure you have flex:1 set on the TouchableOpacity component. In addition, assure that the rest of your images fit within that flex:1
If you look at other examples, you can see them reacting immediately.
But my code reacts slowly.
If you watch the video, you can see what I mean.(https://youtu.be/jo_iDDh2WBw)
Please tell me a solution to this.
Below is my code.
<SafeAreaView style={{...structure.safeViewContainer, backgroundColor: "#ffffff"}}>
<View style={{...structure.container}}>
<BlurView intensity={100} style={{...structure.headerBox}}>
<Header arrow={false} navigation={navigation} />
</BlurView>
<ScrollView style={{...structure.contentContainer, overflow: 'visible', backgroundColor: colors.lightGray}}>
<View style={structure.contentBox}>
<View style={{ right: 0, left: 0, backgroundColor: "#000000", height: 300, borderRadius: 20 }}></View>
<View style={{ right: 0, left: 0, backgroundColor: "#ffffff", height: 300, marginTop: 30, borderRadius: 20 }}></View>
<View style={{ right: 0, left: 0, backgroundColor: "#ffffff", height: 300, marginTop: 30, borderRadius: 20 }}></View>
<View style={{ right: 0, left: 0, backgroundColor: "#ffffff", height: 300, marginTop: 30, marginBottom: 55, borderRadius: 20 }}></View>
</View>
</ScrollView>
<View style={{ backgroundColor: colors.lightGray, right: 0, left: 0, height: 20, bottom: -20, position: "absolute" }}></View>
</View>
<TabBar navigation={navigation} />
</SafeAreaView>
<View
style={{
borderRadius: 130 / 2,
borderColor: '#000',
backgroundColor: '#f89',
height: 130,
width: 130,
}}>
<Image
source={{uri: 'https://i.imgur.com/G34Qbpv.jpg'}}
style={{
height: 130,
width: 130,
borderRadius: 130 / 2,
zIndex: 0,
}}
/>
<View
style={{
justifyContent: 'center',
alignItems: 'center',
top: 90,
backgroundColor: '#0f0',
zIndex: 1,
}}>
<Icon
name="camera"
size={30} />
</View>
</View>
I want to show Camera Icon on this Image:
I want to show camera Icon on pics for Uploading a new image like this Image:, how can I do this show camera for uploading another pic.
Try this
You forgot specifying the position
<View
style={{
justifyContent: 'center',
alignItems: 'center',
top: 90,
right : 0,
position : 'absolute',
backgroundColor: '#0f0',
zIndex: 1,
}}>
<Icon
name="camera"
enter code heresize={30} />
</View>
I am trying to create a circular cutout in React Native, something similar to the image below where the light grey is transparent.
I can successfully duplicate this design using absolute positioning and fixed background colours but am unsure of how I would go about making the cutout around the image at the top transparent?
I actually found a method of doing this using only styling, the trick was to use the inside of a curved border to create the circular cutout.
Snack
<View style={styles.container}>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View
style={{
height: 20,
width: 80,
borderTopLeftRadius: 30,
backgroundColor: 'black',
}}
/>
<View style={{ width: 40 }} />
<View
style={{
position: 'absolute',
bottom: -10,
left: 70,
width: 30,
height: 30,
borderBottomWidth: 10,
borderLeftWidth: 10,
borderColor: 'black',
borderBottomLeftRadius: 45,
}}
/>
<View
style={{
position: 'absolute',
right: 85,
top: -15,
borderRadius: 100,
height: 30,
width: 30,
backgroundColor: 'blue',
}}
/>
<View
style={{
position: 'absolute',
bottom: -10,
right: 70,
width: 30,
height: 30,
borderBottomWidth: 10,
borderRightWidth: 10,
borderColor: 'black',
borderBottomRightRadius: 45,
}}
/>
<View
style={{
height: 20,
width: 80,
borderTopRightRadius: 30,
backgroundColor: 'black',
}}
/>
</View>
<View
style={{
height: 180,
width: 200,
borderBottomLeftRadius: 30,
borderBottomRightRadius: 30,
backgroundColor: 'black',
}}
/>
</View>
You can set position:"absolute" to image view, and set its position accordingly.
Try this,
<View
style={{
height:400,
justifyContent: 'center',
marginTop: 100,
}}>
<View
style={{
backgroundColor: 'grey',
height: 80,
width: 80,
alignSelf: 'center',
borderRadius: 40,
borderColor: '#FFFFFF',
borderWidth: 10,
position: 'absolute',
top: -40,
zIndex: 1,
alignItems:"center",
justifyContent:"center"
}}
>
<Text>Image</Text></View>
<View
style={{
height: 400,
margin: 20,
backgroundColor: 'grey',
borderRadius: 40,
}}
></View>
</View>
see working expo example here
You can create the top left and top right sides of the box then put an image cutout in the middle in the shape of the semicircle for the circle to fit in.
<View style={styles.container}>
<View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
<View style={{backgroundColor: 'grey', width: 125, height: 45, borderTopLeftRadius: 45}}></View>
<View style={{backgroundColor: 'grey', width: 125, height: 45, borderTopRightRadius: 45}}></View>
</View>
<View style={{backgroundColor: 'grey', height: 300, width:308, borderBottomLeftRadius: 45, borderBottomRightRadius: 45}}></View>
<View style={{position: 'absolute', alignSelf: 'center', top: 145}}>
<ImageBackground
style={{width: 60, height: 50}}
source={{uri: "https://i.imgur.com/ncjPX1k.png"}}>
<View style={{backgroundColor: 'grey',width:50, height: 50, borderRadius: 27.5, top: -30, alignSelf: 'center'}}></View>
</ImageBackground>
</View>
</View>
See the snack (styling is a bit off):
I want to achieve this below thing. Putting text between two lines. But I am failing to do so far.
.
So far what I achieved is look like this
My code is
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<View
style={{
width: Dimensions.get('screen').width / 2 - 20,
height: 3,
borderStyle: 'solid',
backgroundColor: 'black',
marginBottom: 15,
marginTop: 8,
left: 0,
}}
/>
<Text
style={[
{
fontSize: 18,
padding: 5,
marginBottom: 10,
color: 'black',
},
global.fontNormal,
]}>
{'or'}
</Text>
<View
style={{
width: Dimensions.get('screen').width / 2 - 20,
height: 3,
borderStyle: 'solid',
backgroundColor: 'black',
marginBottom: 15,
marginTop: 8,
right: 0,
}}
/>
</View>
Is there a better way to achieve that?
Suggest me how to achieve that?
Thanks,
Need to add alignItems:'center'
As when you make the flex direction row then the alignitems property aline the content vertically and justifycontents aline items horizontally
<View style={{ flexDirection: 'row', justifyContent: 'space-between', flex:1 , alignItems:'center'}}>
Sample code: https://snack.expo.io/#msbot01/center-line