1

I am attempting to constrict the webview of youtube urls to only show the video (and not the rest of the youtube page). How do you do this? I have figured out some of the props of the webview but would like to gain a deeper understanding of the following props:

automaticallyAdjustContentInsets bool 

contentInset {top: number, left: number, bottom: number, right: number} 

Here is what I have so far:

enter image description here

Of course, I don't want to see the youtube search tab - and would like to change the dimensions of the webview to do so. How can this be better done? Here is the code to the custom component of each video 'card':

<TouchableHighlight 
          style={styles.touchCard}
          underlayColor={'transparent'}
          onPress={this.props.onPress} >
           <View style={styles.card}>
            <WebView
                scrollEnabled={false}
                style={styles.videoPreview}
                url={this.props.source}
                renderLoading={this.renderLoading}
                renderError={this.renderError}
                automaticallyAdjustContentInsets={false} />
              <View style={[styles.container, this.border('organge')]}>
                  <View style={[styles.header, this.border('blue')]}>
                      <Text style={[styles.previewText]}>{this.props.text}</Text>
                  </View>
                  <View style={[styles.footer, this.border('white')]}>
                    <View style={styles.sourceRow}>
                      <View style={[this.border('white')]}>
                        <ImageButton
                            style={[styles.logoBtn, , this.border('red'), styles.row]}
                            resizeMode={'contain'}
                            onPress={this.onHeartPress}
                            source={this.props.src} />
                      </View>
                      <View style={[this.border('white')]}>
                          <Text style={[styles.rowText, {fontWeight: 'bold'}]}>{this.props.entryBrand}</Text>
                          <Text style={[styles.rowText]}>{this.props.postTime}</Text>
                      </View>
                    </View>
                    <View style={[styles.heartRow, this.border('black')]}>
                      <KeywordBox 
                          style={[styles.category, this.border('blue')]}
                          key={this.props.key} 
                          text={this.props.category} 
                          onPress={this.props.categoryPress}
                          selected={this.props.selected} />
                    </View>
                  </View>
              </View>
            </View>
        </TouchableHighlight>
Robert Tomas G IV
  • 2,315
  • 4
  • 18
  • 41

0 Answers0