Question 33613 in React native Question posted in
The official React Native documentation can be found here.

How can I use video in React Native insta-story?

I want to

react-native-insta-story

for show videos and images but I can’t show videos.I am encountering an error. I saw black screen until end of video’s time.

` Warning: componentWillReceiveProps has been renamed, and is not recommended for use. See https://reactjs.org/link/unsafe-component-lifecycles for details.

  • Move data fetching code or side effects to componentDidUpdate.
  • If you’re updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://reactjs.org/link/derived-state
  • Rename componentWillReceiveProps to UNSAFE_componentWillReceiveProps to suppress this warning in non-strict mode. In React 18.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run npx react-codemod rename-unsafe-lifecycles in your project source folder.

Please update the following components: AndroidCubeEffect`

my rn and component version

and How can I fix?

I search github and stackoverflow but I didnt find resolve. I am open every solution.

Tags:

2

Answers


  1. 0

    unfortunately you can’t use video in that package. but you can download the package and make change according to your requirements in this StoryListItem component and then you can use the videos.

        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                {props.isVideo ? <Video src={src} style={styles.avatarImage} /> : 
<Image style={styles.avatarImage} source={{ uri: profileImage }} />
                <Text style={styles.avatarText}>{profileName}</Text>
              </View>

    here Image Component is used you can use react-native-video and use Video component here

    Login or Signup to reply.
  2. 0

    react-native-insta-story does not support video. But dont worry, You can develop it by yourself. Based on the permission of the package developer. You can use the patch-package or you can clone react-native-insta-story and then modify it.

    For black screen until end of video time. is it any sound? if yes, the video is playing. you just need to fix the style element of the video. If no sound, you can try the solution below.

    Focus on StoryListItem component. go to line 194 to 205. you will see code like this.

        <View style={styles.backgroundContainer}>
      <Image
        onLoadEnd={() => start()}
        source={{ uri: content[current].story_image }}
        style={styles.image}
      />
      {load && (
        <View style={styles.spinnerContainer}>
          <ActivityIndicator size="large" color={'white'} />
        </View>
      )}
    </View>

    We will add video support by add this package react-native-video. After Installation just modify the code above to. The logic is Data/API says it`s video then Video component will appear else Image component will appear

    <View style={styles.backgroundContainer}>
   content[current].type.startsWith("video") ?
   <Video 
     source={{uri: content[current].video}} 
     ref={ref => (videoPlayer.current = ref)} 
     resizeMode={'contain'}
     onLoad={onLoad}
     onEnd={onEnd}
     style={styles.video}
     /> : 
   <Image onLoadEnd={() => start()}
     source={{uri: content[current].image}}
     style={styles.image}
     /> }
   {load && <View style={styles.spinnerContainer}>
        <ActivityIndicator size="large" color={'white'}/>
   </View>}
</View>

    Finally, react-native-insta-story suports video now.

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search