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>
Related
I am using flatlist in my app to show the result of the game by using API, I have a button outside the flatlist, I want the user to click the button and by clicking the button toggle switch will appear with each game and a user can switch off to hide the games and switch on to show the games.
First problem how can I link the button with the render function of flatlist to show the toggle switch.
Seconde is that how can I use the toggle switch to show and hide the games in flatlist.
<View style={{flex:1,}}>
<TouchableOpacity onPress={this.renderItem }> // What should I do here?
<Text style={{fontSize:30,color:'blue'}}>show/hide</Text>
</TouchableOpacity>
<DraggableFlatList
data={this.state.dataSource}
onDragEnd={this.dataSource}
renderItem={this.renderItem}
keyExtractor={item => item.GameId.toString()}
ItemSeparatorComponent={this.renderSeprator}
refreshing = {this.state.refreshing}
onRefresh = {this.handleRefresh}
/>
renderItem=({item,navigation,drag,btnvalue1})=>{
const current = new Date();
const currentHour = current.getHours();
return(
<ScaleDecorator>
<TouchableOpacity style={styles.item}
onLongPress={drag}
onPress={
() => this.props.navigation.navigate('ResultsStack',
{ screen: 'Result', params: { resultDate: this.state.resultDate ,GameId: item.GameId } }
//() => this.props.navigation.navigate('ResultsStack', { screen: 'Result' }
)} >
<Image style={styles.img}
source={{
uri: item.ImgUrl,
}}
/>
<Text style={styles.title}>{item.GameDescp} [{item.DrawRef}] [{item.DayName?.slice(0, 3)}]</Text>
<Text style={styles.txt3}>{item.Result03}</Text>
**//On click I want to hide this Ionicon and show a toggle switch**
<Ionicons
name="chevron-forward-outline"
style={styles.iconarrow}
//color={color}
size={30}
></Ionicons>
{this.btnvalue1 === 1 ? (
<Switch
style={styles.iconarrow}
trackColor={{ false: "#767577", true: "#81b0ff" }}
ios_backgroundColor="#3e3e3e"
/>) : null}
</TouchableOpacity>
</ScaleDecorator>
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
I have a animated view stack which contains a Pressable component to navigate to another screen. But when I press the button, navigation happens after the animation of the container. I want to make it instant.
<Animated.View>
<Animated.View style={[styles.headerContainer, titleStyle]}>
<Animated.Text style={styles.verificationTitle}>
{activationBoxTitle}
</Animated.Text>
<ArrowRightWhite />
</Animated.View>
<Animated.View style={[styles.container, descriptionContainerStyle]}>
<ImageBackground
style={styles.backgroundImage}
resizeMode="cover"
source={images.activateAccBackground}
>
<Pressable
onPress={() => navigation.navigate(
"GeneralQuestions", {
screen: navigateActivationToPage
})}
>
<Animated.Text style={descriptionStyle}>
{activationBoxDescription}
</Animated.Text>
</Pressable>
</ImageBackground>
</Animated.View>
</Animated.View>
How can I do that?
I've seen a problem like this in a question here and I've also seen it in a project. The most common is before navigation, add a setTimeOut, this will cause a delay and have the animation and navigation. It would look something like this:
function handleNavigate() {
setTimeout(() => {
navigation.navigate('GeneralQuestions', {
screen: navigateActivationToPage,
});
}, 5000);
}
// ...
<Pressable
onPress={() => handleNavigate}
/>
Then at setTimeOut time, you add a value that makes sense according to your animation
I have modal for filtering search resluts , something like foursquare app . I have filters in diffrent categories and I need to use tabs for each category . for example when user clicks each tabs it shows the filters related to that tab . and user can select checkboxes or radio buttons . and at the end when user checks all of their needed filters I need to make http request with the new filters.
Something like the image below . I created the modal but I need the functionality for tabs and at the end making the api request with the selected options:
You can also create custom tabs using <Text> with state and depending on a state value render a View associated with that tab. for example
state = {
modalVisible: false,
currentTab: 1,
};
onTabClick = (currentTab) => {
this.setState({
currentTab: currentTab,
});
};
// inside render
<Modal
animationType="slide"
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => {
Alert.alert('Modal has been closed.');
}}>
<View style={styles.tabs}>
<Text
onPress={() => {
this.onTabClick(1);
}}
style={[
styles.tabTextStyle,
this.state.currentTab === 1 ? styles.tabUnderline : null,
]}>
GENDER
</Text>
...
</View>
{this.state.currentTab === 1 && (
<View>
<Text>GENDER</Text>
</View>
)}
...
snack example
Modal is just a Container like View. You can draw anything inside it.
First, import {Modal} from 'react-native'
Then, in your modal, embed anything what you want:
<Modal visible={ this.state.modal }
animationType="fade" transparent={true}
onRequestClose={_ => this.setState({ modal: false }) }>
<View>
{/*
Do anything. Its an open ground.
Whatever component, styles, props and/or anything else you want, you can design
*/}
{/* For example, I am adding a close button */}
<TouchableOpacity style={{ alignSelf: 'flex-end' }} onPress={_ => this.setState({ modal: false }) }>
<Icon type="FontAwesome" name='times' style={ styles.closeIcon } />
</TouchableOpacity>
</View>
</Modal>
And you can open your modal from anywhere like:
<TouchableOpacity style={ styles.button } onPress={_ => this.setState({ modal: true }) }>
<Text style={ styles.buttonText }>Open Modal</Text>
</TouchableOpacity>
Finally, for tabs, you can use either of:
NativeBase Tab Component
React Native Tab View
Suppose I have five items in drawer navigation. I want to add separator after three items. How to add this using react-navigation.
As mentioned vonovak, you could achieve this by using contentComponent which allows complete customization of drawer. For this you will need to create custom component which will override default drawer. Code sample:
Navigation Drawer
const NavigationDrawer = DrawerNavigator({
screen1: { screen: Screen1 },
screen2: { screen: Screen2 },
screen3: { screen: Screen3 },
}, {
contentComponent: SideMenu
})
Custom component which overrides default drawer (DrawerContainer)
class SideMenu extends React.Component {
render() {
return (
<View style={styles.container}>
<ScrollView>
<Text
onPress={() => this.props.navigation.navigate('Screen1')}
style={styles.item}>
Page1
</Text>
// 'separator' line
<View
style={{
borderBottomColor: 'black',
borderBottomWidth: 1
}}/>
<Text
onPress={() => this.props.navigation.navigate('Screen2')}
style={styles.item}>
Page2
</Text>
<Text
onPress={() => this.props.navigation.navigate('Screen3')}
style={styles.item}>
Page3
</Text>
</ScrollView>
</View>
);
}
}
You'll need to use the contentComponent prop to make custom changes. Check out the docs
If you are using DrawerItem component you can use itemStyle prop to add style as follows
const props = {
itemStyle: {
borderBottomWidth: 1,
borderColor: '#E2E4E8',
}
}
<DrawerItems {...props} />
You can also modify the style of container containing all items with
itemsContainerStyle prop.
Check official docs here.
3.x: https://reactnavigation.org/docs/3.x/drawer-navigator#contentoptions-for-draweritems
4.x: https://reactnavigation.org/docs/4.x/drawer-navigator#contentoptions-for-draweritems
5.x: DrawerContent is default drawer Item from v.5
You can pass props to it using drawerContentOptions object in Drawer.Navigator component.
https://reactnavigation.org/docs/5.x/drawer-navigator#drawercontentoptions
You can also pass custom drawer component using drawerContent prop.
https://reactnavigation.org/docs/5.x/drawer-navigator#drawercontent
6.x: Custom component can be added using drawerContent prop
https://reactnavigation.org/docs/drawer-navigator#drawercontent
Style to drawerItem is changed to
https://reactnavigation.org/docs/drawer-navigator#draweritemstyle
Just add this code:
const Seperator = () => <View style={styles.separator} />;
at the top of your code that you want to have the section divider/separator on. If it's a navigation drawer, menu, categories or etc.
Add this styling prop:
separator: {
marginVertical: 8,
borderBottomColor: "#737373",
borderBottomWidth: StyleSheet.hairlineWidth
}
Add section divider/separator between each section, menu, category block of code that you want to separate them like this:
//Block of code of first section/menu/category starts from here
<Icon.Button
name="th-large"
raised={true}
backgroundColor="#ffa500"
size={30}
onPress={() => {
Linking.openURL("https://www.buymeacoffee.com/splendor");
}}
>
<Text style={{ fontSize: 15 }}>
Herat: The "Academy" of Prince Bay Sunghur (1420-1433)
</Text>
</Icon.Button>
**<Seperator />**
//Block of code of first section/menu/category ends here
//Block of code of second section/menu/category starts from here
<Icon.Button
name="th-large"
raised={true}
backgroundColor="#ffa500"
size={30}
onPress={() => {
Linking.openURL("https://www.buymeacoffee.com/splendor");
}}
>
<Text style={{ fontSize: 15 }}>
Venice, Istanbul, and Herat (15th Century)
</Text>
</Icon.Button>
**<Seperator />**
//Block of code of second section/menu/category ends here
//Block of code of third section/menu/category starts from here
<Icon.Button
name="th-large"
raised={true}
backgroundColor="#ffa500"
size={30}
onPress={() => {
Linking.openURL("https://www.buymeacoffee.com/splendor");
}}
>
<Text style={{ fontSize: 15 }}>
The Age of Bihzad of Herat (1465-1535)
</Text>
</Icon.Button>
**<Seperator />**
//Block of code of thirds section/menu/category ends here