I wrote the following code with react-native for API
renderItem={({item})=><Text style={styles.item}> {item.title.rendered + item.excerpt.rendered } </Text>}
But I want the second item to be below the first item
Thank you for guiding me
You just have to make a View and put your two elements in Text inside.
<View>
<Text>{item.title.rendered </Text>
<Text> {item.excerpt.rendered} </Text>
</View>
Related
I'm having issue on how to render a HTML API data name description in my react native code. Currently, the API data is in HTML format: HTML Format Data Image . I want to convert it to normal text like this: Normal Text Image. Please do help me out to solve this problem.
Given HTML API Data name: Given API Data name Image
This is my code:
return (
<ScrollView style={[GlobalStyle.CustomScrollView]}>
<HeaderBar3/>
<Text style={[GlobalStyle.EventTitle]}> Event Details</Text>
<View style={[GlobalStyle.EventDetailView]}>
<Image style={[GlobalStyle.EventDetailImage]} source={{uri: eventData.main_image}} resizeMode="contain"/>
<Text style={[GlobalStyle.EventSubtitle]}>Date:</Text>
<Text style={[GlobalStyle.EventDate]}>{date}</Text>
<Text style={[GlobalStyle.EventTime]}>{startTime}{'-'}{endTime}</Text>
<Text style={[GlobalStyle.EventSubtitle]}>Venue:</Text>
<Text style={[GlobalStyle.EventDescr]}>{eventData.venue}</Text>
<Text style={[GlobalStyle.EventSubtitle]}>Ticket:</Text>
<Text style={[GlobalStyle.EventTicketPrice]}>{eventData.promotional_price}</Text>
<Text style={[GlobalStyle.EventSubtitle]}>Description:</Text>
<Text style={[GlobalStyle.EventDescr]}>{eventData.description}</Text>
</View>
</ScrollView>
);
You can remove the HTML tags using .replace() method. Try this:
<Text style={[GlobalStyle.EventDescr]}>{eventData.description.replace(/(<([^>]+)>)/ig,'')}</Text>
Check the documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace
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 want to return images in flatlists .
first of all this array qwer[] contains url links the images init
it evens console.logs it gets the links from an api .
i have manually tried putting images in View tag with the source and it works .
but when i do with with flatlists it shows no error but doesnot display images .
Can u help me please ?
return(
<FlatList
horizontal
showsHorizontalScrollIndicator={false}
data={qwer}
renderItem={({ item }) => (
<Image
source={({uri:item})}
style={{
width:260,
height:300,
borderWidth:2,
borderColor:'#d35647',
resizeMode:'contain',
margin:8
}}
/>
)}
/>
In your code just replace
source={({uri:item})}
to
source={{uri : item}}
I have a simple shopping cart page in React Native app and I have "plus/minus" buttons for amount of each item.
I have 2 questions:
1- What is the best way to update items price when I tap to change the amount of each item? Should each price be an State?
2- Actually, I can statically change amount of each item in cart, but when I change any RN State, all items amounts I've changed is lost. How can I save my actions for not lose it all at states change?
<ScrollView>
<View style={styles.items} product="1">
<Avatar
size="large"
rounded
source={{ uri: "https://picsum.photos/80/80?random" }}
/>
<View style={styles.text}>
<Text style={styles.title}>Uva Prata</Text>
<Text style={styles.price}>R$ <Text style={styles.money}>4,90</Text> <Text style={styles.unit}>/ kg</Text></Text>
</View>
<View style={styles.amount}>
<NumericInput rounded
onChange={ } />
</View>
</View>
...other view
...other view
...other view
...
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