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

if condition doesnt return wanted results

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?

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',
}}
>

react native : what is the correct way so that the keyboard does not be on the text input?

I wanted to know please what is the correct way so that the keyboard does not be on the text input but is should be below it?
I created a text box but every time I try to write something then the keyboard covers my text box and I can not see what I am writing there.
I would be happy to help solve 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}>סיבת אי ביצוע:</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="מתקן סגור" value="1" />
<Picker.Item label="אין קליטה" value="2" />
<Picker.Item label="תקלה במכשיר" 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}>הערות אי ביצוע</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="כתוב כאן.."
onChangeText={(text) => onChangeText(text)}
value={value2}
/>
</KeyboardAvoidingView>
<View style={styles.AreasPrototypesBottomView}>
<View style={styles.BottleView}>
<TouchableOpacity
onPress={() => {
navigation.navigate('אופן הדיגום', { item });
}}
>
<Image
source={require('../assets/bottle.png')}
style={{ height: 40, width: 40 }}
/>
</TouchableOpacity>
</View>
<View style={styles.NoteView}>
<TouchableOpacity
onPress={() => {
navigation.navigate('פרטים כלליים');
}}
>
<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>
);
}

You can use KeyboardingAvoidingView for scrolling up the Keyboard
https://reactnative.dev/docs/keyboardavoidingview
Here's an example
import React from 'react';
import { View, KeyboardAvoidingView, TextInput, StyleSheet, Text, Platform, TouchableWithoutFeedback, Button, Keyboard } from 'react-native';
const KeyboardAvoidingComponent = () => {
return (
<KeyboardAvoidingView
behavior={Platform.OS == "ios" ? "padding" : "height"}
style={styles.container}
>
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.inner}>
<Text style={styles.header}>Header</Text>
<TextInput placeholder="Username" style={styles.textInput} />
<View style={styles.btnContainer}>
<Button title="Submit" onPress={() => null} />
</View>
</View>
</TouchableWithoutFeedback>
</KeyboardAvoidingView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1
},
inner: {
padding: 24,
flex: 1,
justifyContent: "space-around"
},
header: {
fontSize: 36,
marginBottom: 48
},
textInput: {
height: 40,
borderColor: "#000000",
borderBottomWidth: 1,
marginBottom: 36
},
btnContainer: {
backgroundColor: "white",
marginTop: 12
}
});
export default KeyboardAvoidingComponent;

FlatList moves/drags in all directions

When I click on my FlatList I can drag and move it in all directions (up/down/right left). Although the list appears to be vertical (maybe because of the styling), the scroll bar still appears horizontally. How can I disable this dragging?
This is how I am using the FlatList:
<FlatList
data={data.me.friends.nodes}
//horizontal={false}
//scrollEnabled={false}
renderItem={({ item }) => (
<FriendItem friend={item} originatorId={data.me.id}/>
)}
keyExtractor={(item) => item.id.toString()}
ListEmptyComponent={NoFriendsContainer}
/>
This is from the FriendItem's return
return (
<View style={styles.item}>
<TouchableOpacity
onPress={() =>
navigation.navigate('FriendDetails')
}>
<Thumbnail
style={styles.thumbnail}
source={{
uri:
'https://cdn4.iconfinder.com/person-512.png',
}}></Thumbnail>
</TouchableOpacity>
<View style={styles.nameContainer}>
<Text style={styles.userName}>{userName}</Text>
</View>
<View style={styles.deleteButtonContainer}>
<Button
rounded
style={styles.deleteButton}
onPress={() => onDeleteFriend(originatorId, friend.id)}>
<Icon name="trash-o" size={moderateScale(20)} color="black" />
</Button>
</View>
</View>
);
};
Styles for FriendItem:
export const styles = StyleSheet.create({
item: {
backgroundColor: 'white',
borderRadius: moderateScale(20),
padding: moderateScale(20),
marginVertical: moderateScale(8),
marginHorizontal: 16,
height: moderateScale(110),
width: moderateScale(360),
justifyContent: 'space-between',
flexDirection: 'row',
},
userName: {
paddingRight: 55,
paddingLeft: 10,
paddingTop: 20,
},
deleteButton: {
backgroundColor: '#31C283',
width: moderateScale(45),
justifyContent: 'center',
},
deleteButtonContainer: {
paddingTop: 12,
marginRight: 2,
},
thumbnail: {
height: 85,
width: 85,
marginLeft: 2,
paddingRight: 0,
position: 'relative',
},
nameContainer: {
flexDirection: 'row',
},
});
I also tried removing the TouchableOpacity but it made no difference.

What you can try. is below :
UPDATE:
<Flatlist
bounces={false}/>
try this here, or add bounces={false} in the top scrollView if its there
Hope it helps. feel free for doubts

This issue happened because of some times you have given a width to the parent view of flat list. like below.
<View style={{width: '90%'}}>
<FlatList/>
</View>
simply add the flatlist to the same width with bounces false.
<View style={{width: '90%'}}>
<FlatList
contentContainerStyle={{width: '90%'}}
bounces={false}
/>
</View>
by adding bounces=false, your flatlist will not be able drag to different directions.