I am trying to find some examples how to implement hidden search bar on top of Screen (react-native) like in Telegram:
And can't find any useful examles. I am using #react-navigation/bottom-tabs. This is one tab of my applicacion:
This is my part of screen that renders bottom tab an search button:
<BottomTab.Screen
name='Products'
component={ProductsScreen}
options={({navigation}: RootTabScreenProps<'Products'>) => ({
title: __('Products'),
tabBarIcon: ({ color }) => <TabBarIcon icon={faShop} color={color} />,
headerRight: () => (
<View style={styles.headerButtons}>
<Pressable
onPress={() => navigation.navigate('Modal')}
style={({ pressed }) => ({
opacity: pressed ? 0.5 : 1,
})}>
<FontAwesomeIcon
icon={faSearch}
size={25}
/*color={Colors[colorScheme].text}*/
style={{ marginRight: 15 }}
/>
</Pressable>
</View>
),
})}
/>
and with all examples that I found - I can't figure out how to do it. Obviously I want that searchbar like this works both on Android and iOs. Please any help. Thanks
Related
I'm working on a React native project, in which I use #react-navigation/bottom-tabs: v 6.3.1, for navigation control.
// Navigations.js
<Tab.Screen
name='ExerciseTabScreen'
component={ExerciseStack}
options={( {route, navigation} ) =>({
title : 'Entrenamientos',
headerStyle: {backgroundColor: '#efb810', borderBottomLeftRadius: 6, borderBottomRightRadius: 6},
headerTitleStyle: {color: 'whitesmoke'},
headerShown: 'ExerciseTabScreen' === route.name ? console.log(true) : console.log(false),
headerRight: () => (
<TouchableOpacity onPress={ () => navigation.navigate('<')}>
<Text>Home</Text>
</TouchableOpacity>
),
})}
/>
I can't access the name of the ExerciseTabScreen I swear I've spent a lot of research on it, I even tried to use a Switch and the only thing I get from the console is a True when I change to any of the routes. I already tried wrapping the route.name in square brackets:
headerShown: 'ExerciseTabScreen' === [route.name] ? console.log(true) :
console.log(false),
However I get false when changing to any of the routes. How can I dynamically access the headerShown?
I have a Viewinside a SafeAreaView in a screen which has postion:absolute. When I include the view, a TouchableOpacity rendered in the header no longer responds in ANDROID (but always works fine in iOS).
Home screen:
render() {
return (
<SafeAreaView style={styles.SafeAreaContainer}>
<View style={styles.homeBackgroundContainer}> {/* <--- offending view! */}
<BlueCircle style={styles.homeBackgroundSvg} />
</View>
<View style={styles.homeView}>
<View style={styles.homeGreetingContainer}>
<Title style={styles.homeGreeting}>Hi, </Title>
<Title style={styles.homeGreetingName}>{username}</Title>
</View>
// Other components
</View>
</SafeAreaView>
);
}
styles.homeBackgroundContainer:
homeBackgroundContainer: {
borderColor: COLOR.transparent,
position: 'absolute',
top: '-50%',
left: '-25%',
right: 0,
bottom: 0,
},
The header is declared in the drawer navigator screen options. Note the TouchableOpacity in the header - this is used to open the drawer.
works in iOS
works from the "Content" screen
works when the homeBackgroundContainer(and its children) are commented out (Home Screen)
DOES NOT WORK IN ANDROID when homeBackgroundContainer is rendered (Home Screen).
Drawer Navigation & Header:
function DrawerContainer() {
return (
<Drawer.Navigator
screenOptions={({navigation}) => ({
headerLeft: titleLogo,
headerStyle: {
// colors only
},
headerTitle: () => {},
headerRight: () => (
<TouchableOpacity
style={styles.hamburgerIconButton}
onPress={() => navigation.toggleDrawer()}>
<Image source={require('../assets/hamburger.png')} />
</TouchableOpacity>
),
})}>
<Drawer.Screen
name="Home"
component={HomeScreen}
options={{
headerShown: true,
// more options
}}
/>
<Drawer.Screen
name="Content"
component={ContentScreen}
options={{
headerShown: true,
}}
/>
</Drawer.Navigator>
);
}
styles.hamburgerIconButton:
hamburgerIconButton: {
marginRight: 20,
},
Other questions on SO have shown that absolute positioning can affect TouchableOpacity. I have tried setting the zIndex of the TouchableOpacity to 1, and also tried setting a positive elevation value but there is no change in behaviour.
Visually, I can see the header colors and content is rendered on top of the view which is the desired state. So if the header is rendered over the view, why isn't the TouchableOpacity responding?
To get the TouchableOpacityin a navigation header to respond on android when there's a view on the screen which has postion: absolute, I had to bring the headerStyle(not the touchable opacity style) forward on the z-axis.
screenOptions={() => ({
headerStyle: {
zIndex: 1,
},
})};
I have been trying to include two icon buttons at headerLeft position but only one icon button appears at the position. I have mentioned my code below which has no errors. Using the code, I am unable to obtain the desired output that is only one of the two icon buttons is appearing at the headerLeft position. I have created AccountStack using createStackNavigator(). At the headerRight position hamburger icon appears to access the drawer. I want settings icon button and help icon button to appear at the headerLeft position together.
export default function AccountStack({navigation}) {
return (
<Stack.Navigator>
<Stack.Screen name="Account" component= {AccountScreen}
options={{headerRight: () => (<Ionicons.Button name="reorder-three" color={"#FF0000"} size={32} onPress={() => navigation.openDrawer()}/>),
headerLeft: ()=> ( <Ionicons.Button name= "settings" color={"#FF0000"} size={32}/> ,
<Ionicons.Button name= "md-help-circle" color={"#FF0000"} size={32}/> )}}/>
<Stack.Screen
name="Help"
component= {HelpScreen}
options={{headerRight: () => (<Ionicons.Button name="reorder-three" color={"#FF0000"} size={32} onPress={() => navigation.openDrawer()}/> ) }}/>
<Stack.Screen
name="Settings"
component= {SettingScreen}
options={{headerRight: () => (<Ionicons.Button name="reorder-three" color={"#FF0000"} size={32} onPress={() => navigation.openDrawer()}/> ) }}/>
</Stack.Navigator>
);
}
I am a beginner, kindly help me out in resolving the problem.
You can only render a single component in the headerLeft, therefore you need to wrap the two icons you want to set in a View
(Just for you to know: you can also build a more complex component to render in the headerLeft, with multiple buttons/texts etc)
<View>
<Ionicons.Button name= "settings" color={"#FF0000"} size={32}/> ,
<Ionicons.Button name= "md-help-circle" color={"#FF0000"} size={32}/>
</View>
I am new to react native and its navigation modules. I have a simple dashboard.js file where I am using tab navigator like this -
<Tabs.Navigator tabBarOptions={{ activeTintColor: '#ff5757' }}>
<Tabs.Screen
options={{
tabBarIcon: ({ color }) =>
<Icon name='star-border' size={30} padding={15} color={color} />,}}
name={'Orders'}
component={Order}
initialParams={{user}}
/>
<Tabs.Screen
component= {AnotherComponent}
/>
As you can see I am passing InitialParams where I have user props. And I can easily get it in Order component by route.params.
However, in my dashboard component I also have a method that runs every 1 minute and updates user props.
I can't get the updated value of user props in Order component. I am stuck with this for 2 days. In the past I have done like this -
<Tabs.Screen
component = {() => <SomeComponent props= {props}/>}
And it worked fine. But with react-navigation 5 its not working any more.
Please help me if anyone knows. plz.
Thanks a lot.
The initial props seems to be a constant also as per the documentation you have to use redux or context api to update the badge counts in the tabs so I think it will be better to take that approach to handle this problem. Came up with a count changing scenario just like yours using context API.
const CountContext = React.createContext(0);
function HomeScreen() {
return (
<View>
<CountContext.Consumer>
{value => <Text>Home! {value}</Text>}
</CountContext.Consumer>
</View>
);
}
const MyTabs = () => {
const [count, setCount] = React.useState(0);
return (
<CountContext.Provider value={count}>
<View style={{ flex: 1 }}>
<Text>{count}</Text>
<Button title="count" onPress={() => setCount(count + 1)} />
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} options={{ title: 'My home' }} />
<Tab.Screen name="Settings" component={SettingsScreen} options={{ title: 'My home 2' }} />
</Tab.Navigator>
</View>
</CountContext.Provider>
);
};
This way you can skip the navigation params and directly send data to the tab, and this data can be read from other tabs or somewhere down the tree as well.
You can check the full snack here
https://snack.expo.io/#guruparan/5c2b97
In my React Native app, I would like to use Vector Icons as navigation bar buttons.
For that, I'm using: https://github.com/oblador/react-native-vector-icons
For navigation: https://reactnavigation.org/
I managed to set the icons as well, but when I tap the buttons, I get an unwanted effect where the background turns black.
Is there a way how I can keep the background color transparent also when the button's pressed?
Here's my code:
static navigationOptions = ({ navigation }) => {
const { params } = navigation.state
return {
headerTitle: "Blog posts",
headerRight: (
<Icon.Button name="quote-right" backgroundColor="transparent" color="black" onPress={() => params.postComment()}>
<Text style={{fontSize: 15}}></Text>
</Icon.Button>
),
headerLeft: (
<Icon.Button name="navicon" backgroundColor="transparent" color="black" onPress={() => params.postComment()}>
<Text style={{fontSize: 15}}></Text>
</Icon.Button>
),
};
};
And here's what I got:
The prop you are looking for is underlayColor, that's the one you should set to transparent.
<Icon.Button
name="quote-right"
backgroundColor="transparent"
underlayColor="transparent" // This one
color="black"
onPress={() => params.postComment()}
>
<Text style={{fontSize: 15}}></Text>
</Icon.Button>