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 to make React Native Webview auto height

I need to render some HTML code in my React Native app. But it seems like the WebView can't be set to auto height. Please help me with this problem. This is my code.
<View style={{
paddingLeft: 18,
paddingRight: 18,
paddingTop: 10,
paddingBottom: 10,
}}>
<WebView source={{
html: HTML
}}
javaScriptEnabled={true}
style={{
height: 200,
backgroundColor: colors.white,
marginTop: 20
}} />
</View>
As you can see here, I need to define a specific value to the height prop. How can I make its height dynamic, based on the inner HTML content height?

I will suggest you use the react-native-autoheight-webview which gives you the auto height webview for React Native.
You can check it here - https://www.npmjs.com/package/react-native-autoheight-webview

I wrap WebView inside a View, and set the height from the View.
<View style={{ height: 200 }}>
<WebView
automaticallyAdjustContentInsets={false}
source={{uri: 'https://player.vimeo.com/video/24156534?title=0&byline=0&portrait=0'}}
/>
</View>
heres where i get the answer pls give him credit... React native: webview height

How to create two text tags with different alignments in a single row using React Native?

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>

scroll not work when the hold on input native base

Iam beginner in react native. In my project iam using native base component and in content area using the icon and input, when screen load i can not hold scroll on input how can I fix this bug. Thanks for your help
my code:
<Container style={{ backgroundColor: '#ffffff', alignItems: 'center', flex: 1 }}>
<Content>
<Label style={registerstyle.LableS}>گذرواژه</Label>
<Input />
</Content>
</Container>
example gif:

Make responsive button in react native

I want to make button in react native with dynamic width. I just want to supply text in button component it create button according to text width.

<View style={{justifyContent: 'center', alignItems: 'center'}}>
<TouchableHighlight style={{backgroundColor:'red', paddingTop:10, paddingLeft:20, paddingRight:20, paddingBottom:10}}>
<Text style={{color:'white', fontWeight:'bold'}}>BUTTON 2</Text>
</TouchableHighlight>
</View>

To accomplish this, use padding. I've set up an example here.
<TouchableHighlight style={{backgroundColor:'red', paddingTop:10, paddingLeft:20, paddingRight:20, paddingBottom:10}}>
<Text style={{color:'white', fontWeight:'bold'}}>BUTTON 2</Text>
</TouchableHighlight>
https://rnplay.org/apps/Hwinnw