Can't navigate to other screen from the screen in TabNavigator - react-native

Question

I trying to render StackNavigator inside TabNavigator. The Tabs are working fine, but i cannot link the button
In simple words, there's a button inside the "Feed" section of the TabNavigator "Tabs" . When clicked on the button, it should go to "UserDetails.js" via StackNavigator.
Please help!
Here is my index.android.js
export default class HackernoonNavigation extends Component {
render() {
return (
<Tabs />
);
}
}
export const Tabs = TabNavigator({
Feed: {
screen: Feed,
},
Me: {
screen: Me,
},
});
And here is the file "Feed.js" , inside which there is a button that leads to "UserDetail.js"
export default class Feed extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to Feed!
</Text>
<Button
onPress={() => this.props.navigation.navigate('Details')}
title="User Details"
/>
</View>
);
}
}
export const FeedStack = StackNavigator({
Details: { screen: UserDetail },
});

Answer 1

You can do it by defining tabnavigator inside stacknavigator as screen like in this way -
const StackNaviApp = StackNavigator({
UserDetails: { screen: UserDetails},
Feed: {
screen: TabNavigator({
Feed: { screen: Feed},
Me: { screen: Me}
}, {
tabBarOptions: {
showIcon: true,
lazy: true,
activeTintColor: '#7567B1',
labelStyle: {
fontSize: 16,
fontWeight: '600'
}
}
})
}});
export default StackNaviApp;
Taking Feed & Me inside TabNavigator & UserDetails inside StackNavigator directly . For more detail you can refer the source code from here -
http://androidseekho.com/others/reactnative/switching-between-stack-navigator-to-tab-navigator/

Answer 2

So I have a ListView on a Tab Screen and when I click on the List Item its navigating to a component called QR Code. So when I click a List Item the camera will be opened in a new window with StackNavigator.... I show you my code down below. Maybe it helps you to find your fault.
import React, {
Component,
} from 'react';
import {
// AppRegistry,
// Dimensions,
ListView,
StyleSheet,
Text,
TouchableOpacity,
TouchableHighlight,
View,
AsyncStorage
} from 'react-native';
import { SwipeListView, SwipeRow } from 'react-native-swipe-list-view';
import moment from 'moment';
import{createStackNavigator} from 'react-navigation';
import { Icon } from 'react-native-elements'
import QrCode from '../components/QrCode';
class SwipeList extends Component {
static navigationOptions = {
title: 'Scanner auswählen',
headerTintColor: 'white',
headerStyle: {backgroundColor: '#444444'},
headerTitleStyle: { color: 'white' },
};
constructor(props) {
super(props);
this.ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
scannerAvailable:false,
listType: 'FlatList',
listViewData: this.ds,
}
...
goToQrCodeScreen=(scanner)=>{
this.props.navigation.navigate('QrCode',{
scannerName: scanner.scannerName,
scannerValidityEnd: scanner.scannerValidityEnd,
scannerId: scanner.scannerId,
dataMacroId: scanner.dataMacroId,
hash:scanner.hash,
requestKey: scanner.requestKey,
})
}
...
render() {
return (
<View style={styles.container}>
<View>
<SwipeListView
dataSource={this.state.listViewData}
renderRow={ data => (
<View >
<TouchableHighlight
onPress={()=>this.goToQrCodeScreen(data)}
style={styles.rowFront}
underlayColor={'#AAA'}>
<Text> <Text style={[styles.listItemName,styles.textBold] } >{data.scannerName} </Text>
<Text style={styles.listItemValid}> gültig bis {moment(data.scannerValidityEnd).format('DD.MM.YYYY')}</Text>
</Text>
</TouchableHighlight>
</View>
)}
renderHiddenRow={ (data, secId, rowId, rowMap) => (
<View style={styles.rowBack}>
<TouchableOpacity style={[styles.backRightBtn, styles.backRightBtnRight]} onPress={ _ => this.deleteRow(data.scannerId,rowMap, `${secId}${rowId}`) }>
<Icon
name='trash'
type='font-awesome'
color='white'/>
<Text style={styles.backTextWhite}>
Löschen</Text>
</TouchableOpacity>
</View>
)}
rightOpenValue={-100}
enableEmptySections={true}
/>
</View>
</View>
);
}
}
const StackNavigation = createStackNavigator(
{
SwipeList:SwipeList ,
QrCode:QrCode
},
{
initialRouteName: 'SwipeList',
}
);
export default StackNavigation;
I deleted the code you dont need. I call the method goToQrCodeScreen() to navigate.
My fault was that I dont exported the StackNavigator. Now its working.

Answer 3

you need to wrap your feed in another component :
const FeedStack = createStackNavigator();
function FeedWrapper() {
return (
<HomeStack.Navigator>
<FeedStack .Screen name="Feed" component={Feed} />
<FeedStack .Screen name="Details" component={Details} />
</HomeStack.Navigator>
);
}
see https://reactnavigation.org/docs/tab-based-navigation