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.
Related
In this example i tried to display two different things inside a listitem.
The problem is i couldn't manage to find out how can i show the "item.date" on the left of the line and "Click to show." string on the right of the line.
Solution with spaces
The code sample of the image is below:
<Text style={styles.textline}>{"\n"+item.date}<Text style={styles.continuetext}>{Array(22).fill('\t').join('')}Click to show.</Text></Text>
I have managed to do it by adding multiple "\t" to the string but its a bad solution and it can change according to screen size.
And i have already tried to wrap the two text tags inside a view tag and gave the prop "flex:1" to the view tag, then gave the text tag prop "alignSelf: "flex-end" " didn't work either.
Edit: I have tried to wrap texts inside a view like mentioned in the comments didn't work.
Full code here:
return( <ListItem thumbnail key={i}>
<Thumbnail square source={{ uri: 'url' }} />
<Body>
<TouchableScale transparent onPress={ ()=>{ Linking.openURL(item.url)}}
Component={TouchableScale}
friction={90}
tension={100}
activeScale={0.95}>
<Text>{item.head+"\n"}</Text>
<Text note numberOfLines={2}>{item.details}</Text>
<View style={{ flex:1,justifyContent: 'space-between', flexDirection: 'row' }}>
<Text style={{ fontSize:12,color: 'gray'}}>{"\n"+item.date}</Text>
<Text style={{ fontSize:12,color: '#143f90'}}>Click to show.</Text>
</View>
</TouchableScale>
</Body>
</ListItem>);
I am kinda new to React Native, any help would be great.
You can do something like that:
<View style={{ flex: 1, justifyContent: 'space-between', flexDirection: 'row' }}>
<Text>{item.date}</Text>
<Text>Click to show</Text>
</View>
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 am using expo to debug an application. In debug mode (expo start) advertising is correctly displayed
on when I build the application (expo build: android) advertising is not displayed
when using the test key, the advertisement works correctly in apk
checked the key. google admob it's active
Do I need to make some settings to display admob ads
I watched the documentation there described only about inserting the code into the program. I use the library expo-ads-admob
<View style = {{ width: '100%', alignItems: 'center' }}>
<AdMobBanner
bannerSize="fullBanner"
adUnitID="ca-app-pub-3940256099942544/6300978111"
testDeviceID="EMULATOR" />
<TouchableHighlight onPress={() =>{this.props.navigation.navigate('SearchObjectPage');} style={{
marginTop: 30,
width: '90%',
padding: 10,
backgroundColor: '#a1cfed',
}}>
<View>
<View style={{flexDirection:'row'}}>
<Image source={require('./src/red.png')} style={ styles.button } resizeMode="contain"/><Text style = { styles.text }>{'check'}</Text>
</View>
</View>
</TouchableHighlight>
</View>
For simulators/emulators you can use EMULATOR for the test device ID.
However, if you create an apk, the divice will not run because it is not an emulator.
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 made a DEMO
so the problem is that third button isn't working. The only difference between buttons is the way I passed them in Header component.
<Header secondButton={<View style={styles.button}><Text>Second Button</Text></View>}
thirdButton={<ThirdButton />}
onPress={this._handlePress} />
My solution was to turn this ...
<TouchableWithoutFeedback onPress={props.onPress}>
<Contents {...props} />
</TouchableWithoutFeedback>
into this...
<TouchableWithoutFeedback onPress={props.onPress}>
<View>
<Contents {...props} />
</View>
</TouchableWithoutFeedback>
answered by #brentvatne on github
I was able to fix it in this example - notice that I changed the
<View> in your ThirdButton to include {...this.props}
<View style={styles.button} {...this.props}>
.. etc
</View>
The reason for this is that TouchableWithoutFeedback will set responder
props on that component, but ThirdButton is just a composite component
with no backing UIView, so I want to pass those on to the View.
See what I'm talking about here