Context & Provider not working - render is not a function - reactjs

Question

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?
App.js
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 () => {
return (
<UserProvider value={'hey'}>
<App />
</UserContext.Provider>
)
}
appContext.js
import React, { createContext } from 'react'
const UserContext = React.createContext()
export const UserProvider = UserContext.Provider
export const UserConsumer = UserContext.Consumer
export default UserContext
SignupScreen.js
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 }) => {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
return (
<View style={styles.container}>
<Spacer>
<Text h3>Sign up for goodgrowth</Text>
</Spacer>
<Input
label="Email"
value={email}
onChangeText={setEmail}
autoCapitalize="none"
autoCorrect={false}
/>
<Spacer />
<Input
secureTextEntry
label="Password"
value={password}
onChangeText={setPassword}
autoCapitalize="none"
autoCorrect={false}
/>
<Spacer>
<Button
title="Sign up"
onPress={() => signUpUser(email, password)}
/>
<Button
title="Sign in"
onPress={() => navigation.navigate('Signin')}
/>
</Spacer>
</View>
)
}
SignupScreen.navigationOptions = () => {
return {
header: null
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
marginBottom: 250
}
})
export default SignupScreen
TypeError: render is not a function. (In 'render(newValue)', 'render' is an instance of Object).
Why is this not working?

Answer 1

You have exported UserProvider as a named export but you are importing as default in App.js which gives you UserContext and not UserProvider
Also your syntax of UserProvider is incorrect.
Use it like
import { UserProvider } from './src/context/appContext' // named import
...
export default () => {
return (
<UserProvider value={'hey'}>
<App />
</UserProvider>
)
}

Answer 2

Using the curly braces seemed to have done the trick! Thanks Shubham!
I also had to change the following in SignupScreen, so the other way around, from yes-curly-braces to no-curly-braces:"
import { UserContext } from '../context/appContext.js'
TO
import UserContext from '../context/appContext.js'
Because UserContext was the default export there. But it's still a React object, no? Why would it be 'undefined' if I left it in curly braces?