react-navigation - navigating from child component

Question

I have a leaderboard which calls a component and passes it data to it like so:

   _renderItem =({item}) => (
    

        

Answer 1

This is a 3 page example that shows how to pass the navigate function to a child component and how to customize props send to screens from within the StackNavigator

// subcomponent ... receives navigate from parent
const Child = (props) => {
    return (
         props.navigate(props.destination) }>
            {props.text}>>>
        
    );
}
// receives navigation from StackNavigator
const PageOne = (props) => {
    return (
        
            Page One
            
        
    )
}
// receives custom props AND navigate inside StackNavigator 
const PageTwo = (props) => (
    
        {props.text}
        
    
);
// receives ONLY custom props (no nav sent) inside StackNAvigator
const PageThree = (props) => {props.text}

export default App = StackNavigator({
    pageone: { 
        screen: PageOne, navigationOptions: { title: "One" } },
    pagetwo: { 
        screen: (navigation) => , 
        navigationOptions: { title: "Two" } 
    },
    pagethree: { 
        screen: () => , 
        navigationOptions: { title: "Three" }
    },
});