We Keep Coding

Segmented Control In Header

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 - How to get same output in two different pages in react-native with same code?

(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>
);
}

react native : there is way to place text like my example?

i need to place some text like the example below:
{item.Sampling_Request_ID} {item.Facility_Name}
{item.Sampling_Due_Date} {item.Water_Source_Name}
i try to fix the place as the example but its not works for me and i must know the way to achieve it.
in my example u can see the text that should be like my needs.
this is my way that try do that :
function renderItem({ item, index }) {
let name = '';
if (item.Facility_Name) {
name = item.Consumer_Name;
} else {
name = item.Consumer_Name;
}
return (
<TouchableOpacity
style={{
flex: 1,
paddingVertical: 15,
paddingHorizontal: 10,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
borderWidth: 1,
borderColor: 'white',
backgroundColor: index % 2 == 0 ? '#dde6eb' : '#d1f0da',
}}
onPress={() => selectItem(data)}
>
<View
style={{
flex: 1,
alignItems: 'flex-start',
}}
>
<Text style={styles.lightText}>
{item.Facility_Name}
</Text>
</View>
<View
style={{
alignItems: 'flex-end',
}}
>
<Text style={styles.lightText}>{item.Sampling_Request_ID}</Text>
</View>
<View
style={{
flex: 1,
}}
>
<Text style={styles.lightText}>{item.Water_Source_Name}</Text>
</View>
<View
style={{
flex: 1,
}}
>
<Text style={styles.lightText}>{item.Sampling_Due_Date}</Text>
</View>
</TouchableOpacity>
);
}

Try out in the following way. I hope it works.
<TouchableOpacity
style={{flex: 1}}
onPress={onPress}
>
<View style = {{ width: '100%' }}>
<View style = {{ flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
<Text>{item.Sampling_Request_ID}</Text>
<Text>{item.Facility_Name}</Text>
</View>
<View style = {{ flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
<Text>{item.Sampling_Due_Date}< </Text>
<Text>{item.Water_Source_Name}</Text>
</View>
</View>
</TouchableOpacity>

Try with this
<TouchableOpacity
style={{
flex: 1,
paddingVertical: 15,
paddingHorizontal: 10,
// flexDirection: 'row',
// justifyContent: 'space-between',
alignItems: 'center',
borderWidth: 1,
borderColor: 'white',
backgroundColor: index % 2 == 0 ? '#dde6eb' : '#d1f0da',
}}
onPress={() => selectItem(data)}
>
<View
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between'
}}
>
<Text style={styles.lightText}>
{item.Sampling_Request_ID}
</Text>
<Text style={styles.lightText}>{item.Facility_Name}</Text>
</View>
<View
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between'
}}
>
<Text style={styles.lightText}>
{item.Sampling_Due_Date}
</Text>
<Text style={styles.lightText}>{item.Water_Source_Name}</Text>
</View>
</TouchableOpacity>

You can group Sampling_Request_ID & Facility_Name in one parent View that has a frexDirection set to row then group Sampling_Due_Date & Water_Source_Name in their View too. The following code should work as you described
function renderItem({ item, index }) {
let name = "";
if (item.Facility_Name) {
name = item.Consumer_Name;
} else {
name = item.Consumer_Name;
}
return (
<TouchableOpacity
style={{
flex: 1,
paddingVertical: 15,
paddingHorizontal: 10,
//flexDirection: 'row',
justifyContent: "space-between",
alignItems: "center",
borderWidth: 1,
borderColor: "white",
backgroundColor: index % 2 == 0 ? "#dde6eb" : "#d1f0da",
}}
onPress={() => selectItem(data)}
>
<View
style={{
flex: 1,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
}}
>
<View
style={{
}}
>
<Text style={styles.lightText}>{item.Sampling_Request_ID}</Text>
</View>
<View
style={{
flex: 1,
}}
>
<Text style={styles.lightText}>{item.Facility_Name}</Text>
</View>
</View>
<View
style={{
flex: 1,
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
}}
>
<View
style={{
flex: 1,
}}
>
<Text style={styles.lightText}>{item.Sampling_Due_Date}</Text>
</View>
<View
style={{
flex: 1,
}}
>
<Text style={styles.lightText}>{item.Water_Source_Name}</Text>
</View>
</View>
</TouchableOpacity>
);
}

React native blocking the top part of the button makers un clickable

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>

Layout and render a View in a MapView component - React native

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>