Develop Reference

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.

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

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.

How do I display images from Google Drive on a react front-end website?

I want to upload some photos in my Google Drive and would like me to display those photos. I'm actually using React.js right now and I'm really new to programming. I just wanna display the photos and have the specific date related to the photos. I'm searching on google and youtube and I still have no clear answers.

Try the following:
1) Obtain the public link of your uploaded google drive image:
my case: https://drive.google.com/file/d/1_aPIblL-tTtWKAADSSADASDNIloPB4QNlfFcl-/view?usp=sharing
2) Extract the id from the link:
my case: 1_aPIblL-tTtWKAADSSADASDNIloPB4QNlfFcl-
3) Use the following url structure in react:
<img src="https://drive.google.com/uc?export=view&id=INSERT_HERE_YOUR_GOOGLE_DRIVE_IMAGE_ID" alt="drive image"/>
4) Result:
<img src="https://drive.google.com/uc?export=view&id=1_aPIblL-tTtWKAADSSADASDNIloPB4QNlfFcl-" alt="drive image"/>
For further doubts watch this video: https://www.youtube.com/watch?v=iajv8y-6n3Q that I made.

First of all, Go to your Google Drive and Share the link of photos in a public mode.
Then copy the id of your photos link.
Replace the ID's of your photo urls => https://drive.google.com/thumbnail?id='your photo link id'
Then Copy the Above by replacing ID and Paste it in Img Src of React Js App.
Then Run React Js App
import React from 'react';
function App() {
return(
<div>
<img src="https://drive.google.com/thumbnail?id='your photo link id'" alt="image" />
</div>
);
}
export default App;
If Img tag don't work, try to use this
<img src={require('https://drive.google.com/thumbnail?id='your photo link id').default} />
I Hope it works. Note my export view thumnail size, you can change the size according to your style requirement.

React Native image web uri not working with real devices ( working in emulator )

I m on my way to create a scroll view for all countries with each one have a flag as an image and a name, my data that I am basing on is relading from an API, after API response I set the countries data in the state object and I call this.setSatet(newstate) to update the scroller view.
so, I am using this code to show up the flag of every country :
{
this.state.data_countries.map((country, index) => (
<View key={country._id} style={styles.item}>
<Image
source={{
uri: country.countryInfo.flag,
}}
style={{
maxWidth: 40,
maxHeight: 30,
flex: 1,
}}
onError={this.test_error}
></Image>
<Text
style={{
textAlign: "center",
flex: 1,
}}
>
{country.country}
</Text>
</View>
));
}
I made sure that the URI given is correct, I had added all the following network security to my android project :
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<domain-config cleartextTrafficPermitted="true">
<!-- THIS FOR THE DOMAIN OF MY IMAGES SOURCE example : https://disease.sh/assets/img/flags/us.png-->
<domain includeSubdomains="true">disease.sh</domain>
<!-- THIS FOR THE DOMAIN OF MY API -->
<domain includeSubdomains="true">nepalcorona.info</domain>
</domain-config>
<base-config cleartextTrafficPermitted="true">
<trust-anchors>
<certificates src="system" />
</trust-anchors>
</base-config>
</network-security-config>
I tested my application on an emulator and it is working fine, but it is not working on my real device I got image not showing an empty Image View, please who have any idea can help me, please share it. I have many hours looking for a solution but no way, please help.

You should build your app with this command.
react-native bundle --platform android --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --dev false --reset-cache --assets-dest android/app/src/main/res/
I also used URI for Imagebackground on my app and it worked well.
Hope this helps you.

Including a library from a github branch in react-native

I'm trying to include a react-native package from a branch that includes a feature I'd like to use. Read the documentation and it seems like I can basically include it like this: "react-native-lightbox":"git://github.com/oblador/react-native-lightbox.git#navigator-refactor" which seems to have worked.
Then, in my component where I'd like to use it, I have:
import Lightbox from 'react-native-lightbox';
However, when <Lightbox> gets rendered like this:
<Lightbox activeProps={{width: 200, height: 200, alignSelf: 'center'}} >
<Image
style={[currentUser ? styles.currentUserChatImage : styles.chatImage]}
source={{uri: item['url']}}
resizeMode="cover"
/>
</Lightbox>
I get this error:
I'm confident I'm doing something wrong but I'm stuck on what that is. I was hoping someone could offer suggestions / help. Ty.

Import Local Picture to XML for Cross-Platform App

I am currently working on a NativeScript App. I am having trouble using a locally saved picture on this app. I need to be able to maximize this said picture in XML and make it transparent so it allows movement to the next page.

Depends on how you are storing your image; if it is in the app folder then you need:
<Image src="/path/to/local/image">
If it is in the app_resources folder then you need
<Image src="res://image_name">
Add a width and a height to size it
<Image width="300" height="300">
Add some css for transparency:
Image {opacity: 50;}
If you are needing a button (for navigation) above it then you should do:
<GridLayout rows="auto">
<Image row="0" ... other params .../>
<Button row="0" ... other params .../>
</GridLayout>
Grid layout will allow you to stack items in the same display area.