How To Refresh a Screen in React Native?

user_14068593 0
Viewed 725

I know similar questions have been asked here already, but I just can't get it to work! Im using iframe to embed a YouTube player in one of my screens (using Stack Navigator). I created an array with some YouTube Links/IDs, which are then being randomised and imported into the player, so each time I navigate to that particular screen, a random video starts playing! Now I want to add a 'play next video' button! I tried updating the screen 'key' and use different methods of forceUpdating the screen, but nothing seems to work right! Does anyone have an Idea?

Heres my code:

note that rn there is the playpause function in the 'next vid' button


 
import React, { useState, useCallback, useRef } from "react";
import { Button, View, Alert, Text } from "react-native";
import YoutubePlayer from "react-native-youtube-iframe";
import {NeuView, NeuButton} from 'react-native-neu-element';
import { set } from "react-native-reanimated";



//example vids
const videos = [
  'iNQAp2RtXBw',
  'AJqiFpAl8Ew',
  'IdoD2147Fik',
]

const randomVideo = () =>
videos[Math.floor(Math.random() * videos.length)];



export default function FunnyVideos() {
  
  const [playing, setPlaying] = useState(true);
  const [videoId, setRandomVideoId] = useState(randomVideo());

  
  
 function pauseOrPlay() {
    return ((
      setPlaying(!playing)
    ), []);
  }




  return (
    <View  alignItems = 'center' >
      <NeuView style = {{marginTop: '15%'}}  width = {330} height = {200} color = '#f2f2f2' borderRadius = {20} >
        <View overflow = 'hidden' height = {169}  style = {{position: 'relative', marginTop: 0}} justifyContent = 'center' alignContent = 'center' borderRadius = {10}> 
          <YoutubePlayer
          
            height={'100%'}
            width={300}
            videoId = {videoId}
            play = {playing}
            
            />
       </View>
     </NeuView>
    
    <View flexDirection = 'row'>
      <NeuButton style = {{marginTop: 60}}  width = {250}  height = {100} color = '#f2f2f2' title={playing ? "pause" : "play"} onPress = {pauseOrPlay} borderRadius = {20}>
        <Text>
        {playing ? "pause" : "play"}
        </Text>
      </NeuButton>
      
    </View>
      <NeuButton style = {{marginTop: 45}} width = {250}  height = {100} color = '#f2f2f2' title={playing ? "pause" : "play"} onPress = {pauseOrPlay}  borderRadius = {20}>
        <Text>
          Next Video
        </Text>
      </NeuButton>

    
    </View>
  ); 
}
react-native iframe javascript
3 Answers

I usually use RefreshControl, because it's simple and it can be used in other components like FlatList, ListView etc. For Example: <ScrollView contentContainerStyle={styles.scrollView} refreshControl={<RefreshControl refreshing={refreshing} onRefresh={yourFunctionHere} /> And you can read more in official docs here https://reactnative.dev/docs/refreshcontrol

user_124233850

Change the onPress of Next Video to () => setRandomVideoId(randomVideo())

user_51966270

I am using class component , use this.state for refresh screen, Here is an example:

import React, { Component } from "react";
import { Button, View, Alert, Text } from "react-native";
import YoutubePlayer from "react-native-youtube-iframe";
import { NeuView, NeuButton } from 'react-native-neu-element';
import { set } from "react-native-reanimated";

const videos = [
    'iNQAp2RtXBw',
    'AJqiFpAl8Ew',
    'IdoD2147Fik',
]

export default class FunnyVideos extends Component {
    constructor(props) {
        super();
        this.state = {
            playing: true,
            videoId: videos[Math.floor(Math.random() * videos.length)],
        }
    }

    componentDidMount = () => {
        this.setState({ videoId: videos[Math.floor(Math.random() * videos.length)] });
    }


    pauseOrPlay() {
    }

    refresh = () => {
        this.componentDidMount();
    }

    render() {
        let { videoId } = this.state;
        return (
            <View alignItems='center' >
                <NeuView style={{ marginTop: '15%' }} width={330} height={200} color='#f2f2f2' borderRadius={20} >
                    <View overflow='hidden' height={169} style={{ position: 'relative', marginTop: 0 }} justifyContent='center' alignContent='center' borderRadius={10}>
                        <YoutubePlayer
                            height={'100%'}
                            width={300}
                            videoId={videoId}
                            play={playing}

                        />
                    </View>
                </NeuView>

                <View flexDirection='row'>
                    <NeuButton style={{ marginTop: 60 }} width={250} height={100} color='#f2f2f2' title={playing ? "pause" : "play"} onPress={this.pauseOrPlay} borderRadius={20}>
                        <Text>
                            {playing ? "pause" : "play"}
                        </Text>
                    </NeuButton>

                </View>
                <NeuButton style={{ marginTop: 45 }} width={250} height={100} color='#f2f2f2' title={playing ? "pause" : "play"} onPress={this.refresh()} borderRadius={20}>
                    <Text>
                        Next Video
        </Text>
                </NeuButton>


            </View>
        );
    }
}
user_137730520
Related