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
Related
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>
)
);
Feel like this is kind of a silly question but I need to only return the allNotes map data if allNotes isn't empty (its an array). This seems like just a simple if/else but really can't figure out how to do this in this context (inside view). Right now, I get the error in the title when nothing is in the array. when it has data everything is fine.
{isOpen &&
<TouchableOpacity onPress={() => updateDrop(prev => !prev)} style={styles.flastListUpdated}>
<View style={{ alignItems: 'center' }}>
<Text style={styles.flastlistItemText2}>{props.noteitem.note}</Text>
</View>
<View style={{ height: 1, width: '100%', backgroundColor: 'lightgrey' }} />
<View>
{allNotes.map((item) => {
return (
<View style={{ flexDirection: 'row', margin: 5 }}>
<View style={styles.perItemBar} />
<Text style={styles.noteTextStyle}>{item}</Text>
</View>
)
})}
<View style={styles.bottomBar}>
<TextInput onChangeText={(text) => { updateNoteStatus(text) }} style={{ flex: 2 }} placeholder='Enter New:' />
<TouchableOpacity onPress={addNote} style={{ flex: 1 }}>
<Text style={{ fontSize: 30 }}>+</Text>
</TouchableOpacity>
</View>
</View>
</TouchableOpacity>
}
</View>
)
}
Again I Know this is something really simple but I can't get the formatting correct. Don't know what the correct method of doing this would be. Thanks!
Could always double check that allNotes is defined like this although it may be better to default allNotes to an empty array and then confirm here that it's what you'd expect.
{isOpen &&
<TouchableOpacity onPress={() => updateDrop(prev => !prev)} style={styles.flastListUpdated}>
<View style={{ alignItems: 'center' }}>
<Text style={styles.flastlistItemText2}>{props.noteitem.note}</Text>
</View>
<View style={{ height: 1, width: '100%', backgroundColor: 'lightgrey' }} />
<View>
{allNotes && allNotes.map(item => (
<View style={{ flexDirection: 'row', margin: 5 }}>
<View style={styles.perItemBar} />
<Text style={styles.noteTextStyle}>{item}</Text>
</View>
)
)}
<View style={styles.bottomBar}>
<TextInput onChangeText={(text) => { updateNoteStatus(text) }} style={{ flex: 2 }} placeholder='Enter New:' />
<TouchableOpacity onPress={addNote} style={{ flex: 1 }}>
<Text style={{ fontSize: 30 }}>+</Text>
</TouchableOpacity>
</View>
</View>
</TouchableOpacity>
}
</View>
)
}
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>
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 have a problem with KeyboardAvoidingView where my container seems to be overlapping my header when I clicked the text input like this
and I'm using header from react native elements
here is my code
<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
<Header
left={<IconWrapper
image={<Image source={img.icons.menu} style={{ width: normalize(26), resizeMode: 'contain', paddingHorizontal: normalize(5), marginHorizontal: normalize(5) }} />}
onPress={() => Actions.drawerOpen()} />}
title={'Activity Log'}
right={<View style={{ width: normalize(30) }} />}
/>
<View style={styles.innerContainer}>
<Text style={styles.dialogText}>{`Log my activity at ${time} as...`}</Text>
<View style={{marginVertical: 10}}>
{columns}
</View>
<TextInput
placeholder={"Additional Notes"}
/>
</View>
</KeyboardAvoidingView>
const styles = StyleSheet.create({
container: {
flex:1,
justifyContent: 'center'
},
innerContainer: {
justifyContent: 'center',
alignItems: 'center'
},
})