title: expo camera not saving picture to gallery - why is this so hard?
body: <ul>
  <li><p>I can take a picture and it'll even show a preview afterwards but it won't save it to the gallery.</p>
  </li>
  <li><p>after I add the <code>MediaLibrary.createAssetAsync</code> it won't even show the image preview after taking a picture and still doesn't save into the gallery (or any local storage).</p>
  </li>
  </ul>
  <p>I don't know where I'm going wrong here for days now. Please any tips or hints would be great.</p>
  <pre><code>   //imports
  import { Camera } from &quot;expo-camera&quot;;
  import * as MediaLibrary from 'expo-media-library';
  import * as Permissions from 'expo-permissions';
    
     // useState
    const [hasPermission, setHasPermission] = useState(null);
    const [rollPermision, setRollPermission] = useState(null);
  
   // useEffect and ref to the camera
    const cameraRef = useRef();
  
    useEffect(() =&gt; {
        (async () =&gt; {
          const { status } = await Camera.requestPermissionsAsync();
          setHasPermission(status === &quot;granted&quot;);
        // camera roll
          const { cam_roll } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
          setRollPermission(cam_roll === &quot;granted&quot;);
          setRollPermission(true);
      }
      )();
    }, []);
  
  // shutter button function to take picture
    const takePicture = async () =&gt; {
      if (cameraRef.current) {
        const options = { quality: 0.5, base64: true, skipProcessing: true };
        const data = await cameraRef.current.takePictureAsync(options);
        //camera roll (saving picture)
        const asset = await MediaLibrary.createAssetAsync(data);
  
        const source = asset.uri;
        if (source) {
          await cameraRef.current.pausePreview();
          setIsPreview(true);
          console.log(&quot;picture source&quot;, source);
        }
      }
    };
  
  
   //if statement if it hit an error
        if (hasPermission === null || rollPermision === null) {
      return &lt;View /&gt;;
    }
    if (hasPermission === false || rollPermision === false) {
      return &lt;Text style={styles.text}&gt;No access to camera&lt;/Text&gt;;
    }
  </code></pre>