James
James

Reputation: 144

How to specify a prop in a swift component for react native?

How can I implement a feature in my code where I can pass a video URL as a prop to the TweetView component in React Native, and have my Swift code using UIKit display that video, instead of manually specifying the video URL in the Swift code for native module integration?

React native:

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { requireNativeComponent } from 'react-native';

const TweetView = requireNativeComponent('TweetView');

const App = () => {
  return (
    <View>
      <TweetView
        style={{height: 200, width: 200}}
      />
    </View>
  );
}

Swift:

import UIKit
import AVFoundation

@objc(TweetViewManager)
class TweetViewManager: RCTViewManager {

    override func view() -> UIView {
        return VideoPlayerView()
    }

    override static func requiresMainQueueSetup() -> Bool {
        return true
    }
}

class VideoPlayerView: UIView {

    private var player: AVPlayer?
    private var playerLayer: AVPlayerLayer?

    override init(frame: CGRect) {
        super.init(frame: frame)
        setupVideoPlayer()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setupVideoPlayer()
    }

    private func setupVideoPlayer() {
        if let videoURL = URL(string: " https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4") {
            player = AVPlayer(url: videoURL)
            playerLayer = AVPlayerLayer(player: player)
            playerLayer?.frame = bounds
            layer.addSublayer(playerLayer!)

            player?.play()
        }
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        playerLayer?.frame = bounds
    }
}

Upvotes: 1

Views: 68

Answers (0)

Related Questions