I have this in my React Native code, I am trying to parse through some API data.
{this.state.articles.map(article => (
<Image
style={{width: 50, height: 50}}
source={{uri: article.urlToImage}}
/>
<Text style={styles.article} onPress={() => Linking.openURL(article.url)} >{article.title}</Text>
and every time I run it I get a error that says:
Adjacent JSX elements must be wrapped in an enclosing tag
I have no idea what to do, can anyone help me out? Thanks!
The result of the .map call can only return one element at a time. Because the JSX-compiler sees two adjacent elements (Image and Text), it throws the mentioned error.
The solution would be to wrap the two components in a view
{this.state.articles.map(article => (
<View style={{ some extra style might be needed here}}>
<Image
style={{width: 50, height: 50}}
source={{uri: article.urlToImage}}
/>
<Text style={styles.article} onPress={() => Linking.openURL(article.url)} >{article.title}</Text>
</View>
)}
Related
I want to avoid the onPress={() => onRequestClose()} function working inside the inner View in my react-native project.
While user click on the screen the (whatever the area) onPress={() => onRequestClose()} works, to avoid that I use View inside the 1st TouchableWithoutFeedback and inside the View component I added another TouchableWithoutFeedback. But this is not working.
I'm struggling to find the solution, Is there any method to resolve this matter.
My code as follows
<View style={styles.videoOverlayWrapper}>
<TouchableWithoutFeedback onPress={() => onRequestClose()} style={{width: '100%', height: '100%'}}>
<View><TouchableWithoutFeedback onPress={()=>{}}>{props.children}</TouchableWithoutFeedback></View>
</TouchableWithoutFeedback>
</View>
you can pass null in any onPress, as onPress={() => null} or onPress={null}
<View style={styles.videoOverlayWrapper}>
<TouchableWithoutFeedback onPress={() => null} style={{width: '100%', height: '100%'}}>
</View>
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!
I am trying to achieve the following, whereas all but the last are normal images coming from an array.
Currently this is the code for the FlatList:
<FlatList
data={images}
numColumns={3}
// ListFooterComponent={
// <View style={[StyleSheet.actionUploadedPictureFrame , {height: PIC_HEIGHT, width: PIC_WIDTH}]}>
// <Image source={require('../../../images/add-icon.png')} />
// </View>}
renderItem={ ({item, index}) => index == images.length -1 ?
<View style={{flexDirection: 'row'}}>
<Image style={[StyleSheet.actionUploadedPictureFrame , {height: PIC_HEIGHT, width: PIC_WIDTH}]} source={{uri: item.url}} />
<View style={[StyleSheet.actionUploadedPictureFrame , {height: PIC_HEIGHT, width: PIC_WIDTH}]}>
<Image source={require('../../../images/add-icon.png')} />
</View>
</View>
: <Image style={[StyleSheet.actionUploadedPictureFrame , {height: PIC_HEIGHT, width: PIC_WIDTH}]} source={{uri: item.url}} /> }
keyExtractor={(item, index) => index.toString()}
/>
Which long story short, renders the pictures in the array in a table of 3 columns, and checks for the last picture in the list and in addition to rendering the picture, it also renders this plus sign.
However this is bound to have some sort of error if the list has a number of elements multiple of 3, since the plus sign would most likely be out of the screen.
If I use ListFooterComponent, it renders it in an entirely new line.
Does anyone know an effective work around to this?
Since I don't think I was clear enough, I'll try to explain properly my idea with this sample code:
<FlatList
data={[...images, { plusImage: true }]}
numColumns={3}
renderItem={({ item }) => {
if (item.plusImage) {
return (
<View
style={[
StyleSheet.actionUploadedPictureFrame,
{ height: PIC_HEIGHT, width: PIC_WIDTH }
]}
>
<Image source={require("../../../images/add-icon.png")} />
</View>
);
}
return (
<Image
style={[
StyleSheet.actionUploadedPictureFrame,
{ height: PIC_HEIGHT, width: PIC_WIDTH }
]}
source={{ uri: item.url }}
/>
);
}}
keyExtractor={(item, index) => index.toString()}
/>;
I don't know if it's the best practice to concat data array like that directly in the data prop, but you can always choose to declare it earlier in the render method.
Let me know if this can fit your request.
I also came around the same situation and found a good way when I have check the documentation of FlatList so the best way that I recommend is to use ListFooterComponent you can pass a style object for that element using ListFooterComponentStyle Click here for more details.
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>
I'm playing with react native and starting to build my first app.
I render 3 images to the screen.
One is displayed while the other 2 are not.
The urls are 100% valid and opened properly when pasting the address in browser.
The Image component is created in a a loop so all of them are identical besides the uri.
What can be the problem?
<View style={[styles.flex1, styles.imageRow, {backgroundColor: 'orange'}]}>
{images.map((d, i) => (
<View key={i} style={[styles.flex1, {borderWidth: 2, borderColor: 'black'}]}>
<TouchableOpacity onPress={() => navigate('Image', {uri: d, coachName})}>
<Image source={{uri: d}} style={{height: 100, width: 100}}></Image>
</TouchableOpacity>
</View>))}
</View>
working image url:
https://firebasestorage.googleapis.com/v0/b/judoka-6de90.appspot.com/o/borochov1.jpg?alt=media&token=13f09af6-e8a9-42bc-bf8f-dee58891cca7
not working:
https://firebasestorage.googleapis.com/v0/b/judoka-6de90.appspot.com/o/coaches%2Fliran1.jpg?alt=media&token=28738b27-dcdb-4c55-8af0-93413b6c6ea6
https://firebasestorage.googleapis.com/v0/b/judoka-6de90.appspot.com/o/coaches%2Fliran2.jpg?alt=media&token=301f176f-5f94-422b-a80e-ec059d091059
reducing the images size solved the issue.