title: Display image or video depending on Content-Type/ mime-type in React-Native
body: <p>I am using expo-image-picker to upload the images and videos. However, I had a problem while displaying the image and the videos from the database. How can I display them by using <code>mime-type</code> condition or <code>media-type</code> condition?
  Please let me know if anyone knows about it.</p>
  
  <pre><code>
    getPermissionAsync = async () =&gt; {
      if (Constants.platform.android) {
        const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
        status = await Permissions.getAsync(Permissions.CAMERA);
        if (status !== 'granted') {
          alert('Sorry, we need camera roll permissions to make this work!');
        }
      }
    }
  
    _pickImage = async () =&gt; {
      let result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        // allowsEditing: true,
        // aspect: [9, 16],
        quality: 1.0,
        allowsMultipleSelection: true,
      });
      console.log(result);
      if (!result.cancelled) {
        this.setState({ image: result.uri });
        this.setState({ type: result.type });
      }
    };
  
  
  
  
  
    _openCamera = async () =&gt; {
      // this._toggleModal(false);
      let permission = await this._cameraPermission()
      if (permission) {
        let result = await ImagePicker.launchCameraAsync({
          mediaTypes: ImagePicker.MediaTypeOptions.All,
          allowsEditing: true,
          aspect: [9, 16],
          quality: 1.0,
          // base64: false,
        })
        console.log(result);
        // this._uploadPhoto(result)
        if (!result.cancelled) {
          this.setState({ image: result.uri });
          this.setState({ type: result.type });
        }
      } else {
        this.refs.popupComponent.showPopupMessage("Need Permission", "Close");
        console.log("Need Permission")
      }
    }
  
    _cameraPermission = async () =&gt; {
      status = await Permissions.getAsync(Permissions.CAMERA);
      // const { status } = await Permissions.getAsync(Permissions.CAMERA);
      let statusCamera = status.status;
      console.log("statusCameraRoll: ", statusCamera);
      if (statusCamera !== "granted") {
        console.log("Requesting Notification Permissions");
        status = await Permissions.askAsync(Permissions.CAMERA);
        statusCamera = status.status;
        if (statusCamera != '"granted"')
          return false
        else {
          let status_new = await Permissions.getAsync(Permissions.CAMERA_ROLL);
          let statusCameraRoll = status_new.status;
          if (statusCameraRoll !== "granted") {
            status_new = await Permissions.askAsync(Permissions.CAMERA_ROLL);
            statusCameraRoll = status_new.status
            if (statusCameraRoll !== "granted")
              return false
            else
              return true
          }
          else
            return true
        }
      }
      else {
        let status_new = await Permissions.getAsync(Permissions.CAMERA_ROLL);
        let statusCameraRoll = status_new.status;
        if (statusCameraRoll !== "granted") {
          status_new = await Permissions.askAsync(Permissions.CAMERA_ROLL);
          statusCameraRoll = status_new.status
          if (statusCameraRoll !== "granted")
            return false
          else
            return true
        }
        else
          return true
      }
  
    }
  
    _videoHandler = async () =&gt; {
      // this._toggleModal(false);
      let permission = await this._galleryPermission()
      setTimeout
      if (permission) {
        let result = await ImagePicker.launchImageLibraryAsync({
          mediaTypes: ImagePicker.MediaTypeOptions.Videos,
          // allowsEditing: true,
          aspect: [9, 16],
          quality: 1.0,
          // allowsMultipleSelection: true,
          // base64: false,
        });
        console.log(result);
        // this._uploadPhoto(result)
        if (!result.cancelled) {
          this.setState({ video: result.uri });
          this.setState({ type: result.type });
        }
      } else {
        this.refs.popupComponent.showPopupMessage("Need Permission", "Close");
        console.log("Need Permission")
      }
    };
  
    _galleryPermission = async () =&gt; {
      status = await Permissions.getAsync(Permissions.CAMERA_ROLL);
      // const { status } = await Permissions.getAsync(Permissions.CAMERA_ROLL);
      let statusCameraRoll = status.status;
      console.log("statusCameraRoll: ", statusCameraRoll);
      if (statusCameraRoll !== "granted") {
        console.log("Requesting Notification Permissions");
        status = await Permissions.askAsync(Permissions.CAMERA_ROLL);
        statusCameraRoll = status.status;
        if (statusCameraRoll != '"granted"')
          return false
        else
          return true
      }
      else
        return true
    }
  
  
  
  &lt;View style="{styles.mediaComponent}"&gt;
          &lt;Image style={styles.imageView} source={{ uri: this.state.image }} /&gt;
          &lt;View&gt;
            &lt;Video
              source={{ uri: this.state.video }}
              style={{ width: "100%", height: 300 }}
              resizeMode="cover"
              shouldPlay={this.state.shouldPlay}
              isMuted={this.state.mute}
            /&gt;
            &lt;View style="{styles.controlBar}"&gt;
              &lt;MaterialIcons
                name={this.state.mute ? "volume-mute" : "volume-up"}
                size={45}
                color="white"
                onPress={this.handleVolume}
              /&gt;{" "}
              &lt;MaterialIcons
                name={this.state.shouldPlay ? "pause" : "play-arrow"}
                size={45}
                color="white"
                onPress={this.handlePlayAndPause}
              /&gt;
            &lt;/View&gt;
           &lt;/View&gt;
  &lt;/View&gt;
  </code></pre>
  
  <p>When we select the files from the gallery we will get mediatype by using
  <code>this.setState({ type: result.type });</code>, 
  By using the type first we need to show the preview of the image or video after that we can store the data in database.</p>
  
  <p>In the same way by using same condition we need to show the data from database like Instagram . 
  Once go through the code and tell me the solution.</p>