title: Fixing React Native error - undefined is not an object (evaluating '_useContext.state')
body: <p>I am trying to implement a context to save some information in a react native application and I keep getting a red error screen when navigating to that page. The error message I keep getting is <em>undefined is not an object (evaluating '_useContext.state')</em> - there might be something that I am overlooking here, any help is appreciated. </p>
  
  <p>**This is the createDateContext **</p>
  
  <pre><code>
  export default (reducer, actions, defaultValue) =&gt; {
    const Context = React.createContext();
  
    const Provider = ({ children }) =&gt; {
      const [state, dispatch] = useReducer(reducer, defaultValue);
  
      const boundActions = {};
      for (let key in actions) {
        boundActions[key] = actions[key](dispatch);
      }
  
      return (
        &lt;Context.Provider value={{ state, ...boundActions }}&gt;
          {children}
        &lt;/Context.Provider&gt;
      );
    };
  
    return { Context, Provider };
  };
  </code></pre>
  
  <p><strong>This is the context file</strong></p>
  
  <pre><code>
  const certificateReducer = (state, action) =&gt; {
    switch (action.type) {
      case 'change_title':
        return { ...state, title: action.payload };
      case 'change_description':
        return { ...state, description: action.payload };
      case 'change_phoneNumber':
        return { ...state, phoneNumber: action.payload };
      case 'change_image':
        return { ...state, changeImage: action.payload };
      case 'add_completed_date':
        return { ...state, completedDate: action.payload };
      case 'add_expiration_date':
        return { ...state, expirationDate: action.payload };
      default:
        return state;
    }
  };
  
  const changeTitle = dispatch =&gt; title =&gt; {
    dispatch({ type: 'change_title', payload: title });
  };
  
  const changeDescription = dispatch =&gt; description =&gt; {
    dispatch({ type: 'change_description', payload: description });
  };
  
  const changePhoneNumber = dispatch =&gt; phoneNumber =&gt; {
    dispatch({ type: 'change_phoneNumber', payload: phoneNumber });
  };
  
  const changeCompletedDate = dispatch =&gt; completedDate =&gt; {
    dispatch({ type: 'add_completed_date', payload: completedDate });
  };
  
  const changeExpirationDate = dispatch =&gt; expirationDate =&gt; {
    dispatch({ type: 'add_expiration_date', payload: expirationDate });
  };
  
  export const { Context, Provider } = createDataContext(
    certificateReducer,
    {
      changeTitle,
      changeDescription,
      changeImage,
      changePhoneNumber,
      changeCompletedDate,
      changeExpirationDate
    },
    {
      title: '',
      description: '',
      image: '',
      phoneNumber: '',
      completedDate: '',
      expirationDate: ''
    }
  );
  </code></pre>
  
  <p><strong>this is my save hook</strong></p>
  
  <pre><code>import { Context as CertificationContext } from '../context/CertificationContext';
  import { Context as CertificateInfoContext } from '../context/CertificateInfoContext';
  import { navigate } from '../navigationRef';
  
  export default () =&gt; {
    const { createCertification } = useContext(CertificationContext);
    const {
      state: {
        title,
        description,
        image,
        phoneNumber,
        completedDate,
        expirationDate
      }
    } = useContext(CertificateInfoContext);
  
    const saveCertification = async () =&gt; {
      await createCertification(
        title,
        description,
        image,
        phoneNumber,
        completedDate,
        expirationDate
      );
      navigate('List');
    };
  
    return [saveCertification];
  };
  </code></pre>
  
  <p><strong>This is the form component for saving the data</strong></p>
  
  <pre><code>import { StyleSheet, TextInput, Text, View, Button } from 'react-native';
  import ImageUpload from '../components/ImageUpload';
  import DatePicker from '../components/DatePicker';
  import ToggleForm from '../components/ToggleForm';
  import { Context as CertificateInfoContext } from '../context/CertificateInfoContext';
  import useSaveCertification from '../hooks/useSaveCertification';
  
  const CertificationForm = () =&gt; {
    const {
      state: {
        title,
        description,
        image,
        phoneNumber,
        completedDate,
        expirationDate
      },
      changeTitle,
      changeDescription,
      changeImage,
      changePhoneNumber,
      changeCompletedDate,
      changeExpirationDate
    } = useContext(CertificateInfoContext);
    const [saveCertification] = useSaveCertification();
    const [showCompleted, setCompletedShow] = useState(false);
    const [showExpiration, setExpirationShow] = useState(false);
  
    return (
      &lt;View style={{ backgroundColor: '#eff1f8', height: '100%' }}&gt;
        &lt;TextInput
          autoCapitalize='none'
          autoCorrect={false}
          style={styles.inputStyle}
          placeholder='Title'
          value={title}
          onChangeText={changeTitle}
        /&gt;
  
        &lt;TextInput
          autoCapitalize='none'
          autoCorrect={false}
          style={styles.descriptionStyle}
          placeholder='Description'
          value={description}
          multiline={true}
          onChangeText={changeDescription}
        /&gt;
  
        &lt;DatePicker
          name='Completed Date'
          dateVal='completedDate'
          date={completedDate}
          setDate={changeCompletedDate}
          show={showCompleted}
          setShow={setCompletedShow}
        /&gt;
        &lt;DatePicker
          name='Expiration Date'
          dateVal='expirationDate'
          date={expirationDate}
          setDate={changeExpirationDate}
          show={showExpiration}
          setShow={setExpirationShow}
        /&gt;
  
        &lt;TextInput
          autoCapitalize='none'
          autoCorrect={false}
          style={styles.inputStyle}
          placeholder='Phone Number'
          value={phoneNumber}
          onChangeText={changePhoneNumber}
        /&gt;
        &lt;View style={{ flexDirection: 'row', margin: 15, height: 100 }}&gt;
          &lt;ImageUpload
            certificationImage={image}
            setCertificationImage={changeImage}
          /&gt;
          &lt;View style={{ paddingTop: 10 }}&gt;
            &lt;Text style={styles.topText}&gt;Attach or take a picture of any&lt;/Text&gt;
            &lt;Text style={styles.middleText}&gt;certification provided at&lt;/Text&gt;
            &lt;Text style={styles.endText}&gt;completion&lt;/Text&gt;
          &lt;/View&gt;
        &lt;/View&gt;
  
        &lt;Button title='save' color='#fff' onPress={saveCertification} /&gt;
      &lt;/View&gt;
    );
  };
  
  const styles = StyleSheet.create({
    inputStyle: {
      height: 50,
      backgroundColor: 'white',
      borderRadius: 5,
      alignContent: 'center',
      marginLeft: 15,
      marginRight: 15,
      marginTop: 10,
      paddingLeft: 10
    },
    descriptionStyle: {
      height: 100,
      backgroundColor: 'white',
      borderRadius: 5,
      alignContent: 'center',
      marginLeft: 15,
      marginRight: 15,
      marginTop: 10,
      paddingLeft: 10
    },
    topText: {
      marginLeft: 40,
      marginTop: 15,
      color: '#687089',
      fontWeight: '500'
    },
    middleText: {
      marginLeft: 60,
      color: '#687089',
      fontWeight: '500'
    },
    endText: {
      marginLeft: 100,
      color: '#687089',
      fontWeight: '500'
    }
  });
  
  export default CertificationForm;
  </code></pre>