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.
Related
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.
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.
I'm having some problems taking an image from my local machine with my React App.
I'm trying to take image like
style={{ backgroundImage: `url(../../assets/images/games/${img}))` }}
But it's not working, and I don't understand why.
My file is located in
C:\Users\Me\Desktop\myreactapp\src\routes\GameSlider\index.js
And my images are in
C:\Users\Me\Desktop\myreactapp\src\assets\images\games
This is how my index.js looks now (without imports):
const GameSlider = ( { key, id, name, img, minPrice, maxSlots } ) => {
return (
<div key={key}>
<div className="home-games">
<div className="img" style={{ backgroundImage: `url(../../assets/images/games/${img}))` }} alt="..." />
<div className="price">
<IntlMessages id="gameSlider.startingAt" />
<p>
<span className="min">{minPrice}</span>
<span className="per-slot">
<IntlMessages id="gameSlider.perSlot" />
</span>
</p>
</div>
<span className="title">{name}</span>
<div className="features">
<Col span={24} className="feature">
<Icon type="lock" /> <IntlMessages id="gameSlider.upTo" /> {maxSlots} <IntlMessages id="general.slots" />
</Col>
</div>
<Link to={`/order/${id}`}><Button className="comet-buy-button" style={{ background: 'rgb(241,89,89)', borderRadius: '20px' }}>BUY NOW!</Button></Link>
</div>
</div>
);
}
export default GameSlider;
1 - Import your img:
import img from '../../pics/asteroids.jpg'
2 - And then use it:
<div style={{backgroundImage: `url(${img})`}}>Test</div>
On your page this div will look like this:
<div style="background-image: url("/static/media/asteroids.c8ab11b3.jpg");">Test</div>
Absolute path and relative path is always one of the issue for developers to fix :P so there is a another way to solve this easily.
You can use something like this:
import the whatever image in the namespace
import backgroundImg from '../images/BackgroundImage.jpg';
then use it the element like this
<img src={backgroundImg} />
let me know if this works.
If you want to use image or images without importing them, you should put your assets folder into the public folder and use them like below:
src='/assets/images/pic.jpeg'
I tried for hours lots of different solutions and in the end it came down to having quotes inside the url call, like this:
`url('${ImportedImage}')`
Quite weird that this happened though because in previous projects it has always worked fine without the inner quotes (actually, I've noticed in the past that it worked with OR without the quotes). Only thing I've done differently this time is used the TypeScript template of create-react-app to set up the project.
I am trying to display this link in react native app running on ios
I'm able to display jpg files using Image tag with no problem at all, however, the array being return from the API also contains video url as well something like this 'https://www.meteorshowers.org/view/iau-7', how can i go about showing it along with Images in a FlatList?
here is a link to what i am getting 'https://www.dropbox.com/s/hphm6natcfp5rey/Screenshot%202018-08-26%2017.47.57.png?dl=0' as you can see it's blank
`<TouchableWithoutFeedback>
<Card
image={{ uri: item.hdurl }}
resizeMode='contain'
imageStyle={{ height: 300, }}
/>
<TouchableWithoutFeedback>`
You can use 'react-native-video' module for this.
import Video from 'react-native-video';
...
<Video source={{uri: 'url_to_your_video'}} />
I am using react-share and I wonder how /if its possible to share a link insight the email, facebook, twitter etc? I was thinking of just including an a tag but that doesnt work and I> couldnt find anything online. Any ideas? Thanks!!
<EmailShareButton
url="www.example.com"
subject="subject"
body={"hey there, pls share my link" + Link}
className="Demo__some-network__share-button">
<EmailIcon
size={40}
round/>
</EmailShareButton>
<FacebookShareButton
url="www.example.com"
quote="link"
className="Demo__some-network__share-button">
<FacebookIcon
size={40}
round
/>
</FacebookShareButton>
...
Unfortunately this component is using mailto: which prevent inline html to the body. I checked EmailShareButton element on their repository,
https://github.com/nygardk/react-share/blob/master/src/EmailShareButton.js#L6
It seems that url also is skipped and does no action.