Add navigation to component onPress (React-Navigation) - javascript

In my app I have a FlatList component which renders the component below (effectively a row with small snippets of information), I'd like to have it so that I can click on each component within the FlatList which then takes the user to another screen which provides more details.
I've managed to make it so that each component is clickable and I can make it perform an alert() to show that it is clickable, but using React-Navigation is proving a tad tricky for me to add.
FlatList page:
/* #flow*/
import _ from 'lodash'
import {getAllQuestions} from './questionRepository'
import ProfilePicture from './components/ProfilePicture'
import QuestionerAndQuestion from './questionRow/QuestionerAndQuestion'
import Separator from './components/Separator'
import {Button, FlatList} from 'react-native'
import React, {Component} from 'react'
export default class QuestionList extends Component {
static navigationOptions = ({navigation}) => ({
title: 'AIBU',
headerRight: (
<Button
onPress={_.debounce(() => {
navigation.navigate('Add')
}, 500)}
title="Add"
/>
),
headerStyle: {
backgroundColor: 'rgb(245, 245, 245)',
},
headerLeft: <ProfilePicture size={'small'} />,
})
state = {questions: []}
componentDidMount() {
this.getData()
}
async getData() {
const questions = await getAllQuestions()
this.setState({questions})
}
render() {
return (
<FlatList
ItemSeparatorComponent={Separator}
data={this.state.questions}
renderItem={({item}) => <QuestionerAndQuestion item={item} />}
/>
)
}
}
QuestionerAndQuestion component:
/* #flow */
import ProfilePicture from '../components/ProfilePicture'
import React from 'react'
import TextContainer from './TextContainer'
import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native'
const styles = StyleSheet.create({
row: {
backgroundColor: 'rgb(255, 255, 255)',
height: 125,
flex: 1,
flexDirection: 'row',
},
profilePic: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
},
textBody: {
flex: 6,
},
})
const QuestionerAndQuestion = ({item}: {item: Object}) =>
<TouchableWithoutFeedback onPress={() => navigate would go here?}>
<View style={styles.row}>
<View style={styles.profilePic}>
<ProfilePicture />
</View>
<View style={styles.textBody}>
<TextContainer item={item} />
</View>
</View>
</TouchableWithoutFeedback>
export default QuestionerAndQuestion

I assume you navigated to the QuestionList component, therefore, you have the navigation object on there. What you would want to do is pass the navigation down to the QuestionerAndQuestion as a prop and then you can access it from onPress as a prop.
Something like this:
<QuestionerAndQuestion item={item} navigation={this.props.navigation} />
Hope this helps

This solved my issue.
Within QuestionList
render() {
const navigation = this.props.navigation
return (
<FlatList
ItemSeparatorComponent={Separator}
data={this.state.questions}
renderItem={({item}) =>
<QuestionerAndQuestion item={item} onPress={() => navigation.navigate('Question')} />}
/>
)
}
Within QuestionerAndQuestion
const QuestionerAndQuestion = ({item, onPress}: {item: Object, onPress: Object}) =>
<TouchableWithoutFeedback onPress={onPress}>

Related

'Hamburger' icon isn't opening or closing the component - React Navigation V6

Would anyone be able to give me help regarding React Navigation with Expo? The issue is with the drawer component where the 'Hamburger' icon isn't opening or closing the component when a user presses the icon. However, it does open/close on a default swipe gesture from React Navigation. Please see below for my code:
Router:
import React from 'react';
import { NavigationContainer, DrawerActions } from '#react-navigation/native';
import { createDrawerNavigator } from '#react-navigation/drawer';
import { IconButton } from 'react-native-paper'
import i18n from '../i18n/i18n';
//Theme
import Theme from '../theme/theme'
//Components
import Menu from '../components/Menu'
//Import Interfaces
import { RootDrawerParamList } from '../utils/typescript/type.d';
import { IProps } from '../utils/typescript/props.d';
//Import Screens
import Screen1 from '../screens/Screen1';
import Screen2 from '../screens/Screen2';
import SettingsScreen from '../screens/Settings';
const Drawer = createDrawerNavigator<RootDrawerParamList>();
export default class Router extends React.Component<IProps, any> {
constructor(props: IProps) {
super(props);
}
render() {
return (
<NavigationContainer>
<Drawer.Navigator
initialRouteName='Screen1'
drawerContent={(props: any) => <Menu {...props} />}
screenOptions={({
swipeEnabled: true
})}>
<Drawer.Screen
name="Screen1"
component={Screen1}
initialParams={{ i18n: i18n, Theme: Theme }}
options={({route, navigation} : any) => ({
headerRight: () => (<IconButton icon="cog" size={24} color={Theme.colors.text} onPress={() => navigation.navigate('Settings')} />),
route: {route},
navigation: {navigation}
})}
/>
<Drawer.Screen
name="Settings"
component={SettingsScreen}
initialParams={{ i18n: i18n, Theme: Theme }}
options={({route, navigation} : any) => ({
headerTitle: i18n.t('settings', 'Settings'),
headerLeft: () => (<IconButton icon="arrow-left" color={Theme.colors.text} size={24} onPress={() => navigation.goBack()} />),
route: {route},
navigation: {navigation}
})}
/>
<Drawer.Screen
name="Screen2"
component={Screen2}
initialParams={{ i18n: i18n, Theme: Theme }}
options={({route, navigation} : any) => ({
route: {route},
navigation: {navigation}
})}
/>
</Drawer.Navigator>
</NavigationContainer>
);
}
}
Menu
import React from 'react';
import { FlatList, StyleSheet, View } from 'react-native';
import { List, Title } from 'react-native-paper';
import { getDefaultHeaderHeight } from '#react-navigation/elements';
import { DrawerItem } from '#react-navigation/drawer';
import { useSafeAreaFrame, useSafeAreaInsets } from 'react-native-safe-area-context';
//Import Interfaces
import { IListItem } from '../utils/typescript/types.d';
import { IPropsMenu } from '../utils/typescript/props.d';
import { IStateMenu } from '../utils/typescript/state.d';
//A function is used to pass the header height, using hooks.
function withHeightHook(Component: any){
return function WrappedComponent(props: IPropsMenu) {
/*
Returns the frame of the nearest provider. This can be used as an alternative to the Dimensions module.
*/
const frame = useSafeAreaFrame();
/*
Returns the safe area insets of the nearest provider. This allows manipulating the inset values from JavaScript. Note that insets are not updated synchronously so it might cause a slight delay for example when rotating the screen.
*/
const insets = useSafeAreaInsets();
return <Component {...props} headerHeight={getDefaultHeaderHeight(frame, false, insets.top)} />
}
}
class Menu extends React.Component<IPropsMenu, IStateMenu> {
constructor(props: IPropsMenu) {
super(props);
this.state = {
menu: [
{
name: 'screen1.name',
fallbackName: 'Screen 1',
icon: 'dice-multiple-outline',
iconFocused: 'dice-multiple',
onPress: this.props.navigation.navigate.bind(this, 'screen1')
},
{
name: 'screen2.name',
fallbackName: 'Screen 2',
icon: 'drama-masks',
iconFocused: 'drama-masks',
onPress: this.props.navigation.navigate.bind(this, 'screen2')
}
]
}
}
renderItem = (item : IListItem) => {
const { i18n } = this.props.state.routes[0].params;
return (
<DrawerItem
label={ i18n.t(item.name, item.fallbackName) }
onPress={ item.onPress ? item.onPress: () => {} }
icon={ ({ focused, color, size }) => <List.Icon color={color} style={[styles.icon, {width: size, height: size }]} icon={(focused ? item.iconFocused : item.icon) || ''} /> }
/>
);
};
render() {
const { headerHeight } = this.props;
const { menu } = this.state;
const { Theme } = this.props.state.routes[0].params;
return (
<View>
<View style={{
backgroundColor: Theme.colors.primary,
height: headerHeight ?? 0,
}}>
<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-end',
}}>
<View style={{
flexDirection: 'row',
alignItems: 'center',
marginBottom: 5,
marginLeft: 5
}}>
<Title style={{ color: Theme.colors.text, marginLeft: 5 }}>
Title
</Title>
</View>
</View>
</View>
<FlatList
data={menu}
keyExtractor={item => item.name}
renderItem={({item}) => this.renderItem(item)}
/>
</View>
);
};
}
export default withHeightHook(Menu);
const styles = StyleSheet.create({
icon: {
alignSelf: 'center',
margin: 0,
padding: 0,
height:20
},
logo: {
width: 24,
height: 24,
marginHorizontal: 8,
alignSelf: 'center'
},
});
The solution to my issue was to encapsulate the drawer component in a native stack component. The 'Hamburger' icon works as expected, thanks for all the help and suggestions.
// Import Screens
import DrawRouter from './DrawRouter';
const Stack = createNativeStackNavigator<RootStackParamList>();
export default (): React.ReactElement => {
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{ headerShown: false }}>
<Stack.Screen name="Main" component={DrawRouter} />
</Stack.Navigator>
</NavigationContainer>
);
};
Add the toogleDrawer() method to your onPress event on your Drawer.Navigator component:
onPress={()=> navigation.toggleDrawer()

React Native ScrollView component onScroll prop function is delayed

I am using react-native-paper library to add a floating action button (FAB) which changes its width based on the scroll direction of the user.
What it's supposed to do -
If the user is scrolling upward expand the FAB instantly and contract on scrolling downward.
What's happening -
It is giving me the desired results but for some reason its take 3-4 seconds for the effect to take place.
Code -
import React from "react";
import { SafeAreaView, ScrollView } from "react-native";
import { AnimatedFAB } from "react-native-paper";
import Carousel from "../../components/carousel";
import Slider from "../../components/slider";
const HomePage = () => {
const [isExtended, setIsExtended] = React.useState(true);
function onScroll({ nativeEvent }: any) {
const currentScrollPosition =
Math.floor(nativeEvent?.contentOffset?.y) ?? 0;
setIsExtended(currentScrollPosition <= 0);
}
const categories = [
"Fruits",
"Cars",
"Places",
"Brands",
"Colors",
"Shapes",
"Sizes",
"Names",
];
return (
<SafeAreaView>
<ScrollView onScroll={onScroll}>
<Carousel />
{categories.map((item, index) => (
<Slider key={index} title={item} />
))}
</ScrollView>
<AnimatedFAB
style={{
position: "absolute",
bottom: 20,
right: 20,
}}
icon="filter-variant"
label="Filter"
animateFrom="right"
extended={isExtended}
onPress={() => console.log("Pressed")}
/>
</SafeAreaView>
);
};
export default HomePage;
Here is how the Sliders/Carousel looks [they share similar code]
import React from "react";
import { FlatList, StyleSheet, View, SafeAreaView } from "react-native";
import { Text } from "react-native-paper";
import data from "../../../data";
import Card from "../card";
const Slider = ({ title }: any) => {
const renderItem = ({ item }: any) => <Card item={item} />;
return (
<SafeAreaView>
<View style={styles.container}>
<Text style={styles.itemTitle}>{title}</Text>
<FlatList
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
horizontal
data={data}
renderItem={renderItem}
keyExtractor={(_, index) => index.toString()}
/>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
margin: 20,
},
itemTitle: {
color: "#fff",
marginBottom: 20,
fontSize: 20,
fontWeight: "500",
},
title: {
fontSize: 32,
},
});
export default Slider;
Solutions i tried -
I tried using the useEffect hook but didn’t notice a significant change.
I tried using the Flatlist component but the issue remains the same.
You can add scrollEventThrottle={16} prop to ScrollView or FlatList

Unable to use onPress for navigation inside of nested Screen React Native

Let me begin by saying that I am fairly new to React Native. I have an AppNavigation.js component that holds nested functions for swapping tabbed views using createBottomTabNavigator() -- The issue I am having, is I cannot use a button that I created inside of one of the nested components for the Dashboard Screen. Its stating that my hook is being incorrectly used. I tried numerous approaches from stack overflow sources. Yet, I cannot get the button to navigate to the view after clicking it. How do I navigate to other components while using a nested component for the Screen component?
ERROR:
ReferenceError: Can't find variable: navigation
ProfileCard.js
import React, {Component} from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Dimensions, Image, AsyncStorage} from 'react-native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import axios from 'axios'
class ProfileCard extends Component {
constructor(props) {
super(props);
this.survey_form = {};
this.state = {
hasSurveyProfile: false
};
}
componentDidMount() {
this.getToken()
.then(obj => axios.get(`http://127.0.0.1:3000/api/v1/check_for_survey_form/${obj.user_id}`, {headers: {Accept: 'application/json', 'X-User-Email': `${obj.email}`, 'X-User-Token': `${obj.authentication_token}`}}))
.then(response => {
this.setState({survey_form: JSON.stringify(response.data)});
this.setState({hasSurveyProfile: true});
})
.catch(error => {
if (error.response.status == 404) {
this.setState({hasSurveyProfile: false})
}
});
}
async getToken(user) {
try {
/////
} catch (error) {
console.log("Something went wrong", error);
}
}
render() {
const { navigation } = this.props;
return(
<View style={{paddingVertical: 5, paddingHorizontal: 5}}>
<View style={{backgroundColor: '#fff', width: Dimensions.get('window').width * .9, minHeight: 50, padding: 2, borderColor: 'gray', borderRadius: 4, borderWidth: 1}}>
<View style={{flexDirection: "row"}}>
<View style={{flex: 1}}>
<Text style={{textAlign: 'center', fontWeight: '500', fontSize: 16}}>Survey Profile</Text>
<Text style={{textAlign: 'center', fontSize: 10}}>Complete your Survey!</Text>
{
(this.state.hasSurveyProfile == false)
? <TouchableOpacity style={styles.buttoncontainer} onPress={() => navigation.navigate('StartSurvey')}>
<Text style={styles.buttontext}>Start Survey</Text>
</TouchableOpacity>
: <TouchableOpacity style={styles.buttoncontainer}>
<Text style={styles.buttontext}>Edit Survey</Text>
</TouchableOpacity>
}
</View>
</View>
</View>
</View>
)
}
}
export default ProfileCard;
AppNavigation.js
import React from 'react'
import { Text, TouchableOpacity, Image, View } from 'react-native'
import {NavigationContainer} from '#react-navigation/native';
import {createBottomTabNavigator} from '#react-navigation/bottom-tabs'
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import ProfileCard from '../containers/UserProfileCard';
function DashboardScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<View style={{flex: 1, alignItems: 'center'}}>
<ProfileCard />
</View>
</View>
);
}
function MessagesScreen() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Messages!</Text>
</View>
);
}
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Tab.Navigator>
<Tab.Screen
name="Dashboard"
component={DashboardScreen}
options={{
tabBarLabel: 'Dashboard',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="home" color={color} size={26} />
),
}}
/>
<Tab.Screen
name="Messages"
component={MessagesScreen}
options={{
tabBarLabel: 'Messages',
tabBarIcon: ({ color }) => (
<MaterialCommunityIcons name="email-outline" color={color} size={26} />
),
}}
/>
</Tab.Navigator>
);
}
export default function AppNavigation() {
return (
<NavigationContainer>
<MyTabs />
</NavigationContainer>
);
}
StartSurvey.js (Unable to get here from button click)
import React, {Component} from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Dimensions, Image, AsyncStorage} from 'react-native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'
import axios from 'axios';
import { initMiddleware } from 'devise-axios'
initMiddleware({storage: AsyncStorage})
class StartSurvey extends Component {
constructor(props) {
super(props);
this.state = {
user_id: ''
}
}
componentDidMount() {
this.getToken()
.then(obj => axios.get(`http://127.0.0.1:3000/api/v1/retrieve_user/${obj.user_id}`, {headers: {Accept: 'application/json', 'X-User-Email': `${obj.email}`, 'X-User-Token': `${obj.authentication_token}`}}))
.then(response => {
this.setState({ user: JSON.stringify(response.data)});
this.setState({user_id: JSON.parse(this.state.user).id.toString()})
})
.catch(error => {
console.error(error);
});
}
async getToken(user) {
try {
let userData = await AsyncStorage.getItem("userData");
let data = JSON.parse(userData);
let user = JSON.parse(data)
let userObj = {user_id: JSON.stringify(user.data.data.id), email: JSON.stringify(user.data.data.email), authentication_token: JSON.stringify(user.data.data.authentication_token)}
return userObj
} catch (error) {
console.log("Something went wrong", error);
}
}
render() {
return(
<View style={{paddingVertical: 5, paddingHorizontal: 5}}>
<View style={{backgroundColor: '#fff', width: Dimensions.get('window').width * .9, minHeight: 50, padding: 2, borderColor: 'gray', borderRadius: 4, borderWidth: 1}}>
<Text>Hello Survey!</Text>
</View>
</View>
)
}
}
export default StartSurvey;
So it doesn't look like you're actually passing the navigation prop into the <ProfileCard /> component.
You can pass the navigation function to the <DashboardScreen /> component.
Then inside of the <DashboardScreen /> component, you can pass the same navigation function to the <ProfileCard /> component.
So the code ends up looking something like:
<DashboardScreen navigation={navigation} />
Later on...
<ProfileCard navigation={navigation} />
EDIT:
You'll likely need to change the way you're passing the <DashboardScreen /> component to the <Tab.Screen> component, making it a child of <Tab.Screen>
Something that looks like:
<Tab.Screen>
// Your other props here...
<DashboardScreen navigation={navigation} />
</Tab.Screen>

React Navigation 5: Fixing headerRight Spacing

This is what my header looks like now:
And this is what I am trying to achieve:
Code snippet:
<Stack.Navigator initialRouteName="MenuRoute">
<Stack.Screen
name={'MenuRoute'}
component={Menu}
options={({navigation, route}) => ({
headerTitle: () => (
<Text
style={{
...styles.headerTitle,
}}>
<Translatable value="Menu" />
</Text>
),
headerLeft: () => <AuthMenuPicker {...navigation} {...route} />,
headerRight: () => (
<View style={styles.row}>
<FacebookButton {...navigation} {...route}/>
<LanguagePicker />
</View>
),
headerStyle,
})}
/>
.....
.....
.....
</Stack.Navigator>
const styles = StyleSheet.create({
row: {
flexDirection: 'row',
}
});
How can I move the Facebook Logo towards the right side (as shown in the image)?
I have tried marginLeft and paddingLeft but nothing seems to do the trick.
All help would be appreciated as I am new with this issue and with react navigation 5 in general.
UPDATE#1:
Added borderWidth:1 and borderColor: 'red' to clearly show the headerLeft area:
const styles = StyleSheet.create({
row: {
flexDirection: 'row',
borderWidth: 1,
borderColor: 'red',
}
});
UPDATE#2 - Added component code snippets:
Code Snippet (FacebookButton component):
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { Button } from 'react-native-paper';
import Entypo from 'react-native-vector-icons/Entypo';
import {FACEBOOK} from '../constants';
class FacebookButton extends Component {
constructor(props) {
super(props);
}
componentDidMount() { }
render() {
return (
<>
<Button
//onPress={() => alert()}
onPress={() => {
this.props.navigate(
'FacebookMenuWebviewRoute',
{
url: FACEBOOK.FACEBOOK_PAGE,
},
);
}}
>
<Entypo
name="facebook"
size={this.props.iconSize || 25}
style={{ ...styles.icon, ...this.props.iconStyle }}
/>
</Button>
</>
);
}
}
export const styles = StyleSheet.create({
icon: {
color: 'white',
},
});
export default FacebookButton;
Code snippet (LanguagePicker component):
import React, {Component} from 'react';
import {StyleSheet} from 'react-native';
import {Menu, Button, withTheme} from 'react-native-paper';
import Fontisto from 'react-native-vector-icons/Fontisto';
import {IntlContext} from '../utility/context/Internationalization';
class LanguagePicker extends Component {
...
...
...
renderPicker() {
return (
<IntlContext.Consumer>
{(context) => {
return (
<Menu
visible={this.state.showMenu}
onDismiss={() => this.showMenu(false)}
anchor={
<Button
onPress={() => this.showMenu(true)}
style={{
...styles.menuButton,
...this.props.menuButtonStyle,
}}>
<Fontisto
name="earth"
size={this.props.iconSize || 25}
style={{...styles.icon, ...this.props.iconStyle}}
/>
</Button>
}>
{this.renderPickerItems(context)}
</Menu>
);
}}
</IntlContext.Consumer>
);
}
render() {
return <>{this.renderPicker()}</>;
}
}
export const styles = StyleSheet.create({
menuButton: {},
icon: {
color: 'white',
},
});
export default withTheme(LanguagePicker);
Thank you #GuruparanGiritharan for pointing out about the wrappers.
Solution:
Code snippet FacebookButton component:
<TouchableOpacity
style={{ justifyContent: 'center' }}
onPress={() => { ... }
>
<Entypo
name="facebook"
size={this.props.iconSize || 25}
style={{ ...styles.icon, ...this.props.iconStyle }}
/>
</TouchableOpacity>
New Header:
Explanation:
I was using Button component from react-native-paper and the component had its own fixed spacing. This caused the Facebook icon to be too spaced out.
Thus, removing the Button component and simply adding TouchableOpacity from react-native helped to reduce the space between the two icons on the header.

Passing onPress redirect to child component React Native

I am struggling a little bit. I have tried to create more components for my React native app but after I did it my ButtonSaving stoped redirecting to Dashboard for some reason. I was trying some ways to pass onRowPress to component but without luck. What do I do incorrectly here please?
Login button is working fine => redirecting to Dashboard
ButtonSaving not working at all => should redirect to Dashboard
AppNavigator.js
import { createStackNavigator } from 'react-navigation-stack'
import { createAppContainer } from 'react-navigation';
import Homepage from './components/Homepage/Homepage';
import Dashboard from './components/Dashboard/Dashboard';
const AppNavigator = createStackNavigator({
Homepage: Homepage,
Dashboard: { screen: Dashboard},
},
{
initialRouteName: 'Homepage',
defaultNavigationOptions: {
headerStyle: {
backgroundColor: 'white',
opacity: 70,
borderBottomColor: 'white',
borderColor: 'white'
},
headerTintColor: 'black',
headerTitleStyle: {
fontWeight: 'bold'
}
}
}
);
const Container = createAppContainer(AppNavigator);
export default Container;
Homepage.js
import React from 'react';
import { StyleSheet, Text, View, Button, Image } from 'react-native';
import {NavigationActions} from 'react-navigation';
// COMPONENTS
import ButtonSaving from './ButtonSaving/ButtonSaving';
class Homepage extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoading: false
},
this.handleClick = this.handleClick.bind(this);
this.onRowPress = this.onRowPress.bind(this);
}
handleClick() {
const counterApp = this.state.counter;
this.setState({
counter: counterApp + 1,
dashboard: 'Dashboard'
})
}
onRowPress = ({ navigation }) => {
this.props.navigation.navigate(this.state.dashboard);
}
render() {
return(
<View style={styles.container}>
{/* LOGIN BUTTON */}
<View style={styles.buttonContainer}>
<View style={styles.buttonLogin}>
<Button title="log in"
color="white"
onPress={() => this.props.navigation.navigate('Dashboard')}/>
</View>
</View>
{/* LOGO CONTAINER */}
<View style={styles.logoContainer}>
<Image
style={{height: 147, width: 170}}
source= {require('./REACT_NATIVE/AwesomeProject/logo.png')}
></Image>
</View>
{/* EXPLAINATION OF WALT */}
<Text style={styles.textContainer}>Lorem ipsum lorem upsum></Text>
{/* Needs to be refactored to VIEW */}
<ButtonSaving onPress={() => this.onRowPress}/>
</View>)
}
ButtonSaving.js
import React from 'react';
import { StyleSheet, Text, View, Button, Image, TouchableOpacity } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
class ButtonSaving extends React.Component {
constructor(props) {
super(props);
this.state = {
},
this.onRowPress = this.onRowPress.bind(this);
}
onRowPress = ({ navigation }) => {
this.props.navigation.navigate(this.state.dashboard);
}
render(){
return(
<View style={styleButton.container}>
<LinearGradient
colors={[
'#00b38f',
'#7dcf5a'
]}
style={styleButton.opacityContainer}>
<TouchableOpacity>
<Button
title="Start Saving"
color='white'
onPress={this.onRowPress}/>
</TouchableOpacity>
</LinearGradient>
</View>
)
}
}
const styleButton = StyleSheet.create({
container: {
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
width: '100%',
height: 50,
justifyContent: 'center',
marginTop: '39%'
},
opacityContainer: {
height: 48,
borderRadius: 25,
backgroundColor: 'darkgreen',
width: '70%',
justifyContent: 'center',
alignItems: 'center'
}
})
export default ButtonSaving;
You miss to put dashboard in your state in ButtonSaving.js
In Homepage.js when your are calling handleClick ?. Dunno how you got that working...
You say in the onRowPress this:
this.props.navigation.navigate(this.state.dashboard);
but I don't see anywhere that you set this.state.dashboard.
Probabbly you missed set it up.
It was simple refactor and this helped!
<ButtonSaving navigation ={this.props.navigation}/>
I will update solution for others later.
There is no point to save "dashboard" in the Homepage state or the ButtonSaving state.
In Homepage.js you don't need to pass onPress to ButtonSaving
...
<ButtonSaving navigation={this.props.navigation}/>
...
Next in ButtonSaving.js
onRowPress = () => {
this.props.navigation.navigate('Dashboard');
}

Categories