title: Context & Provider not working - render is not a function
body: <p>Been trying many things but for I cannot get this working for the life of me. Been looking at various Context tutorials but no. Could you help me out?</p>
  
  <p>App.js</p>
  
  <pre><code>import React from 'react'
  import { createAppContainer, createSwitchNavigator } from 'react-navigation';
  import { createStackNavigator } from 'react-navigation-stack';
  import { createBottomTabNavigator } from 'react-navigation-tabs';
  import AccountScreen from './src/screens/AccountScreen'
  import SigninScreen from './src/screens/SigninScreen'
  import SignupScreen from './src/screens/SignupScreen'
  import TrackCreateScreen from './src/screens/TrackCreateScreen'
  import TrackDetailScreen from './src/screens/TrackDetailScreen'
  import TrackListScreen from './src/screens/TrackListScreen'
  import UserProvider from './src/context/appContext'
  
  
  const switchNavigator = createSwitchNavigator({
    loginFlow: createStackNavigator({
      Signup: SignupScreen,
      Signin: SigninScreen
    }),
    mainFlow: createBottomTabNavigator({
      trackListFlow: createStackNavigator({
        TrackList: TrackListScreen,
        TrackDetail: TrackDetailScreen
      }),
      TrackCreate: TrackCreateScreen,
      Account: AccountScreen
    })
  })
  
  const App = createAppContainer(switchNavigator)
  
  export default () =&gt; {
    return (
      &lt;UserProvider value={'hey'}&gt;
        &lt;App /&gt;
      &lt;/UserContext.Provider&gt;
    )
  }
  </code></pre>
  
  <p>appContext.js</p>
  
  <pre><code>import React, { createContext } from 'react'
  
  const UserContext = React.createContext()
  
  export const UserProvider = UserContext.Provider
  export const UserConsumer = UserContext.Consumer
  
  export default UserContext
  </code></pre>
  
  <p>SignupScreen.js</p>
  
  <pre><code>import React, { useState, useContext, Component } from 'react'
  import { View, StyleSheet, Button } from 'react-native'
  import { Text, Input } from 'react-native-elements'
  import Spacer from '../components/Spacer'
  import { signUpUser } from '../functions/functions.js'
  import { UserContext } from '../context/appContext.js'
  
  
  const SignupScreen = ({ navigation, value }) =&gt; {
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
  
  
    return (
    &lt;View style={styles.container}&gt;
      &lt;Spacer&gt;
        &lt;Text h3&gt;Sign up for goodgrowth&lt;/Text&gt;
      &lt;/Spacer&gt;
      &lt;Input
      label="Email"
      value={email}
      onChangeText={setEmail}
      autoCapitalize="none"
      autoCorrect={false}
      /&gt;
      &lt;Spacer /&gt;
      &lt;Input
      secureTextEntry
      label="Password"
      value={password}
      onChangeText={setPassword}
      autoCapitalize="none"
      autoCorrect={false}
      /&gt;
      &lt;Spacer&gt;
        &lt;Button
        title="Sign up"
        onPress={() =&gt; signUpUser(email, password)}
        /&gt;
        &lt;Button
        title="Sign in"
        onPress={() =&gt; navigation.navigate('Signin')}
        /&gt;
      &lt;/Spacer&gt;
    &lt;/View&gt;
    )
  }
  
  SignupScreen.navigationOptions = () =&gt; {
    return {
      header: null
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      marginBottom: 250
    }
  })
  
  export default SignupScreen
  </code></pre>
  
  <p>TypeError: render is not a function. (In 'render(newValue)', 'render' is an instance of Object).</p>
  
  <p>Why is this not working?</p>