Ad

How To Pass Navigation Props To React Arrow Function Outside Of Default Class That Returns Text With On Press Navigation

React Native Expo App:

In render of my default class I map from an array that calls an arrow function outside of the class to return a line of text for each object. I would like to pass the navigation prop through so that on press of that text will navigate to another screen.

My navigation is set up correct as it is called from a touchable opacity elsewhere in render to navigate to another screen.

I have stripped this back quite a bit but hopefully enough to explain:

const CustomDialogContent = ({name, ip, navigate}) => {
    return (
        <Text onPress={navigate('Webview')}>
            {name} ({ip})
        </Text>
    )
}

export default class HomeScreen extends React.Component { 
    constructor(props) {
        super(props);
        this.state ={
            devices: [],
            name: '',
            ip: '',
        };
    }
    static navigationOptions = {
        title: 'App',
    };
    render() {
        const {navigate} = this.props.navigation;
        return (   
            <View style={container}>
                <Dialog                   
                    <DialogContent>
                        {this.state.devices.map((device) => {
                            return (
                                <CustomDialogContent name={device.name} ip={device.ip} navigation={navigate}/>
                            );}
                    </DialogContent>
                </Dialog>
            </View>
        );
    }
}

Instead of taking me to the screen I get navigate is undefined. I have also tried this which threw undefined is not an object:

const CustomDialogContent = ({name, ip}) => {
    const {navigate} = this.props.navigation;
    return (
        <Text onPress={navigate('Webview')}>
            {name} ({ip})
        </Text>
    )
}

I then tried this which returned navigate is not a function:

const CustomDialogContent = ({name, ip, navigate}) => {
    return (
        <Text onPress={() => {navigate('Webview')}}>
            {name} ({ip})
        </Text>
    )
}

Apologies if I am missing something quite basic I am a junior and completely new to react

Final solution with credit to @LonelyCpp:

const CustomDialogContent = props => {
    return (
      <Text onPress={() => {props.navigation('Webview');}}>
        {props.name} ({props.ip}) 
      </Text>
    );
};

<CustomDialogContent name={device.name} ip={device.ip} navigation={navigate}/>
Ad

Answer

props are like variable assignments. You've done navigation={navigate} which means in CustomDialogContent gets the function as props.navigation

this should work -

const CustomDialogContent = (props) => {
    const navigate = props.navigation; // no {}
    return (
        <Text onPress={()=>navigate('Webview')}>
            {name} ({ip})
        </Text>
    )
}

edit : removed this since its a functional component

Ad
source: stackoverflow.com
Ad