<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>
Related
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>
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
I am trying to set the background image to whole screen area including the notch. This is the default on iPhone but I am not able to achieve it on Android Phone. The Android phone I am using is Samsung Galaxy A-01 and the iPhone is iPhone XS. Attached are the screenshots.
Android Screenshot (Not fine)
iPhone Screenshot (I want to achieve this on Android as well)
UPDATE 1:
Following is the code:
render() {
const { roomId, nickName } = this.state;
return (
<>
<StatusBar barStyle='light-content' translucent />
<ImageBackground
source={require('../../../assets/images/backgroundImage.png')}
style={{ flex: 1, justifyContent: 'center', height: '100%' }}
resizeMode='cover'>
<KeyboardAvoidingView
style={{ flexGrow: 1 }}
enabled
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
<View
style={{
flex: 1,
justifyContent: 'flex-end',
alignItems: 'center',
paddingHorizontal: 16,
paddingVertical: 1,
flexDirection: 'column',
height: '100%',
}}>
<Image
source={require('../../../assets/images/logo.png')}
style={{ marginBottom: 50 }}
resizeMode='contain'
/>
<SafeAreaView
style={{
height: '50%',
justifyContent: 'flex-end',
width: '100%',
}}>
<View
style={{
width: '100%',
justifyContent: 'flex-end',
marginBottom: 10,
}}>
<TextInput
ref={this.classIdRef}
style={{
width: '100%',
backgroundColor: '#fff',
height: 50,
borderRadius: 4,
marginBottom: 15,
paddingHorizontal: 15,
}}
placeholderTextColor='rgb(218, 218, 218)'
placeholder='Class ID'
value={roomId}
onChangeText={(text) => this.setRoomId({ roomId: text })}
/>
<TextInput
ref={this.nicknameRef}
style={{
width: '100%',
backgroundColor: '#fff',
height: 50,
borderRadius: 4,
marginBottom: 20,
paddingHorizontal: 15,
}}
placeholder='Nickname'
placeholderTextColor='rgb(218, 218, 218)'
value={nickName}
onChangeText={(text) =>
this.setNickName({ nickName: text })
}
/>
<TouchableOpacity
onPress={this.navigateToClassroomHandler}
style={{
backgroundColor: 'rgb(251, 158, 85)',
width: '100%',
height: 50,
justifyContent: 'center',
alignItems: 'center',
borderRadius: 4,
}}
disabled={roomId === '' || nickName === ''}>
<Text
style={{
fontSize: 18,
color: '#fff',
fontWeight: 'bold',
}}>
Attend Class
</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</View>
</KeyboardAvoidingView>
</ImageBackground>
</>
);
}
I want user profile pic in half on modal and half on outside of modal
i have tried this
height: PROFILE_DIAMETER,
width: PROFILE_DIAMETER,
borderRadius: PROFILE_DIAMETER / 2,
marginLeft: 20,
top: -20,
flex: 0,
resizeMode: 'cover',
overflow: 'hidden',
transform: [{translateY: translateImageY()}, {scale: imgScale()}, {translateX: translateImageX()}]
}}
want to achieve this design functionality to react-native
<Image style={{width: '100%', zIndex: -1}} source={require('../assets/capa.png')} />
<View style={{
width: '90%',
backgroundColor: 'white',
alignSelf: 'center',
borderRadius: 10,
paddingBottom: 20
}}>
<View style={{
marginTop: -100
}}>
<Avatar
rounded
size='xlarge'
containerStyle={{ alignSelf: "center", marginTop: 20 }}
overlayContainerStyle={{
borderWidth: 1,
borderColor: '#00a9cf',
backgroundColor: 'white'
}}
source={{
uri:
'https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg',
}}
/>
<Text style={{ color: '#383941', fontSize: 22, alignSelf: "center", fontFamily: 'PTSans-Bold' }}>{this.state.name}</Text>
<Text style={{ color: '#79787b', fontSize: 15, alignSelf: "center", fontFamily: 'PTSans-Italic' }}>{this.state.profession}</Text>
</View>
</View>
Observe the image with zindex -1 and the view containing the avatar with the negative marginTop
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>