How should the new context api work with React Native navigator?

Question

I created a multiscreen app using React Navigator following this example:

import {
  createStackNavigator,
} from \'react-navigation\';

const App = createStackN         


        

Answer 1

If you want the detailed tutorial you could follow the below link : Visit : https://www.thelearninguy.com/simple-react-native-context-api-detailed

A very long answer would be as follows.

import React, {Component} from 'react';
import {Text, View, Button} from 'react-native';

//make a new context
const MyContext = React.createContext();

//create provider component
class MyProvider extends Component {
    state = {
        name: "The Learnin Guy",
        age: 50
    };
    increaseAge = () => {
        this.setState({
            age: this.state.age + 1
        });
    };

    render() {
        return (
            
                {this.props.children}
            
        );
    }
}

class Person extends Component {
    render() {
        return (
            
                This is Person Component
                
                    {(context) => (
                        
                            Name: {context.state.age}
                            Age: {context.state.age}
                            
                        
                    )}
                
            
        );
    }
}

class Family extends Component {
    render() {
        return (
            
                This is Family Component
                
                    {(context) => (
                        
                            Age: {context.state.age}
                        
                    )}
                
                
            
        );
    }
}

class App extends Component {
    render() {
        return (
            
                
                    This is App Component
                    
                        {(context) => (
                            
                                Age: {context.state.age}
                            
                        )}
                    
                    
                
            
        );
    }
}

export default App;

Courtesy - https://www.thelearninguy.com