Context & Provider not working - render is not a function

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

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?

Answer 2

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>
  )
}