1

I have a FlatList that would render 3 rows of data containing the respective dataSource. In this example, I have created 3 rows of Feedback data.

I would like to pass the feedbackLogId of the row I pressed to another screen, which will show in depth details of the Feedback according to the feedackLogId.

FeedbackLogs.js

This is how the data looks like that will generate three FlatList rows. since the data is fetched, it is set to the state of dataSource.

dataSource = [{
  "feedbackLogId": 1,
  "name": "Test1",
  "comment": "Hello",
}, {
  "feedbackLogId": 2,
  "name": "Test2",
  "type": "Hi",
}, {
  "feedbackLogId": 3,
  "name": "Test3",
  "type": "Morning",
}]

This is the onPress method of my FlatList where it would navigate me to the details screen.

onPress={() => this.navigateFeedbackDetails()>

Upon pressing the button, navigateFeedbackDetails will be called.

navigateFeedbackDetails = () => {
    this.setState({
      feedbackLogId: this.state.dataSource[0].feedbackLogId
    }, () => this.props.navigation.navigate('FeedbackDetails', {value: this.state.feedbackLogId}))
  }

FeedbackDetails.js

The problem lies here where I would be successfully navigated to FeedbackDetails screen. Here, I would import { NavigationEvents } from 'react-navigation' for me to be able to access NavigationEvents. Then in render,

render() {
        willFocusAction = (payload) => {
            let params = payload.state.params;
            let value = params.value;
            this.setState({ feedbackId: value });
            console.log(this.state.feedbackId);
        }
        
        return (
            <View style={styles.container}>
                <NavigationEvents
                    onWillFocus={this.willFocusAction}
                />
                <View style={styles.listView}>
                  <Text style={styles.label}>Name </Text>
                  <Text style={[styles.name, styles.name]}>{this.state.feedbackId}</Text>
                </View>
            </View>
    )
}

I am not able to console.log the data, as well as show the state of the feedbackId, it just give me no response at all. I have also updated react-navigation as some say that it could be causing the problem. I am still unable to solve the problem and any help would be greatly appreciated. Thank you!

Edit:

This might be an issue with my navigation as my FeedbackLogs screen is inside a TopTabNavigator.

This will help create 2 tabs on top of the screen for me to switch between Logs and Pending pages. Since I also have a bottomTabNavigator, this is the only way that could be done.

const HomeTopTabNavigator = createMaterialTopTabNavigator({
//Feedback Details will be called on both screens in the future but I am testing on Pending for now
  Logs: {
    screen: Logs
  },
  Pending: {
    screen: Pending,
  }

After creating the TopTab, I store the screens inside the HomeStack. It is also where I call the FeedbackDetails screen as well.

const HomeStack = createStackNavigator({
  HomeTopTabNavigator: HomeTopTabNavigator,
  FeedbackDetails: {
    screen: FeedbackDetails
  }
})

I am unsure whether this calling the screen here would mess up the passing of data, hence I would like to leave this here. Thank you for your help!

Community
  • 1
  • 1
Min UD
  • 99
  • 1
  • 1
  • 12
  • in the render method, you console.log(this.state.feedbackId). What comes out when you console.log(payload)? – Cory Baker Jan 22 '20 at 20:05
  • Did you make sure that you are sending the expected data through navigation? I mean, I don't think `this.state.feedbackLogId` is being updated before navigating. I'd rather send `this.state.dataSource[0].feedbackLogId` instead – Ian Vasco Jan 22 '20 at 20:06
  • Side Note: setState is asynchronous. So setting and logging state right after might not work. you can add a callback to the second param of setState like in https://stackoverflow.com/a/40408976/1309377 and then call the console log there. This assumes you have the right state variable being set. – Andrew Lohr Jan 22 '20 at 20:18
  • @CoryBaker the terminal is not displaying anything when im console.log() them. I feel like ```willFocusAction``` is not being called at all. – Min UD Jan 22 '20 at 20:23
  • Is it possible that I might have messed up the screens in Navigation.js as I am working with around 10 screens with different navigators such as Drawer, BottomTab, TabNavigators and Stacks. – Min UD Jan 22 '20 at 20:26
  • I've also edited the question to include how i made my navigation. This could be one of the mistakes that I have made. Thank you. – Min UD Jan 22 '20 at 20:45

1 Answers1

0

You can access params using navigation.getParam/navigation.state.params.

When yo do:

navigation.navigate('FeedbackDetails', {value: this.state.feedbackLogId}))

You can access it in FeedbackDetails screen like:

const value = navigation.getParam('value')

NavigationEvents is unrelated to params.

satya164
  • 9,464
  • 2
  • 31
  • 42