I have image background with "3 level circle shape" (see image)
I would like to set text "hello" into center of circles. Looks like its almost imposible for all devices.
How can I do it?
Mu current code is:
return (
<ImageBackground source={background} resizeMode="cover" style={{ width: '100%', height: '100%' }}>
</ImageBackground>
I tried to use absolute position, but it is bronek on second device. Is there any trick?
Original image size (in asset folder) is 1080x2400
Thank you.
Why not create the circles manually? That way centering can be taken care of automatically. Example (you'll have to tweak values/add circles):
<View style={{ flex: 1, backgroundColor: '#F9F3EE' }}>
<View
style={{
backgroundColor: '#F6EFF2',
top: -100,
width: 700,
height: 700,
left: -(700 - Dimensions.get('window').width) / 2,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 350,
}}
>
<View
style={{
backgroundColor: '#ECE4DD',
width: 500,
height: 500,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 250,
}}
>
<View
style={{
backgroundColor: '#E2D7D0',
width: 300,
height: 300,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 150,
}}
>
<Text>Hi</Text>
</View>
</View>
</View>
</View>
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
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>
I have visited so many websites and read many articles but couldn't find any solution. I want a ui in which each row contains two images. I have done this by adding view tag in every new row but i want to do in in a single View tag. Kindly help
<View style={{ marginTop: 10 }}>
<View style={{ flexDirection: 'row', justifyContent: "space-between" }}>
<View style={{ flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 5, alignSelf: 'flex-start' }}>
<Image
resizeMode="stretch"
source={require('../assets/images/Home/zinger_ratha.jpg')}
style={{ width: width / 2.2, height: width / 2, resizeMode: 'stretch', }} />
<Text style={{ fontSize: 18 }}>Zinger Ratha</Text>
</View>
<View style={{ flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 5, alignSelf: 'flex-start' }}>
<Image
source={require('../assets/images/Home/arabian_delight.png')}
style={{ width: width / 2.2, height: width / 2, resizeMode: 'stretch' }} />
<Text style={{ fontSize: 18 }}>Arabian Delight</Text>
</View>
</View>
<View style={{ flexDirection: 'row', justifyContent: "space-between" }}>
<View style={{ flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 5, alignSelf: 'flex-start' }}>
<Image
resizeMode="stretch"
source={require('../assets/images/Home/mingle_bucket.jpg')}
style={{ width: width / 2.2, height: width / 2, resizeMode: 'stretch', }} />
<Text style={{ fontSize: 18 }}>Mingle Bucket</Text>
</View>
<View style={{ flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 5, alignSelf: 'flex-start' }}>
<Image
source={require('../assets/images/Home/xtreme_box.jpeg')}
style={{ width: width / 2.2, height: width / 2, resizeMode: 'stretch' }} />
<Text style={{ fontSize: 18 }}>Xtreme Box</Text>
</View>
</View>
</View>
I want like this but in single View tag
You can do the following:
import Dimensions from react-native,
The idea here is to give the View a width of whatever percentage of the phone screen size and then give the image a percentage of the View that would give you what you want.
For example, if I want to display three images in a row, I can give my View a width of 90% and flexWrap: wrap, and give each image inside it a width of 30% so it can only contain 3 images in a row.
You can do the following for your case.
import { Dimensions } from 'react-native';
const { width, height } = Dimensions.get('screen');
// inside your render or return
<View style={{ width: width * 0.9, display: "flex", flexDirection: "row", flexWrap: "wrap", alignContent: "center", alignItems: "center", justifyContent: "center" }}>
<Image source={require("img.png")}style={{ width: "45%", height: 200 }} />
<Image source={require("img.png")}style={{ width: "45%", height: 200 }} />
<Image source={require("img.png")}style={{ width: "45%", height: 200 }} />
<Image source={require("img.png")}style={{ width: "45%", height: 200 }} />
</View>
or if you need to put it in a flatlist you can do something like this:
numColumns={2} // you need to specify the number of columns here
<FlatList
style={styles.dashboard}
data={this.categories}
renderItem={this.renderItem}
keyExtractor={item => item.id}
numColumns={2}
/>
<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 new in react native and i want a view like attached image. I have no idea that how can achieved this..?
I have tried this:
app.js
<View style={styles.navSectionStyle}>
<TouchableOpacity
style={styles.SubmitButtonStyle}
activeOpacity = { .5 }
onPress={ this.ButtonClickCheckFunction }>
<Text style={styles.TextStyle}> Page 1 </Text>
</TouchableOpacity>
<View style={styles.BackStyle}>
<Text style={styles.TextStyle}> Test</Text>
</View>
</View>
style.js
SubmitButtonStyle: {
width:'70%',
height: 80 ,
justifyContent: 'center',
alignItems: 'center',
paddingTop:15,
paddingBottom:15,
backgroundColor:'#fff',
borderRadius:10,
borderWidth: 2,
borderColor: '#fff'
},
BackStyle:{
marginTop:10,
marginLeft:15,
position: 'absolute',
width: 30,
borderRadius:10,
borderWidth: 1,
borderColor: '#F53BBB',
backgroundColor: '#F53BBB',
justifyContent: 'center',
alignItems: 'center',
shadowColor: '#000000',
shadowOffset: {
width: 2,
height: 3
},
shadowRadius: 4,
shadowOpacity: 1.0
},
TextStyle:{
justifyContent: 'center',
alignItems: 'center'
}
Here's a basic template for the View
Get the Width of the screens using Dimensions api.
Mark the views as position: absolute and get position them according to the screen width.
15 % from both sides, 10% for overlapping view and 60% for the main view
render() {
return (
<View style={{flex: 1,
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'red'}}>
<View style={{width: Dimensions.get('window').width * 0.6,
height: 100,
backgroundColor: 'blue'}}/>
<View style={{position: 'absolute',
width: Dimensions.get('window').width * 0.1,
height: 80,
backgroundColor: 'black',
left: Dimensions.get('window').width * 0.15,
zIndex: 1}} />
<View style={{position: 'absolute',
width: Dimensions.get('window').width * 0.1,
height: 80,
backgroundColor: 'black',
right: Dimensions.get('window').width * 0.15,
zIndex: 1}} />
</View>
)
}