Initial disclaimer, I'm new to react/react-native and Expo, so my code isn't the best at the moment.
So, I have a class component with a button, that is used in 2 different screens in my App and I want that button to change the current tab.
In my App.js I am creating a bottom tab bar like shown below:
import * as React from 'react';
import { Text, View, StyleSheet, ActivityIndicator } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import * as Font from 'expo-font';
//------------ Components ---------//
import HomeView from './components/HomeView.jsx';
import PesquisarView from './components/PesquisarView.jsx';
import RulesView from './components/RulesView.jsx';
import AboutView from './components/AboutView.jsx';
const Tab = createBottomTabNavigator();
export default class App extends React.Component {
state = {
assetsLoaded: false,
};
async componentDidMount() {
await Font.loadAsync({
'Amanise': require('./assets/fonts/amanise/Amanise.otf'),
'PTSans-Regular': require('./assets/fonts/PT_Sans/PTSans-Regular.ttf'),
'PTSans-Bold': require('./assets/fonts/PT_Sans/PTSans-Bold.ttf'),
});
this.setState({ assetsLoaded: true });
}
render() {
const { assetsLoaded } = this.state;
if (assetsLoaded) {
return (
<NavigationContainer>
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Home') {
iconName = focused
? 'ios-home'
: 'ios-home';
} else if (route.name === 'Search') {
iconName = focused ? 'ios-search' : 'ios-search';
} else if (route.name === 'Rules') {
iconName = focused ? 'ios-flag' : 'ios-flag';
} else if (route.name = 'About') {
iconName = focused ? 'ios-information-circle-outline' : 'ios-information-circle-outline';
}
// You can return any component that you like here!
return <Ionicons name={iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: 'lightblue',
inactiveTintColor: 'gray',
labelStyle: {
fontSize: 12,
padding: 2,
}
}}
// initialRouteName="Pesquisar"
>
<Tab.Screen name="Home" component={HomeView} />
<Tab.Screen name="Search" component={PesquisarView} />
<Tab.Screen name="Rules" component={RulesView} />
<Tab.Screen name="About" component={AboutView} />
</Tab.Navigator>
</NavigationContainer>
);
} else {
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignContent: 'center',
flexDirection: "row",
justifyContent: "space-around",
padding: 10
}}
>
<ActivityIndicator
size="large"
/>
</View>
);
}
}
}
Inside the home screen I have a component that has a Touchable inside that is suposed to change the tab to the one called "Search".
This is the Home screen
import React, { Component } from 'react';
import { Text, SafeAreaView, View, StyleSheet } from 'react-native';
//----components
import CarouselDestaque from './CarouselDestaque.jsx';
import MapZoomLocation from './MapZoomLocation.jsx';
import InputPesquisa from './InputPesquisa.jsx';
class HomeView extends Component {
constructor(props) {
super(props);
}
render() {
return (
<SafeAreaView style={styles.container}>
<View style={styles.divMapa}>
<MapZoomLocation />
</View>
<View style={styles.divDestaques}>
<InputPesquisa parent="Home" /* obterFiltro={this.getFiltros.bind(this)} */ />
<View style={styles.divTextoDestaques}>
<Text style={styles.textDestaque}>Destaques</Text>
</View>
<CarouselDestaque/>
</View>
</SafeAreaView>
);
}
The component that has the Touchable is this one:
import React, { Component } from 'react';
import { View, TextInput, TouchableHighlight, TouchableOpacity, StyleSheet } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
//----- styles
// import styles from '../styles/styles.js';
class InputPesquisa extends Component {
constructor(props) {
super(props);
this.state = {
showImage: true,
};
}
toggleImage() {
if (this.state.showImage == true) {
this.setState({ showImage: false })
} else {
this.setState({ showImage: true })
}
}
render() {
return (
<View style={styles.divPesquisa}>
<Ionicons style={styles.searchIcon} name="ios-search" size={30} color="grey" />
<TextInput
onFocus={this.toggleImage.bind(this)}
onBlur={this.toggleImage.bind(this)}
style={this.state.showImage == true && this.props.parent == 'Home' ? styles.inputPesquisaComImagem : styles.inputPesquisaSemImagem}
placeholder="Pesquisar praia"
placeholderTextColor='lightgrey'
></TextInput>
{
this.state.showImage == true && this.props.parent == 'Home' ?
<TouchableOpacity
style={styles.optionIcon}
>
<Ionicons name="ios-options" size={30} color="grey" />
</TouchableOpacity>
: null
}
</View>
);
}
So my question is, how can i change the tab I'm in after press the Touchable in the component? I've tried this solution but it dind't work.
<TouchableOpacity
style={styles.optionIcon}
onPress={() => this.props.navigation.navigate('Search')}
>
<Ionicons name="ios-options" size={30} color="grey" />
</TouchableOpacity>
Thanks in advace!
