Comments (15)
@sperezm97 for opening a modal from tab click use listeners
<Tab.Screen
name="AddEntry"
component={EntryFormScreen}
listeners={({ navigation, route }) => ({
tabPress: e => {
e.preventDefault();
navigation.navigate("EntryFormFlow");
},
})}
options={({ route }) => ({
tabBarIcon: ({ focused, color }) => (
<AntDesign name={"pluscircleo"} size={25} color={color} />
),
})}
/>
from react-navigation.github.io.
What's the current way to do this in V5?
from react-navigation.github.io.
My goal was to create a pop up modal similar to what the OP was looking for in #1059 but I found that almost all of the solutions referenced involved a full page modal that covered up the tab bar and was not really an overlay, which was not what I was looking for.
The way I got it to work was to create a custom tab bar component and render the modal through there.
export default createBottomTabNavigator({
...
AddStack,
...
}, {
tabBarComponent: TabBarComponent,
})
where AddStack is just an empty StackNavigator with screen: () => null
.
And in my TabBarComponent.js
,
export default class TabBarComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
modalVisible: false
}
}
render() {
const { navigation, renderIcon, activeTintColor, inactiveTintColor } = this.props;
const { routes } = navigation.state;
return (
<SafeAreaView style={styles.tabbar}>
{routes && routes.map((route, index) => {
const focused = index === navigation.state.index;
const tintColor = focused ? activeTintColor : inactiveTintColor;
return (
<TouchableWithoutFeedback
key={route.key}
style={styles.tab}
onPress={() => {
if (route.key == "AddStack") {
this.setState({ modalVisible: true })
} else {
navigation.navigate(route)
}
}}
>
<View style={styles.tab}>
{ renderIcon({route, index, focused, tintColor })}
<Modal
isVisible={this.state.modalVisible}
animationIn="fadeInUp"
animationOut="fadeOutDown"
backdropOpacity={.5}
onBackdropPress={() => this.setState({ modalVisible: false })}
onBackButtonPress={() => this.setState({ modalVisible: false })}
style={styles.bottomModal}
useNativeDriver={true}
>
<View style={styles.modal}>
// Modal Content
</View>
</Modal>
</View>
</TouchableWithoutFeedback>
);
})}
</SafeAreaView>
);
}
};
from react-navigation.github.io.
Any update to do this in v5?
from react-navigation.github.io.
Just for the record, the answer by Thomas Kekeisen worked best: https://stackoverflow.com/a/42907868/961886
from react-navigation.github.io.
Wish there was an easier way, but this is how I achieved it in v5.
I passed in a custom tab bar component into the tab navigator. This will give you the ability alter what happens with the onPress.
from react-navigation.github.io.
FYI with v2 and "react-navigation-tabs" version "0.3.0" I have come up with a simpler solution for doing this:
react-navigation/react-navigation#1576 (comment)
from react-navigation.github.io.
class TabBarButtonComponent extends Component { goToListPage = () => { this.props.children[0].props.navigation.navigate("ListPage"); }; }
this.props.children[0].props.navigation.navigate("ListPage");
就这一个,查看props得来的
from react-navigation.github.io.
mr.@bjjeong i try to make adding post like you did, but its always show me the modal view this the code
export default class TabBarComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
modalVisible: false
}
}
render() {
const { navigation, renderIcon, activeTintColor, inactiveTintColor } = this.props;
const { routes } = navigation.state;
return (
<SafeAreaView style={{flexDirection: 'row',
height: 50,
width: '100%',}}>
{routes && routes.map((route, index) => {
const focused = index === navigation.state.index;
const tintColor = focused ? activeTintColor : inactiveTintColor;
return (
<TouchableWithoutFeedback
key={route.key}
style={{flex:1}}
onPress={() => {
if (route.key == "Adding") {
console.log(route.key);
this.setState({ modalVisible: false })
} else {
navigation.navigate(route)
}
}}
>
<View style={{flex:1}}>
{ renderIcon({route, index, focused, tintColor })}
<Modal
isVisible={false}
animationIn="fadeInUp"
animationOut="fadeOutDown"
backdropOpacity={.5}
onBackdropPress={() => this.setState({ modalVisible: false })}
onBackButtonPress={() => this.setState({ modalVisible: false })}
style={{flex:1}}
useNativeDriver={true}
>
<View style={{flex:1, backgroundColor:'rgba(100,100,100, 0.5)'}}>
<Text style={{color:"red"}}> modal content</Text>
</View>
</Modal>
</View>
</TouchableWithoutFeedback>
);
})}
</SafeAreaView>
);
}
};
can you tell me whats wrong with that code?
from react-navigation.github.io.
you can do something like this to change the behavior of pressing a tab
from react-navigation.github.io.
@setanallas you have 2 things wrong.
- The isVisible prop of your Modal is hardcoded to equal false.
Instead, do this:
<Modal
isVisible={this.state.isVisible}
</Modal>
- In your TouchableWithoutFeedback, you need to have the onPress change the state of the isVisible variable.
<TouchableWithoutFeedback
onPress={() => {
if (route.key === 'Adding') {
this.setState({ isVisible: true })}
} else {
navigation.navigate(route)
}
}
>
</TouchableWithoutFeedback>
That should be it.
from react-navigation.github.io.
@bjjeong yea i set it hardcode because its always showing even im not click the bottom tab button, even i set it to false its still show
but no problem i already fix it thx mr.@bjjeong for inspire me
from react-navigation.github.io.
I found this helpful for open the modal from the navbar in react navigation 5: react-navigation/react-navigation#7249
from react-navigation.github.io.
@sperezm97 for opening a modal from tab click use
listeners
<Tab.Screen name="AddEntry" component={EntryFormScreen} listeners={({ navigation, route }) => ({ tabPress: e => { e.preventDefault(); navigation.navigate("EntryFormFlow"); }, })} options={({ route }) => ({ tabBarIcon: ({ focused, color }) => ( <AntDesign name={"pluscircleo"} size={25} color={color} /> ), })} />
Dude thank you. I knew there had to be a simpler solution for v5. Just tried it out and works exactly as I needed.
from react-navigation.github.io.
Any progress?
from react-navigation.github.io.
Related Issues (20)
- Inconsistent TypeScript behavior with optional arguments in useNavigation
- Request for a sandbox environment for React Navigation
- Found screens with the same name nested inside one another HOT 2
- React Navigation logo has multiple control points
- In "Help" page witgh presentation set value to "transparentModal", I want push one new Page of name "Profile", How shuld i do?
- [email protected] -> Compiling JS failed .... invalid expression Buffer
- Improve/Update React-Navigation SVGs
- Remove 'make me a sandwich' references from documentation .mov
- Most of the react navigation examples on snack are not working HOT 2
- Use Deep Link, occur error
- React-native physical iOS devices not showing images
- NavigationContainer: initialRouteName: Issue with TypeScript
- Group Component Information HOT 2
- Nested navigation Snack Expample NOT FOUND
- Missing import on multiple-drawers
- Modal example issue - `RNSScreen` must be a function HOT 1
- Broken outbound URL HOT 1
- Remove mention of deprecated 'jest-native' in docs
- How to use the Drawer.CollapsedItem component with react-navigation/drawer
- Invariant Violation: ViewPagerAndroid has been removed from React Native. It can now be installed and imported from '@react-native-community/viewpager' instead of 'react-native'. See https://github.com/callstack/react-native-viewpager HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-navigation.github.io.