Navigating screens by pressing images - react-native

Question

I am trying to navigate between different screens by pressing image components. Each different image leads to a different screen.
I am firstly trying to navigate by clicking 'meo.sudoeste.png' to 'meo_sw'. However whenever I press the image nothing happens. This is my HomeScreen.js:
import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity, TextInput, ScrollView, Image} from 'react-native';
import * as firebase from 'firebase';
import Icon from 'react-native-vector-icons/Ionicons';
import { StackNavigator } from 'react-navigation';
export default class HomeScreen extends React.Component {
constructor(props) {
super(props);
this.state = { }
}
render() {
return (
<View style={styles.screen}>
<View style={styles.container}>
<View>
<Icon name={"ios-search"} style={styles.icon}/>
</View>
<TextInput style={styles.inputBox}
underlineColorAndroid='rgba(0,0,0,0)'
placeholder="Procura aqui"
placeholderTextColor = "black"
selectionColor="black"
keyboardType="default"/>
</View>
<ScrollView style={styles.teste}>
<Text style={styles.festivais}>Recomendados</Text>
<ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.festivais_lista}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('meo_sw')}>
<Image source={require('../assets/meo_sudoeste.png')} style={styles.image}/>
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('vodaf_coura')}>
<Image source={require('../assets/vodafone_coura.png')} style={styles.image} />
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('superR_superB')}>
<Image source={require('../assets/superbock_superrock.png')} style={styles.image}/>
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('nos')}>
<Image source={require('../assets/nos_primavera.png')} style={styles.image}/>
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('rock_in_rio')}>
<Image source={require('../assets/rock_in_rio.png')} style={styles.image}/>
</TouchableOpacity>
<TouchableOpacity onPress={() => navigation.navigate('edp_cool_jazz')}>
<Image source={require('../assets/edp_cooljazz.png')} style={styles.image}/>
</TouchableOpacity>
</ScrollView>
</ScrollView>
</View>
);
}
}
const styles = StyleSheet.create({
// I took this off because it is irrelevant.
});
Could you please help me?
This is my App.js, which contains the stack navigator
import React from 'react';
import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {createBottomTabNavigator} from 'react-navigation-tabs'
import {Ionicons} from '#expo/vector-icons';
import ChatScreen from './screens/ChatScreen';
import PostScreen from './screens/PostScreen';
import NotificationScreen from './screens/NotificationScreen';
import ProfileScreen from './screens/ProfileScreen';
import LoadingScreen from './screens/LoadingScreen';
import LoginScreen from './screens/LoginScreen';
import RegisterScreen from './screens/RegisterScreen';
import HomeScreen from './screens/HomeScreen';
import firebaseConfig from './config';
import * as firebase from 'firebase';
import meo_sw from '../Eventos/Festivais/meo_sw';
const AppContainer = createStackNavigator(
{
default: createBottomTabNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: {
tabBarIcon: ({tintColor}) => <Ionicons name='ios-home' size={30} color={tintColor}></Ionicons>
}
},
Chat: {
screen: ChatScreen,
navigationOptions: {
tabBarIcon: ({tintColor}) => <Ionicons name='ios-chatboxes' size={30} color={tintColor}> </Ionicons>
}
},
Home: {
screen: HomeScreen,
navigationOptions: {
tabBarIcon: ({tintColor}) => <Ionicons name='ios-home' size={30} color={tintColor} style={{
shadowColor:'#E9446A',
shadowOffset:{
width:0,
heigth:0,
shadowRadius:10,
shadowOpacity:0.3}}}></Ionicons>
}
},
Post: {
screen: PostScreen,
navigationOptions: {
tabBarIcon: ({tintColor}) =>
<Ionicons name='ios-add-circle'
size={48} color={tintColor}>
</Ionicons>
}
},
Notification: {
screen: NotificationScreen,
navigationOptions: {
tabBarIcon: ({tintColor}) => <Ionicons name='ios-notifications' size={30} color={tintColor}> </Ionicons>
}
},
Profile: {
screen: ProfileScreen,
navigationOptions: {
tabBarIcon: ({tintColor}) => <Ionicons name='ios-person' size={30} color={tintColor}> </Ionicons>
}
}
},
{
defaultNavigationOptions:{
tabBarOnPress: ({navigation, defaultHandler}) => {
if (navigation.state.key === 'Post') {
navigation.navigate('postModal')
} else {
defaultHandler()
}
}
},
tabBarOptions: {
activeTintColor: '#FFA200',
inactiveTintColor: '#B8B8C4',
showLabel: false
}
}
),
postModal: {
screen: PostScreen
}
},
{
mode: 'modal',
headerMode:'none'
}
)
const AuthStack= createStackNavigator({
Login: LoginScreen,
Register: RegisterScreen
})
export default createAppContainer(
createSwitchNavigator(
{
Loading: LoadingScreen,
App: AppContainer,
Auth: AuthStack
},
{
initialRouteName: 'Loading'
}
)
)
UPDATE
And this is my meo_sw.js :
import * as React from 'react'
import { View, Text, ScrollView, TouchableOpacity, StyleSheet } from 'react-native';
export default function Meo() {
return (
<ScrollView>
<View style={styles.header}>
<Text style={styles.texto}>Meo Sudoeste</Text>
</View>
</ScrollView>
);
};
const styles = StyleSheet.create({
header:{
width:'100%',
height:90,
paddingTop:36,
backgroundColor: 'blue',
alignItems: 'center',
justifyContent: 'center'
},
texto:{
color:'white',
fontSize: 18
}
});

Answer 1

looks like you're trying to navigate to meo_sw which is not registered in your Stack Navigator. Do you want to try updating your code as follows:
import meo_sw from "./meo_sw"
const AppContainer = createStackNavigator(
{
meo_sw: meo_sw,
default:
... // Your existing code.
}
That should register it as a screen you can navigate to.

Answer 2

Create a separate StackNavigator for HomeScreen & inert your meo_sw into it
const HomeStack = createStackNavigator({
Home: { screen: HomeScreen },
meo_sw : { screen: meo_sw },
});
Then change your TabNavigator to handle HomeStack
Home: {
screen: HomeStack,
navigationOptions: {
tabBarIcon: ({ tintColor }) => <Ionicons name='ios-home' size={30} color={tintColor}></Ionicons>
}
Check A stack navigator for each tab for more informations or check Complex Navigation example with react navigation.
Hope this helps you. Feel free for doubts.

Answer 3

Here is a very minimal example you can customize accordingly.
https://snack.expo.io/#raajnadar/navigate-on-press-of-image-inside-stack
Final route config
import React from 'react';
import { Image, Text, TouchableWithoutFeedback, View } from 'react-native';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { Ionicons } from '#expo/vector-icons';
import MeoSw from './MeoSw';
function HomeScreen({ navigation }) {
return (
<View>
<Text>Home Screen</Text>
<TouchableWithoutFeedback onPress={() => navigation.navigate('MeoSw')}>
<Image
source={require('./assets/snack-icon.png')}
style={{
width: 200,
height: 200,
marginTop: 40,
alignSelf: 'center',
}}
/>
</TouchableWithoutFeedback>
</View>
);
}
function ChatScreen() {
return (
<View>
<Text>Chat Screen</Text>
</View>
);
}
const Stack = createStackNavigator({
MeoSw: MeoSw
})
const AppContainer = createBottomTabNavigator(
{
Home: {
screen: HomeScreen,
navigationOptions: {
tabBarIcon: ({ tintColor }) => (
<Ionicons name="ios-home" size={30} color={tintColor} />
),
},
},
Chat: {
screen: ChatScreen,
navigationOptions: {
tabBarIcon: ({ tintColor }) => (
<Ionicons name="ios-chatboxes" size={30} color={tintColor}>
{' '}
</Ionicons>
),
},
},
Stack: Stack
},
{
defaultNavigationOptions: {
tabBarOnPress: ({ navigation, defaultHandler }) => {
if (navigation.state.key === 'Post') {
navigation.navigate('postModal');
} else {
defaultHandler();
}
},
},
tabBarOptions: {
activeTintColor: '#FFA200',
inactiveTintColor: '#B8B8C4',
showLabel: false,
},
}
);
export default createAppContainer(AppContainer);