The upload Button on cover the top part not clickable
this is the design
The Button with upload cover is a problem I think the cover is blocking the button because it happen to on other screen but I just use zIndex and it works fine. I try even position "absolute" and nothing happen. renderBg is just a function that display the current profile cover of the user
enter code here
<Container>
<Content style={{ zIndex: 1, backgroundColor: Colors.grey }}>
{
renderBG()
}
<View style={{ height: height * 0.2 }}>
<Header>
<TouchableOpacity
style={{ alignItems: 'center', flex: 1 }}
onPress={() => setPrivacy()}
>
<View>
<Icon
type="Ionicons"
name={account_details && account_details.isPrivate ? 'ios-eye-off' : 'ios-eye'}
size={28}
style={{
color: account_details && account_details.isPrivate ? '#d5d5d5' : Colors.green,
elevation: 5,
borderRadius: 20,
}}
/>
</View>
</TouchableOpacity>
<View style={{ flex: 5, alignItems: 'center' }}>
<Text style={{ color: '#d5d5d5', marginLeft: -60 }}>
{getTitle()}
</Text>
</View>
{/* {
profiles.length > 1
? (
<Button
small
icon
color={Colors.red}
style={{ alignItems: 'center', flex: 1 }}
onPress={() => setConfirmDelete(true)}
>
<Icon
name="ios-trash"
size={28}
style={{ color: '#d5d5d5' }}
/>
</Button>
)
: <View style={{ flex: 1 }} />
} */}
</Header>
</View>
<View
style={{
backgroundColor: '#fff',
height: verticalScale(156),
width,
alignItems: 'center',
zIndex: 4,
}}
>
<View style={{
zIndex: 4,
marginTop: -verticalScale(20),
marginLeft: width * 0.64,
flexDirection: 'row',
justifyContent: 'flex-end',
}}
>
<Button small icon withShadow onPress={uploadCover}>
<FeatherIcon name="upload" />
</Button>
</View>
<View>
{
avatarDisplay()
}
<View style={{
zIndex: 4,
// marginTop: -verticalScale(72),
marginTop: -verticalScale(42),
flexDirection: 'column',
left: 50,
}}
>
<Button small icon withShadow onPress={uploadAvatar}>
<FeatherIcon name="upload" />
</Button>
{
// account_details.field_avatar === undefined
// && account_details.field_avatar === ''
// ? <View style={{ height: 34 }} />
// : (
// <Button small icon color={Colors.red} withShadow onPress={removeAvatar}>
// <Icon type="FontAwesome" name="trash" />
// </Button>
// )
}
</View>
</View>
Related
im trying to add a segmented tab to my header let me show you an example before i start.
if you've been on the twitter app you know you can swipe through these tabs while these tabs remain on the header, i cant quite find out how i would complete this tho
Some of the code:
<Stack.Screen name="Find" component={Home} options={{
header: () => (
<View style={{ backgroundColor: 'black', paddingBottom: 10 }}>
<View style={{ paddingLeft: 10, flexDirection: 'row', paddingTop: 25, backgroundColor: 'black' }}>
<View style={{}}>
<View style={{ paddingRight: 10, flexDirection: 'row', alignItems: 'center' }}>
<View>
<Image style={{ width: 30, height: 30, borderRadius: 30 }} source={require('../assets/forever.png'} />
</View>
<View style={{ width: '84%', paddingHorizontal: 10 }}>
<Formik
initialValues={{ formData: "" }}
onSubmit={async (values, { setSubmitting }) => {
setSubmitting(true)
await setData({
values
})
console.log(sdata)
setSubmitting(false)
}}
>
{({ handleChange, handleBlur, handleSubmit, values }) => (
<>
<View
style={{
backgroundColor: '#0D0D0D',
padding: 10,
borderRadius: 18,
flexDirection: 'row',
height: 34
}}
>
<View style={{ alignItems: 'center' }}>
<Icon name="search" type="ionicon" size={15} color="grey" />
</View>
<TextInput
autoCorrect={false}
clearButtonMode="always"
placeholderTextColor="grey"
onChangeText={handleChange('formData.form')}
value={values.formData.form}
onBlur={handleBlur('formData')}
placeholder="Search"
style={{ backgroundColor: '#0D0D0D', paddingHorizontal: 20 }}
/>
</View>
</>
)}
</Formik>
</View>
<View style={{ flexDirection: 'row' }}>
<Icon onPress={() => create.current.show()} type="ionicon" size={28} color="white" name="create-outline" />
</View>
</View>
</View>
</View>
<ScrollableTabView style={{}} renderTabBar={() =>
<DefaultTabBar
style={{
borderWidth: 0,
}}
/>
} tabBarUnderlineStyle={{ backgroundColor: "#fff", borderWidth: 1}} tabBarTextStyle={{ color: "#fff" }} tabBarBackgroundColor="#000">
<View tabLabel="Home">
</View>
<Quotes tabLabel="Quotes" />
<View tabLabel="Posts" >
</View>
<View tabLabel="Home" >
</View>
</ScrollableTabView>
</View>
),
}} />
If you need anymore information, just comment and thanks in addvanced
im trying to check if my cart is empty or not , if its not empty then it returns this view and it s working well :
and if it is empty it should return a text that has "empty is cart" but its not working :
here is my code :
{
this.state.dataCart.map((item, i) => {
if (this.state.dataCart.length != 0) {
return (
<View style={{ flex: 1, }} key={i}>
<View style={{ width: width - 20, margin: 10, backgroundColor: 'transparent', flexDirection: 'row', borderBottomWidth: 2, borderColor: "#cccccc", paddingBottom: 10 }}>
<Image resizeMode={"contain"} style={{ width: width / 3, height: width / 3 }} source={require("../assets/Tacos-M.png")} />
<View style={{ flex: 1, backgroundColor: 'transparent', padding: 10, justifyContent: "space-between" }}>
<View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Text style={{ fontWeight: "bold", fontSize: 20 }}>Tacos {item.Viande}</Text>
<TouchableOpacity onPress={() => this.removeItem(i)}>
<Ionicons name="close-sharp" size={30} color={'#D05A0B'} />
</TouchableOpacity>
</View>
<Text>Sauce:{item.Sauce}</Text>
<Text>Taille:{item.taille}</Text>
<Text>Extra:{item.Extra}</Text>
<Text>Boissons:{item.Boisson}</Text>
<Text>Supplements:{item.Supplements}</Text>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Text style={{ fontWeight: 'bold', fontSize: 20 }}>{item.Price * item.Quantity} DT</Text>
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<TouchableOpacity onPress={() => this.onChangeQual(i, false)}>
<Ionicons name="remove-circle" size={30} color={'#D05A0B'} />
</TouchableOpacity>
<Text style={{ paddingHorizontal: 8, fontWeight: 'bold' }}>{item.Quantity}</Text>
<TouchableOpacity onPress={() => this.onChangeQual(i, true)}>
<Ionicons name="add-circle" size={30} color={'#D05A0B'} />
</TouchableOpacity>
</View>
</View>
</View>
</View>
</View>
)
} else {
return (
<View style={{ flex: 1, }}>
<Text>Cart is empty !</Text>
</View>
)
}
})
}
here is my log console :
is there any solution ?
If-else statements do not work inside JSX. So, use ternary operator instead.
this.state.dataCart.map((item, i) =>
this.state.dataCart.length != 0 ? (
<View style={{ flex: 1 }} key={i}>
<View
style={{
width: width - 20,
margin: 10,
backgroundColor: "transparent",
flexDirection: "row",
borderBottomWidth: 2,
borderColor: "#cccccc",
paddingBottom: 10,
}}
>
<Image
resizeMode={"contain"}
style={{ width: width / 3, height: width / 3 }}
source={require("../assets/Tacos-M.png")}
/>
<View
style={{
flex: 1,
backgroundColor: "transparent",
padding: 10,
justifyContent: "space-between",
}}
>
<View>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
}}
>
<Text style={{ fontWeight: "bold", fontSize: 20 }}>
Tacos {item.Viande}
</Text>
<TouchableOpacity onPress={() => this.removeItem(i)}>
<Ionicons name="close-sharp" size={30} color={"#D05A0B"} />
</TouchableOpacity>
</View>
<Text>Sauce:{item.Sauce}</Text>
<Text>Taille:{item.taille}</Text>
<Text>Extra:{item.Extra}</Text>
<Text>Boissons:{item.Boisson}</Text>
<Text>Supplements:{item.Supplements}</Text>
</View>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
}}
>
<Text style={{ fontWeight: "bold", fontSize: 20 }}>
{item.Price * item.Quantity} DT
</Text>
<View style={{ flexDirection: "row", alignItems: "center" }}>
<TouchableOpacity onPress={() => this.onChangeQual(i, false)}>
<Ionicons name="remove-circle" size={30} color={"#D05A0B"} />
</TouchableOpacity>
<Text style={{ paddingHorizontal: 8, fontWeight: "bold" }}>
{item.Quantity}
</Text>
<TouchableOpacity onPress={() => this.onChangeQual(i, true)}>
<Ionicons name="add-circle" size={30} color={"#D05A0B"} />
</TouchableOpacity>
</View>
</View>
</View>
</View>
</View>
) : (
<View style={{ flex: 1 }}>
<Text>Cart is empty !</Text>
</View>
)
);
react native : what is the way to fix issue that the keyboard is above the text box and it is not possible to see what is being written ?
in my example TextInput is hide behind the keyboard and I have no idea how to prevent it.
i try also the example from here :
example
and its also not work for me .
what can be the problem ?
function E_BitsuaDigdum() {
const [selectedValue3, setSelectedValue3] = useState('1');
const [value2, onChangeText] = React.useState('');
return (
<View
style={{
flex: 1,
backgroundColor: '#cbced4',
}}
>
<View
style={{
flexDirection: 'column',
paddingTop: 20,
}}
>
<Text style={styles.label}>ebitua</Text>
<View
style={{
width: 200,
borderWidth: 2,
borderRadius: 5,
backgroundColor: 'white',
left: 15,
}}
>
<Picker
mode="dropdown"
selectedValue={selectedValue3}
style={{
placeholderTextColor: 'black',
height: 50,
width: 200,
right: -10,
transform: [{ scaleY: 1.2 }, { scaleX: 1.2 }],
}}
onValueChange={(itemValue, itemIndex) =>
setSelectedValue3(itemValue)
}
>
<Picker.Item label="close" value="1" />
<Picker.Item label="no sig" value="2" />
<Picker.Item label="error" value="3" />
</Picker>
</View>
</View>
<View
style={{
top: 20,
alignSelf: 'center',
backgroundColor: '#275d9f',
height: 50,
width: 400,
borderRadius: 5,
borderColor: 'black',
borderWidth: 2,
}}
>
<Text style={styles.Notice}>notifi</Text>
</View>
<KeyboardAvoidingView
behaviour="position"
style={styles.container}
enabled
>
<TextInput
style={{
top: 20,
alignSelf: 'center',
height: 200,
width: 400,
backgroundColor: 'white',
borderWidth: 2,
borderRadius: 5,
fontSize: 18,
}}
placeholder="put here"
onChangeText={(text) => onChangeText(text)}
value={value2}
/>
</KeyboardAvoidingView>
<View style={styles.AreasPrototypesBottomView}>
<View style={styles.BottleView}>
<TouchableOpacity
onPress={() => {
navigation.navigate('ways', { item });
}}
>
<Image
source={require('../assets/bottle.png')}
style={{ height: 40, width: 40 }}
/>
</TouchableOpacity>
</View>
<View style={styles.NoteView}>
<TouchableOpacity
onPress={() => {
navigation.navigate('all');
}}
>
<Image
source={require('../assets/note2.png')}
style={{ height: 35, width: 35 }}
/>
</TouchableOpacity>
</View>
<View style={styles.SendView}>
<TouchableOpacity
onPress={() => {
navigation.navigate('');
}}
>
<Image
source={require('../assets/send.png')}
style={{ height: 45, width: 45 }}
/>
</TouchableOpacity>
</View>
</View>
</View>
);
}
Use react-native KeyBoardAvoidingView instead of your parent main View.
Like this in your code:
return (
<KeyBoardAvoidingView
style={{
flex: 1,
backgroundColor: '#cbced4',
}}
>
Im fairly new to React native. I have created a MapView component on my screen and am trying to add a map key that indicates what each marker color is. I was able to achieve this only to find out that the layout bugs out when I leave and return to that screen
Example
This is what i'm trying to achieve
This is what I keep getting
This is my code
<SafeAreaView style={{ flex: 1, backgroundColor: '#376772' }}>
<View style={{ flex: 0.6 }}>
<MapView
style={{ flex: 1 }}
showsMyLocationButton={true}
showsUserLocation={true}
followsUserLocation={lock}
onTouchStart={() => {
set(false)
}}
onPress={(loc) => {
setLocation(loc.nativeEvent.coordinate)
}}
>
{/* Map key view begins here */}
<View
style={{
alignSelf: 'center',
alignContent: 'center',
backgroundColor: '#202B35',
padding: 10,
paddingHorizontal: 35,
margin: 5,
borderRadius: 5,
alignItems: 'center',
}}
>
<View style={{ flexDirection: 'row' }}>
<Badge
status="error"
containerStyle={{ padding: 5 }}
/>
<Text
style={{
color: '#fff',
fontSize: 16,
marginBottom: 5,
}}
>
New Crossing
</Text>
</View>
<View style={{ flexDirection: 'row' }}>
<Badge
status="primary"
containerStyle={{ padding: 5 }}
/>
<Text style={{ color: '#fff', fontSize: 16 }}>
{'Existing Crossings'}
</Text>
</View>
</View>
<Marker coordinate={location} />
</MapView>
</View>
Any help would be very appreciative. please let me know if I am missing any vital information on this post.
I found out that I must wrap my map key View in a <Fragment/> Component outside of the <MapView> component. I also had to style it with position:"absolute"
Heres My code
<View style={{ flex: 0.6 }}>
<MapView
style={{ flex: 1 }}
showsMyLocationButton={true}
showsUserLocation={true}
followsUserLocation={lock}
onTouchStart={() => {
set(false)
}}
onPress={(loc) => {
setLocation(loc.nativeEvent.coordinate)
}}
>
<Marker coordinate={location} />
</MapView>
<Fragment>
<View
style={{
alignSelf: 'center',
alignContent: 'center',
backgroundColor: '#202B35',
padding: 10,
paddingHorizontal: 35,
margin: 5,
borderRadius: 5,
alignItems: 'center',
position: 'absolute',
}}
>
<View style={{ flexDirection: 'row' }}>
<Badge
status="error"
containerStyle={{ padding: 5 }}
/>
<Text
style={{
color: '#fff',
fontSize: 16,
marginBottom: 5,
}}
>
New Crossing
</Text>
</View>
<View style={{ flexDirection: 'row' }}>
<Badge
status="primary"
containerStyle={{ padding: 5 }}
/>
<Text style={{ color: '#fff', fontSize: 16 }}>
{'Existing Crossings'}
</Text>
</View>
</View>
</Fragment>
</View>
I am successfully getting data from API and also am able to pass the object as props in the next component, my code for passing object is:
if (stateItems.length > 0) {
console.log(stateItems[0]);
if (stateItems[i + 1]) {
items.push(
<Grid key={i}>
<Product key={stateItems[i].product_id} product={stateItems[i]} />
<Product key={stateItems[i + 1].product_id} product={stateItems[i + 1]} isRight />
</Grid>
);
}
}
In the receiving end when i console log this.props.product I can see my data:
but when I try to render the data I get an empty screen, my code for rendering the data is:
render() {
console.log(this.props.product)
return (
<Col style={this.props.isRight ? style.leftMargin : style.rightMargin}>
<Card transparent>
<CardItem cardBody>
<Button transparent style={style.button} onPress={() => this.pressed()}>
<Image source={{ uri: this.props.product.image }} style={style.image} />
<View style={style.border} />
</Button>
</CardItem>
<CardItem style={{ paddingTop: 0 }}>
<Button style={{ flex: 1, paddingLeft: 0, paddingRight: 0, paddingBottom: 0, paddingTop: 0 }}
transparent
onPress={() => this.pressed()}
>
<Body>
<Text
style={{ fontSize: 16 }}
numberOfLines={1}
>{this.props.product.name}</Text>
<View style={{ flex: 1, width: '100%', alignItems: 'center' }}>
<View style={style.line} />
<Text style={style.price}>{this.props.product.price}</Text>
<View style={style.line} />
</View>
</Body>
</Button>
</CardItem>
</Card>
</Col>
);}
As per you show this.props.product look like its array of object.
You need to use map for iterate array and display product.
this.props.product.map((singleProduct, index) => {
return (
<Col style={this.props.isRight ? style.leftMargin : style.rightMargin}>
<Card transparent>
<CardItem cardBody>
<Button transparent style={style.button} onPress={() => this.pressed()}>
<Image source={{ uri: singleProduct.image }} style={style.image} />
<View style={style.border} />
</Button>
</CardItem>
<CardItem style={{ paddingTop: 0 }}>
<Button style={{ flex: 1, paddingLeft: 0, paddingRight: 0, paddingBottom: 0, paddingTop: 0 }}
transparent
onPress={() => this.pressed()}
>
<Body>
<Text
style={{ fontSize: 16 }}
numberOfLines={1}
>{singleProduct.name}</Text>
<View style={{ flex: 1, width: '100%', alignItems: 'center' }}>
<View style={style.line} />
<Text style={style.price}>{singleProduct.price}</Text>
<View style={style.line} />
</View>
</Body>
</Button>
</CardItem>
</Card>
);
})