Just wondering how I can remove the (Back) text in navigation and just use the arrow for navigating I am using react native expo.
<Stack.Screen
name="ChatRoom"
component={ChatRoomScreen}
options={({route}) => ({
title: route.params.name,
headerRight: () => (
<View
style={{
flexDirection: "row",
width: 100,
justifyContent: "space-between",
marginRight: 10,
}}
>
<MaterialIcons name="call" size={22} color={'white'} />
<FontAwesome5 name="video" size={22} color={'white'} />
<MaterialCommunityIcons name="dots-vertical" size={22} color={'white'}/>
</View>
)
})}
/>
I found that react navigation behaves weirdly sometimes. But first, you can try this:
headerBackTitle: ' ',
if that makes the back arrow missing, you can add it manually like so:
headerBackImage: ()=> (<Icon name='chevron-left' color='#FFFFF' onPress={()=>{ navigation.goBack();}} />),
you also need to make sure your options has navigation like so:
options={({route, navigation}) => ({
Note: the Icon i used it from react-native-elements.
You need to
headerBackTitleVisible: false,
add this to options like
options={{
...
headerBackTitleVisible: false,
}}
Proof: https://reactnavigation.org/docs/stack-navigator/#headerbacktitlevisible
Related
I am working on accessibility labels for the voice assistant, I've done most of the tags but I can not set the bottom tab navigator options, how can I use accessibility labels with the below BottomTab.Navigator components?
In the below, I could set the labels with the Icons but it is encapslating limited area.
When I try with Bottom.Navigator, throwing errors something like that:
Error: A navigator can only contain 'Screen' components as its direct children (found 'undefined'). To render this component in the navigator, pass it in the 'component' prop to 'Screen'.
export default function BottomTabNavigator(): any {
const colorScheme = useColorScheme();
return (
<BottomTab.Navigator
initialRouteName={Routes.TAB_ONE}
tabBarOptions={{
showLabel: false,
inactiveBackgroundColor: Colors[colorScheme].secondaryColor,
activeBackgroundColor: Colors[colorScheme].secondaryColor,
style: {
borderTopWidth: 0,
borderTopColor: 'transparent',
height: 50,
},
}}
>
<BottomTab.Screen
name={Routes.TAB_ONE}
component={TabOneNavigator}
options={{
tabBarIcon: () => (
<View accessible={true} accessibilityLabel="home page">
<CustomIcon name="home" color={Colors[colorScheme].buttonText} />
</View>
),
}}
/>
<BottomTab.Screen
name={Routes.TAB_TWO}
component={TabTwoNavigator}
options={{
tabBarIcon: () => (
<View accessible={true} accessibilityLabel="downloads">
<CustomIcon
name="library"
color={Colors[colorScheme].buttonText}
/>
</View>
),
}}
/>
<BottomTab.Screen
name={Routes.TAB_THREE}
component={TabThreeNavigator}
options={{
tabBarIcon: () => (
<View accessible={true} accessibilityLabel="menu">
<CustomIcon name="menu" color={Colors[colorScheme].buttonText} />
</View>
),
}}
/>
</BottomTab.Navigator>
);
}
Thanks in advance
React Native Flat list will now scroll. Not sure what I am doing wrong here. I am on the latest version for React Native. I need the flatlist to scroll and with this issue I can't refresh the list when I pull down the list to refresh. I also tried to user the prop to enable scroll and that did not work either.
<View
style={[
styles.container,
{paddingLeft: insets.left, paddingRight: insets.right},
]}>
<List.Section style={styles.flex}>
<List.Subheader>Profile List:</List.Subheader>
<FlatList
data={data}
style={styles.flex}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={() => setRefreshing(true)}
tintColor={'blue'}
/>
}
renderItem={({item, index, separators}) => (
<>
<List.Item
title={item.title.rendered}
description={item.content.rendered.replace(/(<([^>]+)>)/gi, '')}
left={props => <List.Icon {...props} icon="layers" />}
right={props => (
<Button
style={{alignSelf: 'center'}}
mode="text"
onPress={() => selectedProfile(item.acf.elmc_custom_layout)}
onLongPress={() => showDialog(item)}>
Download
</Button>
)}
/>
<Divider />
</>
)}
/>
</View>
// my stylesheet for this component
const styles = StyleSheet.create({
container: {
flex: 1,
},
flex: {
flex: 1,
},
});
I found issue but not sure how to fix it. I am using the following code so that it will dismiss the keyboard when I press anywhere on the screen. This code dismiss the keyboard but it prevents the screens from scrolling. I placed it to wrap around my navigation so that all screen will dismiss the keyboard but it causing issues with scrolling the screen. can someone provide an example how I can dismiss keyboard when I press anywhere on the screen and also be able to scroll the screens when needed
// allows the keyboard to be dismissed anywhere the screen is pressed
const DismissKeyboard = ({children}) => (
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={{flex: 1}} onStartShouldSetResponder={() => true}>
{children}
</View>
</TouchableWithoutFeedback>
);
function CustomLayoutNavigator(props) {
return (
<DismissKeyboard?
<Stack.Navigator>
<Stack.Screen
name="CustomLayoutHomeScreen"
component={CustomLayoutScreen}
initialParams={{myData: []}}
options={{
title: 'My Layout',
headerShown: false,
}}
/>
Try to use ScrollView instead of View on the top level.
Try this,
const [refreshing, setRefreshing] = useState(false);
const onRefresh = () => {
//refresh Action
};
<FlatList
data={data}
style={styles.flex}
refreshControl={
<RefreshControl
refreshing={refreshing}
onRefresh={() => onRefresh()}
tintColor="#F8852D"
/>
}
renderItem={({item, index, separators}) => (
)}
/>
i have several screens in stack navigator like below
<Stack.Navigator screenOptions={TransitionScreenOptions}>
<Stack.Screen
options={stackoptions}
name="videoScreen"
component={videoScreen}
/>
<Stack.Screen
options={stackoptions}
name="registerScreen"
component={SignUpScreen}
/>
</Stack.Navigator>
for all the screens i set options like below
const stackoptions = ({ navigation }) => ({
headerBackTitleVisible: false,
headerStyle: {
backgroundColor: "#000",
},
headerTintColor: "#fff",
headerRight: () => {
return (
<Pressable
style={{ paddingRight: 8 }}
onPress={() => navigation.toggleDrawer()}
>
<AntDesign name="menu-fold" size={30} color="white" />
</Pressable>
);
},
});
Now , how can i override or add certain options to one of my screen , for example something like below , I want to modify only headerTintColor , whereas remaining stackoptions should be used except headerTintColor.
<Stack.Screen
options={...stackoptions, headerTitle: "" }
name="registerScreen"
component={SignUpScreen}
/>
for all the screens i set options like below
This is unnecessary. You can specify common options in screenOptions and they'll be applied to all screens, it's not needed to repeat them for every screen. You can use spread operator to merge your TransitionScreenOptions with the others:
<Stack.Navigator screenOptions={({ navigation }) => ({
...TransitionScreenOptions,
headerBackTitleVisible: false,
headerStyle: {
backgroundColor: "#000",
},
headerTintColor: "#fff",
headerRight: () => {
return (
<Pressable
style={{ paddingRight: 8 }}
onPress={() => navigation.toggleDrawer()}
>
<AntDesign name="menu-fold" size={30} color="white" />
</Pressable>
);
},
})}>
You can just do this:
options={{ headerTitle: "" }}
This will override the same option if it was specified in screenOptions
If you need to use the current structure, call the stakOptions function and pass the arguments before spreading it:
options={args => ({
...stackoptions(args),
headerTitle: ""
})}
I want to navigate to a particular screen using a common header button in the stack navigator.
<NavigationContainer>
<RootStack.Navigator
mode="modal"
screenOptions={{
headerTitleAlign: 'center',
headerTitle: () => <SpreeLogo />,
headerRight: (props) => <MaterialIcons style={{
marginHorizontal: 10,
}}
onPress={() => console.log(props)}
name="clear" size={28} color="black" />
}}
>
In the header right icon I would like to have access to the navigation prop. I've tried console logging the prop but there is no prop as navigation. How to get access to it?
As per documentation you can provide a function to screenOptions like below which will give you access to the navigation and from there you should be able to jump to any screen
<NavigationContainer>
<RootStack.Navigator
mode="modal"
screenOptions={({ route, navigation }) => ({
headerTitleAlign: 'center',
headerTitle: () => <SpreeLogo />,
headerRight: (props) => <MaterialIcons style={{
marginHorizontal: 10,
}}
onPress={() => console.log(route, navigation)}
name="clear" size={28} color="black" />
})}
>...
Read the docs here https://reactnavigation.org/docs/stack-navigator and search for screenOptions.
Good Luck
In React Navigation V6 you can provide a function to options
<Stack.Screen
name="Screen"
component={Screen}
options={({ route, navigation }) => ({
headerTitleAlign: "center",
headerLeft: () => (
<Icon
name="arrow-back"
onPress={() => navigation.goBack()}
color="#fff"
size={25}
/>
),
})}
/>
I developing a react native project.
I use react-native-custom-picker but when I try gives a Custom Picker style it's not working. my code like this below
//.. in CustomPicker.js
<CustomPicker
placeholder={labelDefault}
options={options}
getLabel={item => item.label}
optionTemplate={this.renderOption}
selectedValue={this.props.selectedValue}
onValueChange={this.onValueChangeCustomPicker}
textStyle={{color:colors.dark_black,fontSize:25}}--> Here is not work
/>
renderOption() function like this
renderOption(settings) {
const { item, getLabel } = settings
return (
<View style={styles.optionContainer}>
<View style={styles.innerContainer}>
<Text style={{ color: colors.dark_black, alignSelf: 'flex-start', fontSize: 24 }} key={item.key}>{item.label}</Text>
</View>
</View>
)
}
I know Picker style only support IOS.
What's my fault? Any idea!
can you try this code?
I don't know how you organized "options," but you can't work because you don't have any place to take the factors for "colors."
renderOptions:
const options = [
...
color: "black",
]
...
renderOption(settings) {
const { item, getLabel } = settings
return (
<View style={styles.optionContainer}>
<View style={styles.innerContainer}>
<Text style={{ color: item.color, alignSelf: 'flex-start', fontSize: 25 }} key={item.key}>{item.label}</Text>
</View>
</View>
)
}
<CustomPicker
placeholder={labelDefault}
options={options}
getLabel={item => item.label}
optionTemplate={this.renderOption}
selectedValue={this.props.selectedValue}
onValueChange={this.onValueChangeCustomPicker}
/>
I checked source code and documentation if I wanna give style placeholder I should use props for field template like this.
<CustomPicker
fieldTemplateProps={{textStyle:{color:"red",fontSize:22}}}
placeholder={'Please select your favorite item...'}
options={options}
getLabel={item => item.label}
optionTemplate={this.renderOption}
headerTemplate={this.renderHeader}
onValueChange={value => {
Alert.alert('Selected Item', value ? JSON.stringify(value) : 'No item were selected!')
}}
/>
it's worked in my project
more detail