title: How To Implement Auto Scrolling Video in React Native using JSX
body: <pre><code> import React, {useState, useEffect, useRef} from 'react';
   import {
    View,
    Text,
    StyleSheet,
    FlatList,
    ScrollView,
    Image,
    TouchableHighlight,
    TextInput,
    TouchableOpacity,
    Modal,
    Dimensions,
    SafeAreaView,
  } from 'react-native';
  import Voice from 'react-native-voice';
  import Video from 'react-native-video';
  import SimpleLineIcons from 'react-native-vector-icons/SimpleLineIcons';
  import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
  import {videos} from './data';
  
  // code started creating state on every event which will be used 
  
  
      enter center export default function App() {
  
    const [pitch, setPitch] = useState('');
    const [error, setError] = useState('');
    const [end, setEnd] = useState('');
    const [started, setStarted] = useState('');
    const [results, setResults] = useState([]);
    const [videoData, setVideos] = useState([...videos]);
    const [showModal, setShowModal] = useState(false);
    const [paused, setPaused] = useState(true);
    const [position, setPosition] = useState({start: null, end: null});
    const [muted, setMuted] = useState(true);
  
    
  
  
   
  
   //Setting callbacks for the process status
    useEffect(() =&gt; {
     
      Voice.onSpeechStart = onSpeechStart;
      Voice.onSpeechEnd = onSpeechEnd;
      Voice.onSpeechError = onSpeechError;
      Voice.onSpeechResults = onSpeechResults;
      return () =&gt; {
        //destroy the process after switching the screen
        Voice.destroy().then(Voice.removeAllListeners);
      };
    }, []);
  
  
  
    const onSpeechStart = (e) =&gt; {
      //Invoked when .start() is called without error
      console.log('onSpeechStart: ', e);
      setStarted('√');
    };
  
    const onSpeechEnd = (e) =&gt; {
      //Invoked when SpeechRecognizer stops recognition
      console.log('onSpeechEnd: ', e);
      setEnd('√');
    };
  
    const onSpeechError = (e) =&gt; {
      //Invoked when an error occurs.
      console.log('onSpeechError: ', e);
      setError(JSON.stringify(e.error));
    };
  
  2. in this part we are matching the word sopken by the user and checking is if the same video is available in our data if it si then the video will come on the top
  
    const onSpeechResults = (e) =&gt; {
      //Invoked when SpeechRecognizer is finished recognizing
      console.log('onSpeechResults: ', e.value[0]);
  
      let vResult = e.value[0];
      let small = vResult.toLowerCase();
  
      setResults([small]);
      setShowModal(false);
  
      for (let i = 0; i &lt; videoData.length - 1; i++) {
        let newArray = [...videos];
        if (small == newArray[i].name) {
          newArray.splice(0, 0, newArray[i]);
  
          const mainArray = newArray.filter((item, index) =&gt; {
            if (item.name == small &amp;&amp; index != 0) {
            } else {
              return item;
            }
          });
  
          setVideos(mainArray);
        }
      }
    };
  
    const startRecognizing = async () =&gt; {
      console.log('start listenind');
      //Starts listening for speech for a specific locale
      try {
        await Voice.start('en-US');
        setPitch('');
        setError('');
        setStarted('');
        setResults([]);
        setEnd('');
      } catch (e) {
        //eslint-disable-next-line
        console.error(e);
      }
    };
    const stopRecognizing = async () =&gt; {
      //Stops listening for speech
      try {
        await Voice.stop();
      } catch (e) {
        //eslint-disable-next-line
        console.error(e);
      }
    };
  
  3. making video play n pause is out of axis
  
    onScroll = (event) =&gt; {
      const scrollPosition = event.nativeEvent.contentOffset.y;
      const paused = paused;
      const {start, end} = position;
      if (scrollPosition &lt; start &amp;&amp; scrollPosition &gt; end &amp;&amp; paused) {
        setPaused(false);
      } else if (scrollPosition &gt; start &amp;&amp; scrollPosition &lt; end &amp;&amp; !paused) {
        setPaused(true);
      } else if (scrollPosition &lt; end &amp;&amp; !paused) {
        setPaused(true);
      }
    };
  
        4. getting the scroll y axis
  
          const threshold = 180;
          onVideoLayOut = (event) =&gt; {
          const {height} = Dimensions.get('window');
         const start = -(event.nativeEvent.layout.y - height + threshold);
         const end =
        event.nativeEvent.layout.y + event.nativeEvent.layout.height - threshold;
      // console.log(start, end, 'position');
           setPosition((state) =&gt; {
        return {
          ...state,
          start: start,
          end: end,
        };
      });
      console.log(position, 'position1');
    };
  
  5.this the render par using faltlist to render data     
  
            return (
      &lt;View
        style={{
          flex: 1,
          backgroundColor: 'black',
        }}&gt;
        &lt;View
          style={{
            height: 70,
            alignItems: 'center',
            justifyContent: 'space-between',
            marginHorizontal: 15,
            flexDirection: 'row',
            marginVertical: 15,
            marginTop: 25,
          }}&gt;
          &lt;View
            style={{
              height: 40,
              borderRadius: 20,
              width: 300,
              borderWidth: 1,
              borderColor: '#F23C29',
            }}&gt;
            &lt;TextInput
              placeholder=&quot;Search ...&quot;
              style={{flex: 1, paddingHorizontal: 30, color: 'white'}}
              placeholderTextColor=&quot;grey&quot;
            /&gt;
          &lt;/View&gt;
          &lt;View&gt;
            &lt;TouchableOpacity
              onPress={() =&gt; {
                startRecognizing();
                setShowModal(true);
              }}&gt;
              &lt;SimpleLineIcons color={'white'} name=&quot;microphone&quot; size={30} /&gt;
            &lt;/TouchableOpacity&gt;
          &lt;/View&gt;
        &lt;/View&gt;
        &lt;SafeAreaView
          style={{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            borderColor: 'orange',
            borderWidth: 1,
          }}&gt;
          &lt;FlatList
            data={videoData}
            // scrollEventThrottle={16}
            onScroll={onScroll}
            showsVerticalScrollIndicator={true}
            renderItem={({item, index}) =&gt; {
              return (
                &lt;View
                  key={index}
                  style={{
                    height: 250,
                    marginVertical: 20,
                  }}&gt;
                  &lt;Video
                    source={{uri: item.source}}
                    onLayout={onVideoLayOut}
                    muted={true}
                    resizeMode=&quot;cover&quot;
                    paused={!paused}
                    style={{
                      width: '100%',
                      height: undefined,
                      aspectRatio: 2,
                      marginBottom: 200,
                      marginTop: 300,
                    }}
                  /&gt;
                  &lt;Text
                    style={{
                      fontSize: 20,
                      alignItems: 'center',
                      marginLeft: 20,
                      marginTop: 15,
                      color: 'white',
                    }}&gt;
                    {item.title}
                  &lt;/Text&gt;
                &lt;/View&gt;
              );
            }}
          /&gt;
        &lt;/SafeAreaView&gt;
        {/* &lt;ScrollView style={{flex: 2, width: '100%'}}&gt;
          {videoData.map((item, index) =&gt; {
            return (
              &lt;View
                key={index}
                style={{
                  height: 250,
                  marginVertical: 20,
                }}&gt;
                &lt;Video
                  source={{uri: item.source}}
                  paused={false}
                  rate={1.0}
                  volume={1.0}
                  isMuted={false}
                  resizeMode=&quot;contain&quot;
                  shouldPlay
                  isLooping
                  style={{width: '100%', height: undefined, aspectRatio: 2}}
                  onError={(e) =&gt; {
                    console.log(e, 'video data');
                  }}
                /&gt;
                &lt;Text
                  style={{
                    fontSize: 20,
                    alignItems: 'center',
                    marginLeft: 20,
                    marginTop: 15,
                    color: 'white',
                  }}&gt;
                  {item.title}
                &lt;/Text&gt;
              &lt;/View&gt;
            );
          })}
        &lt;/ScrollView&gt; */}
        &lt;Modal
          visible={showModal}
          transparent={true}
          onRequestClose={() =&gt; {
            setShowModal(false);
          }}&gt;
          &lt;View
            style={{
              flex: 1,
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: 'rgba(0,0,0,0.9)',
            }}&gt;
            &lt;MaterialCommunityIcons
              name=&quot;microphone-settings&quot;
              size={45}
              color=&quot;white&quot;
            /&gt;
            &lt;Text
              style={{
                color: '#fff',
                textAlign: 'center',
                marginTop: 20,
                fontSize: 17,
              }}&gt;
              We are listening
            &lt;/Text&gt;
          &lt;/View&gt;
        &lt;/Modal&gt;
        {/* &lt;View style={{justifyContent: 'center', alignItems: 'center'}}&gt;
          &lt;Text&gt;Video&lt;/Text&gt;
          &lt;View&gt;
            &lt;TouchableHighlight
              onPress={stopRecognizing}
              style={styles.buttonStyle}&gt;
              &lt;Text style={styles.buttonTextStyle}&gt;Stop&lt;/Text&gt;
            &lt;/TouchableHighlight&gt;
          &lt;/View&gt;
          &lt;View&gt;
            &lt;TouchableHighlight onPress={startRecognizing}&gt;
              &lt;SimpleLineIcons name=&quot;microphone&quot; size={25} /&gt;
            &lt;/TouchableHighlight&gt;
          &lt;/View&gt;
          {results.map((item, index) =&gt; {
            return (
              &lt;Text key={`result-${index}`} style={styles.textStyle}&gt;
                {item}
              &lt;/Text&gt;
            );`enter code here`
          })}
          &lt;Text&gt;Results&lt;/Text&gt;
        &lt;/View&gt; */}
      &lt;/View&gt;
    );
  }
  
  const styles = StyleSheet.create({
    backgroundVideo: {
      position: 'absolute',
      top: 0,
      left: 0,
      bottom: 0,
      right: 0,
    },
  });
  </code></pre>
  <ol>
  <li><p>The question is in my flat list at a time, there are three videos which are render .. I was trying to make the first video play and rest to be in paused state and after a 5 second of interval, the next video should be played</p>
  </li>
  <li><p>I tried demo which looks like instagram where the video which is in focused is played automatically and rest all are paused</p>
  </li>
  <li><p>I tried using scroll props and also video-autoscroll lib but coudlnot resolve</p>
  </li>
  <li><p>the videos are getting render but</p>
  </li>
  </ol>