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'm creating a react native app i have a item - a plus button(shown in image)
I want this to the bottom of my page onto footer -
but the problem is that when i place this button on bottom with position: 'absolute', bottom: 0 it's only going to the bottom of the hero section & not to the footer
Code -
<View style={styles.main}>
<View style={styles.hero}>
<View style={styles.flex}>
<View style={styles.container}>
</View>
</View>
<View style={styles.flex2}>
</TouchableOpacity>
</View>
<View style={styles.container12}>
</View>
</View>
</View>
<TouchableOpacity>
<View style={styles.container33}>
<EntypoIcon name="plus" style={styles.icon28}></EntypoIcon>
</View>
</TouchableOpacity>
Main Styles -
main: {
width: '100%',
height: '100%',
},
hero: {
alignSelf: 'stretch',
height: 250,
backgroundColor: '#fff',
borderBottomLeftRadius: 50,
borderBottomRightRadius: 50,
},
container33: {
width: 50,
height: 50,
backgroundColor: '#1DA6FA',
// flex: 1,
borderRadius: 50,
position: 'absolute',
bottom: 0,
right: 10,
alignItems: 'center',
justifyContent: 'center'
},
The problem si that you are applying the absolute css position to the View inside the TouchableOpacity and not to the TouchableOpacity itself.
To achieve what you want to do, you should write something like:
<View style={styles.absoluteOpacity}>
<TouchableOpacity>
<View style={styles.container33}>
<EntypoIcon name="plus" style={styles.icon28}></EntypoIcon>
</View>
</TouchableOpacity>
</View>
And then the css:
container33: {
width: 50,
height: 50,
backgroundColor: '#1DA6FA',
// flex: 1,
borderRadius: 50,
right: 10,
alignItems: 'center',
justifyContent: 'center'
},
absoluteOpacity: {
position: 'absolute',
bottom: 0,
}
I am new in react native and I please need help. When the keyboard appears , the whole view is pushed upwards.I do not want that to happen.I saw other answers but none of them is working for me.I do not want the view to be pushed up when the keyboard appears and want to remain where they are.I am using expo and has given the code below with the images.
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Image, StyleSheet, View, TextInput, Text, TouchableOpacity, ScrollView, KeyboardAvoidingView } from 'react-native';
export default function LoginScreen({ navigation }) {
return (
<View style={styles.container}>
<Image style={styles.logo} source={
{
uri: "https://i.ibb.co/4JK4T3P/deale-logo.jpg",
}} />
<StatusBar style="auto" />
<View style={styles.inputContainer} >
<TextInput
style={styles.loginInput}
placeholder='Phone Number or Email'
/>
<TextInput
style={styles.passwordInput}
placeholder='Password'
/>
<TouchableOpacity
style={{
width: 280,
height: 50,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgb(255, 77, 77)',
elevation: 5,
borderRadius: 10,
top: 35
}}
activeOpacity={0.8}>
<Text
style={{
color: 'white',
fontSize: 15,
fontWeight: 'bold',
}} >
LOG IN
</Text>
</TouchableOpacity>
<Text
onPress={() => console.log('g')}
style={{
position: 'relative',
top: '23%',
fontWeight: 'bold',
}} >
OR LOGIN WITH SOCIAL MEDIA ACCOUNT?
</Text>
<View style={{
flex: 1,
flexDirection: 'row',
bottom: 30,
justifyContent: 'space-evenly',
top: '22%',
width: 300
}} >
<TouchableOpacity activeOpacity={0.5} >
<Image source={
{ uri: 'https://cdn3.iconfinder.com/data/icons/popular-services-brands/512/facebook-512.png' }}
style={{
width: 60,
height: 60,
}} />
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.5} >
<Image source={
{ uri: 'https://lh3.googleusercontent.com/COxitqgJr1sJnIDe8-jiKhxDx1FrYbtRHKJ9z_hELisAlapwE9LUPh6fcXIfb5vwpbMl4xl9H9TRFPc5NOO8Sb3VSgIBrfRYvW6cUA' }}
style={{
width: 60,
height: 60,
}} />
</TouchableOpacity>
</View>
</View >
<View style={styles.loginButtonView} >
<TouchableOpacity
onPress={
() => navigation.navigate('Create')
}
style={{
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgb(145, 157, 230)',
top: 10,
elevation: 5,
borderRadius: 5
}}
activeOpacity={0.8}>
<Text
style={{ color: 'white', fontSize: 15, fontWeight: 'bold' }} >
CREATE ACCOUNT
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
justifyContent: 'center',
alignItems: 'center',
top: '40%'
}}
activeOpacity={0.1}>
<Text
style={{
color: 'black',
fontSize: 16,
top: 5
}} >
FORGOT PASSWORD
</Text>
</TouchableOpacity>
</View>
</View >
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
logo: {
position: 'absolute',
height: 100,
width: 150,
resizeMode: "contain",
top: '3 %'
},
loginInput: {
position: 'relative',
height: 50,
borderColor: 'black',
backgroundColor: 'rgb(240, 240, 242)',
borderRadius: 10,
width: 280,
color: 'black',
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
borderColor: 'white',
},
inputContainer: {
position: 'absolute',
top: '18%',
alignItems: 'center',
},
passwordInput: {
position: 'relative',
height: 50,
borderColor: 'black',
backgroundColor: 'rgb(240, 240, 242)',
borderRadius: 10,
width: 280,
color: 'black',
textAlign: 'center',
justifyContent: 'center',
alignItems: 'center',
borderColor: 'white',
top: 10
},
loginButtonView: {
position: 'absolute',
height: 46,
width: '70%',
top: '80%'
}
});
I figured out the reason myself.It was happening because i had set my positions based on percentage and the popping of keyboard changed the dimensions resulting in the change of position.
Try to use the component KeyboardAvoidingView like this:
<KeyboardAvoidingView behavior={'height'} enabled style={styles.container}>
<Image style={styles.logo} source={
{
uri: "https://i.ibb.co/4JK4T3P/deale-logo.jpg",
}} />
<StatusBar style="auto" />
<View style={styles.inputContainer} >
<TextInput
style={styles.loginInput}
placeholder='Phone Number or Email'
/>
<TextInput
style={styles.passwordInput}
placeholder='Password'
/>
<TouchableOpacity
style={{
width: 280,
height: 50,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgb(255, 77, 77)',
elevation: 5,
borderRadius: 10,
top: 35
}}
activeOpacity={0.8}>
<Text
style={{
color: 'white',
fontSize: 15,
fontWeight: 'bold',
}} >
LOG IN
</Text>
</TouchableOpacity>
<Text
onPress={() => console.log('g')}
style={{
position: 'relative',
top: '23%',
fontWeight: 'bold',
}} >
OR LOGIN WITH SOCIAL MEDIA ACCOUNT?
</Text>
<View style={{
flex: 1,
flexDirection: 'row',
bottom: 30,
justifyContent: 'space-evenly',
top: '22%',
width: 300
}} >
<TouchableOpacity activeOpacity={0.5} >
<Image source={
{ uri: 'https://cdn3.iconfinder.com/data/icons/popular-services-brands/512/facebook-512.png' }}
style={{
width: 60,
height: 60,
}} />
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.5} >
<Image source={
{ uri: 'https://lh3.googleusercontent.com/COxitqgJr1sJnIDe8-jiKhxDx1FrYbtRHKJ9z_hELisAlapwE9LUPh6fcXIfb5vwpbMl4xl9H9TRFPc5NOO8Sb3VSgIBrfRYvW6cUA' }}
style={{
width: 60,
height: 60,
}} />
</TouchableOpacity>
</View>
</View >
<View style={styles.loginButtonView} >
<TouchableOpacity
onPress={
() => navigation.navigate('Create')
}
style={{
width: '100%',
height: '100%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'rgb(145, 157, 230)',
top: 10,
elevation: 5,
borderRadius: 5
}}
activeOpacity={0.8}>
<Text
style={{ color: 'white', fontSize: 15, fontWeight: 'bold' }} >
CREATE ACCOUNT
</Text>
</TouchableOpacity>
<TouchableOpacity
style={{
justifyContent: 'center',
alignItems: 'center',
top: '40%'
}}
activeOpacity={0.1}>
<Text
style={{
color: 'black',
fontSize: 16,
top: 5
}} >
FORGOT PASSWORD
</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView >
Try to use different values in the position prop.
If you want less job, you can use the react-native-keyboard-aware-scroll-view. It's a very good lib to work with Keyboard in different layouts.
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 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