I have been researching this for days after days and still didn't get what I want.
I don't even know why this has not been raised yet..
For example, if you use
const Tab = createMaterialTopTabNavigator();
from #react-navigation/material-top-tabs
export class TopTab extends React.Component {
render() {
return (
<Tab.Navigator
swipeEnabled={false}
tabBar={(props) => <CustomTabBar {...props} />}
>
<Tab.Screen name="First" component={FirstView} />
<Tab.Screen name="Second" component={SecondView} />
<Tab.Screen name="Third" component={ThirdView} />
</Tab.Navigator>
);
}
export class FirstView extends React.Component {
render() {
return (
<ScrollView horizontal>
.... contents
</ScrollView>
);
}
then ScrollView horizontal swipe won't work within these Views.
what I've tried:
swipeEnabled=true
nestedScrollViewEnabled=true
Is there any known solution to this?
I've tried pager option to customize ViewPaging with react-native-community/viewpager, still no luck.
Please help!
Ah, feels stupid now. The problem wasn't actually neither ScrollView nor Navigator.
It was Touchable components masking scrolling behaviour.
Related
I have seen many examples showing how it works with Function components but the question is how do I do it with Classes? I havent found a single example!
This is how it works with Functions: Snack
I really need help in this one please!
I'm happy to let you know that as of react-navigation 6, this is entirely possible with class components!
yarn add #react-navigation/bottom-tabs
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
class MainPage extends React.Component<any, any> {
render() {
return (
<Tab.Navigator>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>
);
}
}
I'm having an issue with the react-navigation's drawer component not covering the whole application. I'm really struggling as I'm new with React Native and can't figure out the "clean way" to do it
Here's an example:
https://snack.expo.io/ZZqxmOQMw
When you press on "Toggle drawer" I expect it to cover the whole app, including the header, but it only covers the main content. On their examples, the drawer always only work with no content nor header.
Thank you!
I think this is a simple solution for you.
function withHeader(Component) {
return function(props) {
return (
<>
<Header />
<Component {...props} />
</>
)
}
}
function MyDrawer() {
return (
<Drawer.Navigator>
<Drawer.Screen name="Feed" component={withHeader(Feed)} />
<Drawer.Screen name="Notifications" component={withHeader(Notifications)} />
</Drawer.Navigator>
);
}
function Header() {
return <View style={{height: '50px', backgroundColor: 'red'}}>
<Text>My custom header!</Text>
</View>
}
export default function App() {
return (
<NavigationContainer>
<MyDrawer />
</NavigationContainer>
);
}
I think you should move the Header component to each screen or using the stack inside the drawer to create header
Current Behavior
My code:
class App extends Component {
render() {
return <Drawer /> {/* rigid scrolling effect */}
return <Stack /> {/* smooth scrolling effect if I comment above return statement */}
}
}
const Drawer = DrawerNavigator({
Feed: { screen: Feed }
})
const Stack = StackNavigator({
Feed: { screen: Feed }
})
And Feed component's render is just a bunch of lines:
render() {
return <View style={{flex:1}}>
<ScrollView>
<Text>random line...</Text>
// .. more lines to make it scrollable
</ScrollView>
</View>
}
Expected Behavior
The expected behavior is to get smooth scrolling effect in both cases. However, DrawerNavigator screen's scrolling effect is extremely rigid. When I swipe my finger quickly from up to down, it doesn't keep scrolling smoothly automatically like it should in Stacknavigator example.
How to reproduce
Create App.js file above and create a simple Feed.js component which has a bunch of lines to make ScrollView work.
Can anybody help?
Update: Live demonstration: https://snack.expo.io/Hk8Np7nPG
Try this
render() {
return (
<View style={{flex:1}}>
<ScrollView>
<View>
{Your Contnet}
</View>
</ScrollView>
</View>
)}
it is worked for me...
hope it'll also worked for you
You can Use NativeBase with standard tabs Container and Contet (like ScrollView ) Header and...
first try :
npm install native-base --save
then:
npm i
react-native link
and here is your full example code:
import React, { Component } from 'react';
import { Content , View , Text } from 'native-base'; //don't need import 'react-native' components
export default class GeneralExample extends Component {
render() {
return (
<Content >
<View>
{Your Contnet}
</View>
</Content>
)}
}
and if you wanna change the speed just ScrollView try:
<ScrollView decelerationRate={0.5}>
<View/>
</ScrollView>
in NativeBase Use THIS LINK
I have a tab bar in my application that I don't want the navigation transition to affect each time a new route is rendered. Therefore I want to place the tab bar outside the Navigator, but how do I trigger the navigation actions in that case? I cannot access the navigator object that is passed to the renderScene function from outside the Navigator.
Here is what is returned in app.js:
<View>
<Navigator
ref="navigator"
initialRoute={{name: "start"}}
renderScene={this.renderScene.bind(this)}
configureScene={this.configureScene.bind(this)}
/>
<TabBar navigator={???} style={styles.nav} />
</View>
Ok, I think I solved this. The problem seems to be that the refs is not available at the first render of the component. I solved this by:
<Navigator
ref={(r) => { this.navigatorRef = r; }}
initialRoute={{name: "start"}}
renderScene={this.renderScene.bind(this)}
configureScene={this.configureScene.bind(this)}
/>
{this.state ? <TabBar navigator={this.state.navigatorRef} style={styles.nav} /> : null }
and added the this:
componentDidMount() {
this.setState({navigatorRef: this.navigatorRef});
}
just to make the component render a second time with the TabBar.
I don't think this is the best way to do what you want. But to answer your question:
<View>
<Navigator
ref="navigator"
initialRoute={{name: "start"}}
renderScene={this.renderScene.bind(this)}
configureScene={this.configureScene.bind(this)}
/>
<TabBar getNavigator={()=>this.refs.navigator} style={styles.nav} />
</View>
And then you could call getNavigator() from your TabBar
Here's another version that worked for me. It is hackish and will probably break in the future but might help if you're in a hurry ;)
<View>
<Navigation
ref={(r) => { this.navigation = r }}
/>
<OtherScreen
navigation={(this.navigation || {})._navigation}
{...this.props}
/>
</View>
I'm stuck with React Native.
I have a "Header" navigationBar, but I want to add another navigationBar to my Navigator component.
render() {
let currentRoute = this.props.route
return (
<Navigator
style={styles.container}
initialRoute={this.props.route}
renderScene={this.router.bind(this)}
navigationBar={<Header />} // << There, how can I simply add another navigationBar ?
/>
);
}
And here's the <Header/> component :
render() {
return <Navigator.NavigationBar
style={styles.navBarContainer}
navState={this.props.navState}
routeMapper={routeMapper}
/>
}
Now, I'm trying to add a <Footer/> component, which would render a similar component as <Header/>, in order to have 2 persistent navigation bar on my app.
How to achieve this ?
I also meet this question, and have resolved it. In React Native, it is not supported to add multiple navigationBar. But, if you want to add another "navigationBar", you can add this "navigationBar" as the sibling node of the Navigator, such as:
render() {
return (
<View style={styles.scene}>
<TopStatusBar
showBackIcon={false}
centerText={LocalizedStrings.appName}
rightIcon={require("../../res/icons/head.png")}
onRightPress={this._onHeadPress.bind(this)}
/>
<Navigator
initialRoute={ROUTE_STACK[0]}
renderScene={this._renderScene.bind(this)}
configureScene={() => Navigator.SceneConfigs.FadeAndroid}
navigationBar={
this.state.displayBottomTabBar ?
<BottomTabBar
ROUTE_STACK={ROUTE_STACK}
/>
:
null
}
onWillFocus={(route) => {
this.presentedRoute = route;
}}
sceneStyle={{flex: 1}}
/>
</View>
);
}
In the upper code, TopStatusBar is a composite component. It persists across scene transitions, just like the navigatorBar.
Good luck!