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>
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
(React native )
Here is my code for one screen(DetailsScreen) and I want to make other screen(IngredientScreen) with same output how to do that. when I tried to copy the same code in IngredientScreen I am getting some error. what kinds of modification do I need in DetailsScreen and what kinds of code need to be added in IngredientScreen. page need to be navigate from DetailsScreen to IngredientScreen. (react native )
Codes are here :-
import React from "react";
import { SafeAreaView, StyleSheet, View, Text, Image } from "react-native";
import { ScrollView, TouchableOpacity } from "react-native-gesture-handler";
import Icon from "react-native-vector-icons/MaterialIcons";
import COLORS from "../../consts/colors";
import foods from "../../consts/foods";
import { SecondaryButton } from "../components/Button";
const DetailsScreen = ({ navigation, route }) => {
const item = route.params;
return (
<SafeAreaView style={{ backgroundColor: COLORS.white }}>
<View style={style.header}>
<Icon name="arrow-back-ios" size={28} onPress={navigation.goBack} />
<Text style={{ fontSize: 20, fontWeight: "bold" }}>Details</Text>
</View>
<ScrollView showsVerticalScrollIndicator={false}>
<View
style={{
justifyContent: "center",
alignItems: "center",
height: 280,
}}
>
<Image source={item.image} style={{ height: 220, width: 220 }} />
</View>
<View style={style.details}>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
}}
>
<Text
style={{ fontSize: 25, fontWeight: "bold", color: COLORS.white }}
>
{item.name}
</Text>
</View>
<Text style={style.detailsText}>{item.details}</Text>
<View style={{ marginTop: 40, marginBottom: 40, color: "red" }}>
<TouchableOpacity
onPress={() => navigation.navigate("IngredientScreen")}
>
<SecondaryButton title="Ingredients..." />
</TouchableOpacity>
</View>
</View>
</ScrollView>
</SafeAreaView>
);
};
const style = StyleSheet.create({
header: {
paddingVertical: 20,
flexDirection: "row",
alignItems: "center",
marginHorizontal: 20,
},
details: {
paddingHorizontal: 20,
paddingTop: 40,
paddingBottom: 60,
backgroundColor: COLORS.primary,
borderTopRightRadius: 40,
borderTopLeftRadius: 40,
},
iconContainer: {
backgroundColor: COLORS.white,
height: 50,
width: 50,
justifyContent: "center",
alignItems: "center",
borderRadius: 30,
},
detailsText: {
marginTop: 10,
lineHeight: 22,
fontSize: 16,
color: COLORS.white,
},
});
export default DetailsScreen;
You could create a new component and then import it in both screens. For example:
const DetailScreen = () => {
return <ReusableComponent />
}
const Ingredientcreen = () => {
return <ReusableComponent />
}
export const ReusableComponent = () => {
return (
<SafeAreaView style={{ backgroundColor: COLORS.white }}>
<View style={style.header}>
<Icon name="arrow-back-ios" size={28} onPress={navigation.goBack} />
<Text style={{ fontSize: 20, fontWeight: "bold" }}>Details</Text>
</View>
<ScrollView showsVerticalScrollIndicator={false}>
<View
style={{
justifyContent: "center",
alignItems: "center",
height: 280,
}}
>
<Image source={item.image} style={{ height: 220, width: 220 }} />
</View>
<View style={style.details}>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
}}
>
<Text
style={{ fontSize: 25, fontWeight: "bold", color: COLORS.white }}
>
{item.name}
</Text>
</View>
<Text style={style.detailsText}>{item.details}</Text>
<View style={{ marginTop: 40, marginBottom: 40, color: "red" }}>
<TouchableOpacity
onPress={() => navigation.navigate("IngredientScreen")}
>
<SecondaryButton title="Ingredients..." />
</TouchableOpacity>
</View>
</View>
</ScrollView>
</SafeAreaView>
);
}
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>
)
);
Iam creating a react native project in which am displaying multiple views in a row and after certain width, it needs to go to next line ! But its not going, how to do that ?
Actual Output:
word1 word-word2 word-word-word3 word-word-word4
Expected Outpu:
word1 word-word2 word-word-word3
word-word-word4
This is my code:
<View style={{ flexDirection :'row', marginHorizontal: 10, paddingTop: 7,
paddingBottom: 7, width: 150 }}>
<View style={{ paddingRight: 10 } }>
<Text style={{ fontSize: 12 }}>word1</Text>
</View>
<View style={{ paddingRight: 10 }}>
<Text style={{ fontSize: 12 }}>word-word2</Text>
</View>
<View style={{ paddingRight: 10 } }>
<Text style={{ fontSize: 12 }}>word-word-word3</Text>
</View>
<View style={{ paddingRight: 10 } }>
<Text style={{ fontSize: 12 }}>word-word-word4</Text>
</View>
</View>
This is my expo "Check this"
Please suggest !
Give parent View of Text components flexWrap:"wrap" style:
<View
style={{
flexDirection: 'row',
marginHorizontal: 10,
paddingTop: 7,
paddingBottom: 7,
width: Constants.width * 0.3,
flexWrap: 'wrap'
}}>
Full Example:
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default function App() {
return (
<View style={styles.container}>
<View style={{ backgroundColor: '#eff3f8' }}>
<View
style={{
flexDirection: 'row',
marginHorizontal: 10,
paddingTop: 7,
paddingBottom: 7,
width: Constants.width * 0.3,
flexWrap: 'wrap'
}}>
<View style={{ paddingRight: 10 }}>
<Text style={{ fontSize: 12 }}>word1</Text>
</View>
<View style={{ paddingRight: 10 }}>
<Text style={{ fontSize: 12 }}>word-word2</Text>
</View>
<View style={{ paddingRight: 10 }}>
<Text style={{ fontSize: 12 }}>word-word-word3</Text>
</View>
<View style={{ paddingRight: 10 }}>
<Text style={{ fontSize: 12 }}>word-word-word4</Text>
</View>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
Working App : Expo Snack
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>