CODEWITHSUNDEEP
react-nativewebviewexpo
hehe
hehe

Reputation: 93

display webview in card (react native)

I'm using expo for the simulator as I created my react native app with CRNA. And I want to show a youtube video on WebView inside a Card elements but it couldn't do as I supposed.

Here is my code:

import React, { Component } from 'react';
import { WebView } from 'react-native';
import { Card, CardItem } from 'native-base';

export default class MyWeb extends Component {
  render() {
    return (
      <Card>
      <CardItem>
        <WebView
          source={{uri: 'https://www.youtube.com/embed/OCMs-YhSp2o'}}
          style={{marginTop: 20}}
      /></CardItem>
      </Card>
    );
  }
}

I don't know if it is because of the Card or not because when I remove the Card and only showing the WebView, it worked. But since I want to put the video along with another items (text, picture, etc) I need to use Card to display it.

Please help me....

Thank you in advance.

Upvotes: 2

Views: 1433

Answers (2)

Chetankumar Bhagavantgoudra
Chetankumar Bhagavantgoudra

Reputation: 1

WebView has been removed from React Native. It can now be installed and imported from 'react-native-webview' instead of 'react-native'

import React, { Component } from 'react';
import { WebView } from 'react-native-webview';
import { Card, CardItem } from 'native-base';

export default class App extends Component {
  render() {
    return (
      <Card>
      <CardItem style={{height:200}}>
        <WebView
          source={{uri: 'https://www.youtube.com/embed/OCMs-YhSp2o'}}
          style={{marginTop: 20}}
      /></CardItem>
      </Card>
    );
  }
}

And if you are using Expo you will face this problem

Some of your project's dependencies are not compatible with currently installed expo package version:

  • react-native-webview - expected version range: 10.7.0 - actual version installed: ^11.0.2 Your project may not work correctly until you install the correct versions of the packages. To install the correct versions of these packages, please run: expo install [package-name ...]

Upvotes: 0

hehe
hehe

Reputation: 93

As I defined the height of the CardItem, the code is working perfectly now. Thanks to Nima for the comment!

import React, { Component } from 'react';
import { WebView } from 'react-native';
import { Card, CardItem } from 'native-base';

export default class MyWeb extends Component {
  render() {
    return (
      <Card>
      <CardItem style={{height:200}}>
        <WebView
          source={{uri: 'https://www.youtube.com/embed/OCMs-YhSp2o'}}
          style={{marginTop: 20}}
      /></CardItem>
      </Card>
    );
  }
}

Upvotes: 2

Related Questions