React-Native — How to pass parameters using react-navigation?

Question

I am trying to dynamically pass a title from a Card component to a stack that uses createMaterialTopTabNavigator(Tab). The routes are currently separated from the components and exist in a file called navigation.js. How can I pass the parameters from the component to the stack in navigation.js?

Thank you in advance.

Card.js

import React, { Component } from 'react'
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native'
import { withNavigation } from 'react-navigation'

class Card extends Component {
    static containerStyle = {
        width: 343,
        height: 281,
    }

    render() {
        const { data } = this.props
        console.log(data)
        return (
            <View style={[styles.root, this.props.style]}>
                <TouchableOpacity onPress={() => this.props.navigation.navigate('Details', { title: data.title })}>
                    <View style={styles.imgWrapper} />
                    <View style={styles.info}>
                        <View style={styles.infoLeft}>
                            <Text style={styles.title}>{data.title ? data.title : 'Title'}</Text>
                            <Text style={styles.subTitle}>{data.date ? data.date : 'Date'}</Text>
                        </View>
                        <View style={styles.infoRight}>
                            <Text style={styles.price}>{data.price ? data.price : 'Price'}</Text>
                            <Text style={styles.oldPrice}>{data.oldPrice ? data.oldPrice : 'Old price'}</Text>
                        </View>
                    </View>
                </TouchableOpacity>
            </View>
        )
    }
}

export default withNavigation(Card)

navigation.js

import React from 'react'
import { createMaterialTopTabNavigator } from 'react-navigation'
import { createStackNavigator } from 'react-navigation'

import Filter from '../screens/Filter'
import Dates from '../screens/Dates'
import Shows from '../screens/Shows'
import Details from '../screens/Details'
import ShowDetail from '../screens/ShowDetail'
import Modal from '../screens/Modal'

const Tab = createMaterialTopTabNavigator(
    {
        Details: Details,
        Book: Dates,
    },
    {
        tabBarOptions: {
            activeTintColor: 'black',
            inactiveTintColor: 'gray',
            style: {
                backgroundColor: 'white',
            },
            indicatorStyle: {
                backgroundColor: 'black',
            },
            upperCaseLabel: false,
        },
    },
)

export const MainStack = createStackNavigator(
    {
        Home: {
            screen: Shows,
            navigationOptions: {
                title: 'Shows',
            },
        },
        Details: {
            screen: Tab,
            navigationOptions: {
                title: 'Show title', // TITLE NEEDS TO COME HERE
                headerLeft: null,
            },
        },
    },
    {
        initialRouteName: 'Home',
        navigationOptions: {
            headerStyle: {
                backgroundColor: 'white',
                height: 98,
                // iOS
                borderBottomWidth: 0,
                // Android
                elevation: 0,
            },
            headerTintColor: 'black',
            headerTitleStyle: {
                fontWeight: 'bold',
            },
            headerBackTitle: null,
        },
    },
)

export default class App extends React.Component {
    render() {
        return <MainStack />
    }
}

Olusola Omosola · Accepted Answer · 2018-08-18 20:47:41Z

3

In your Details component, do this -

static navigationOptions=  ({
title: this.props.navigation.state.params.title
headerLeft: null,
})

answered Aug 18, 2018 at 20:47

Olusola Omosola

9159 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Diego Oriani Over a year ago

Thanks, Olusola. Your answer is correct if I had the navigationOptions inside a component, however that's not the case.

Diego Oriani · Accepted Answer · 2018-08-18 21:01:25Z

0

If you're using a separate file to deal with your navigation. The solution is:

    Details: {
        screen: Tab,
        navigationOptions: props => ({
            title: props.navigation.state.params.title,
        }),
    },

answered Aug 18, 2018 at 21:01

Diego Oriani

1,9275 gold badges23 silver badges36 bronze badges

Collectives™ on Stack Overflow

React-Native — How to pass parameters using react-navigation?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related