ReactNative - Text being cut off in repeating list of results on customer's android phone - react-native

I am noticing the following code in ReactNative (React 0.59), which represents a single search result item, is sometimes cutting off the last line of text on a client's android phone (but not on any of my android phones or simulators)
<View style={this.props.style}>
<View style={{ flexDirection: 'row' }}>
<Text style={styles.textStyle}>
{this.itemSentences()}
</Text>
</View>
<View style={{justifyContent: 'center', alignItems: 'center', flex: 1, marginTop: -7}}>
<Text style={{color: '#000', fontSize: ellipsisFontSize, fontWeight: '600'}}>{ellipsisText}</Text>
</View>
</View>
In the image below, you can see the effect, which is an incomplete sentence being rendered:
It almost looks like there isn't enough room to render the rest of the text, so it cuts it off. Again, on my phone, it renders the whole paragraph but in the client's screen shot, it is cut off.
Any initial suggestions or things I can do? I tried reducing the font, increasing the font, changing padding, but no luck. What other details can I provide? Thank you!
Edit:
Here is the container the above list items appear in:
<View style={styles.containerStyle}>
<FlatList
onContentSizeChange={ (x, y) => { this.layoutChanged(x, y) } }
onLayout={(event) => this.layoutChanged(event)}
keyboardShouldPersistTaps="always"
keyExtractor={(item, index) => index.toString()}
data={dataSource}
ListFooterComponent={footer}
ListHeaderComponent={header}
scrollEventThrottle={16}
onScroll={this.handleScroll.bind(this)}
language={this.props.language}
renderItem={this.renderItem.bind(this)}
/>
<AnimatedEditedResults
style={[editResultsStyle, {transform: [{translateX: this.state.editResultsOverlayX}]}]}
editResultsXButtonPressed={this.hideEditResultsOverlay.bind(this)}
applyFilterPressed={this.applyFilterPressed.bind(this)}
searchResults={this.props.originalSearchResults.Results}
selectedSources={this.props.selectedSources}
sentenceNumber={this.props.sentenceNumber}
hasMadeChanges={this.props.hasMadeChanges}
clearFilterPressed={this.props.clearFilterPressed}
language={this.props.language}
/>
</View>

Any reason why you cant wrap the component in a ScrollView

After playing with over 100+ different kinds of builds, different attempts, etc. I finally found the issue.
There is a property on called "TextBreakStyle" and by default it is "complex". By changing to "Simple", the issue went away. This apparently only plagues certain types of phones/devices.
Hope this helps someone!

Related

using react-native-youtube api : youtube videos not rendering

I'm trying to get youtube videos to play in my react-native project. I am using the react-native-youtube module and have enabled YouTubeDataAPIv3 and YouTubeAnalyticsAPI. But I'm getting a blank screen. Sometimes, after a little delay, the screen will resize leaving a smaller white square in the corner and a black background. But still no video.
MY api key does work. I tested this by passing a text-based request through postman. I've also made sure the api is also correctly being passed down to the component. I've tried different videos/videoIds. I've played around with various settings and looked at other examples of working code. My current theory is that this may have something to do with nested views/containers and settings. The videos are in component that is embedded in a parent screen. Maybe a flex:1 is overriding another view? I really don't know. . Has anyone else run into this problem? Any ideas how to fix this?
parent screen:
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1 }}>
<LeaderBoard />
<CurrentVideos />
</View>
</SafeAreaView>
);
}
video screen:
return (
<ScrollView style={{ flex: 1}>
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'pink'
}}
>
<YouTube
videoId={'BunklIatIK4'}
play={true}
apiKey={config.API_KEY}
controls={1}
onReady={e => this.setState({ isReady: true })}
onChangeState={e => this.setState({ status: e.state })}
onChangeQuality={e => this.setState({ quality: e.quality })}
onError={e => this.setState({ error: e.error })}
style={{ alignSelf: 'stretch', height: 300 }}
/>
</View>
</ScrollView>
);
Figured it out! The issue was that I hadn't manually moved a copy of the the youtube iframe file from the node modules to the project in Xcode. Now, it's BEAUTIFUL!

How to make an image of a <ImageBackground> tag darker (React Native)

I'm trying to create an image with a text on it, and in order for the the text to be clearly seen I need to make the image darker.
Also (don't sure if it matters or not) I need the background image to be touchable.
This question was asked several times here and I've seen some answers, but none of them worked for me, so I'm wondering if I'm missing something more crucial here.
My code is the following:
<View style={postStyles.container}>
<TouchableOpacity onPress={() =>
this.props.navigation.navigate('AnotherWindow')}>
<ImageBackground source={require('../../assets/images/my_img.jpg')}
style={{width: '100%', height: 150}}>
<Text style={postStyles.title} numberOfLines={2}>
My text
</Text>
</ImageBackground></TouchableOpacity>
From looking around here, I've tried the following solutions:
Tried to wrap the text element inside the imagebackground tag inside a
View element that has a style property of "backgroundColor" with value of 'rgba(255,0,0,0.5)' (also tried different values),
Tried to add this backgroundColor property to the styles of both the container itself, the TouchableOpacity element
Tried to above two solutions with the "elevation" property instead of backgroundColor (I work in Android).
None of the above solutions worked, in a sense that the background image didn't change at all, so I'm wondering if I'm missing something more crucial.
Thanks!
If anyone still having problems with the ImageBackground component, this is how i solved it, basically i set a view inside the image background which has the backgroundColor that darkens the image.
<ImageBackground
source={Images.background}
style={styles.imageBackground}
>
<View style={styles.innerContainer}>
{content}
</View>
</ImageBackground>
const styles = StyleSheet.create({
imageBackground: {
height: '100%',
width: '100%'
},
innerContainer: {
flex: 1,
backgroundColor: 'rgba(0,0,0, 0.60)'
},
});
if you want to make the image darker, you'll need the Image component and use the tintColor prop like:
<Image source={require('./your_image.png')} style={{ tintColor: 'cyan' }}>
this tintColor prop only works for Image component not ImageBackground, also if you want to add a text on the Image component, you'll need to positioning that text with position: 'absolute' or 'relative'
<View style={postStyles.container}>
<TouchableOpacity
onPress={() => his.props.navigation.navigate('AnotherWindow')}>}
>
<Image
source={require('./my_image.png')}
resizeMode="contain"
style={{ width: '100%', height: 150, tintColor: 'cyan' }}
/>
<Text style={postStyles.title} numberOfLines={2}>
My text
</Text>
</TouchableOpacity>
</View>
Also, if you implement this approach you'll need to calculate the dimensions of the screen for each device, well you'll need to check this other component from react-native: https://facebook.github.io/react-native/docs/dimensions
Please, let me know if this works :D
You should just add tintColor to ImageBackground imageStyle and you're done. easy peasy!
<TouchableOpacity onPress={() => this.props.navigation.navigate('AnotherWindow')}>
<ImageBackground source={require('../../assets/images/my_img.jpg')}
style={{width: '100%', height: 150}}
imageStyle={{tintColor: 'rgba(255,0,0,0.5)'}}>
<Text style={postStyles.title} numberOfLines={2}>
My text
</Text>
</ImageBackground>
</TouchableOpacity>

How to fixed a <Text> in a scrollView?

My all screen has a scrollView, and there's a in the middle of it. I want when someone scroll up, the text be fixed at the top and does not disappear. How can I do that? I didn't find it anywhere, thanks.
<View style={styles.container}>
<Text style={{ position : 'absolute', textAlign: 'center'}}>
Special Text
</Text>
<ScrollView>
</ScrollView>
</View>
you can do something like this
Use css property position: sticky. that will fixed your text at the top it's called sticky position. So, Please read it https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky
Be patient.
Cheer you!
i was trying to implement something similar and i got it done but unfortunately it is kinda complex (relatively) at least compared to what you would do on the web. it requires using the onLayout prop.
state = {zIndex: 0};
<View>
<View style={[your_style, {position: "relative", zIndex: this.state.zIndex}]} onLayout={({nativeEvent}) => {this.outTextHeight = nativeEvent.layout.height}}>
<Text>Special Text</Text>
</View>
<View style={{[your_style, {zIndex: 1}]}>
<ScrollView onScroll={({nativeEvent}) => {if(nativeEvent.contentOffset.y >= (this.insideTextHeight + this.insideTextOffsety){this.setState({zIndex: 2})})}}>
// your content
<View onLayout={({nativeEvent}) => {this.insideTextHeight = nativeEvent.layout.height; this.insideTextOffsety = nativeEvent.layout.y}}>// this maybe the same height so may be unnecessary
<Text>Special Text</Text>
</View>
</ScrollView>
</View>
</View>

Inconsistent width of separator while displaying list items

Following is the code to display list items with separators
</View>
<Text style={{padding: 10}}>List Item</Text>
<View style={{height: StyleSheet.hairlineWidth, backgroundColor: 'grey'}} />
</View>
(Kindly assume that I have repeated above piece of code multiple times to get the list view appearence)
there is some inconsistency in separators
this issue had already been posted in stack overflow and in github, but there hasn't been any permanent fix for this issue and it's been almost 2 years since these issue has been posted.
So, I just want to know that has anybody found permanent fix for this in recent times.
One solution I found that works usually well enough is to add a small margin to the divider.
const styles = StyleSheet.create({
divider: {
borderBottomColor: '#ccc',
borderBottomWidth: StyleSheet.hairlineWidth,
marginVertical: 1,
},
});
return <View style={styles.divider} />
As far as I know this is an issue related to emulators and IOS simulator because of scaling. This is just a visual mispresentation. I don't think it would happen on a real device.
Try your code with a real device or if its possible try with no scaling with device emulators or simulators.
I found that this is a bug in React-Native for Android where React-Native renders a separator for the bottom of one FlatList item, and then a second separator for the top of the next FlatList item, when the FlatList should really only render one separator between each FlatList item. I figured this out when I added marginVertical: 1 to my ItemSeparatorComponent and noticed the two distinct separators in between each FlatList item. The fix I found was to set my ItemSeparatorComponent height to 2 pixels, and then set marginVertical to -1 pixel:
<FlatList
data={companyGrowthRankings}
renderItem={renderItem}
keyExtractor={item => `${Math.random()}`}
ItemSeparatorComponent={() => <View style={{ width: windowWidth, height: 2, marginVertical: -1, backgroundColor: lessBlack }}></View>}
/>

Flexbox align images with different size to fill the area

I am using React Native's flexbox (not css flexbox). I am creating an image gallery and the first image has to be double the size, and the rest of the images smaller. Works good, but I have a problem that the third image is displayed in new row, instead where the blank space is.
Is it possible to achieve such behaviour with flex-box, so that the third image would be below the first small image?
I tried all combinations with aligning items, self aligning, flex directions, but no success. If needed I can provide a small example of the code which I already have.
I don't have a fully responsive answer, but this may be helpful here:
<View style={{ flexDirection: 'column' }}>
<View style={{ flexDirection: 'row' }}>
{this.renderPhoto(0)}
<View>
{this.renderPhoto(1)}
{this.renderPhoto(2)}
</View>
</View>
<View style={{ flexDirection: 'row' }}>
{render rest...}
</View>
</View>
Try this component. Maybe it will help you
https://xudafeng.github.io/autoresponsive-react/