In my react native app I have a sqlite storage solution and on this page I select a record from my table and use a flatlist to display the value, which works perfectly:
<FlatList
data={this.state.FlatListActivityItems}
ItemSeparatorComponent={this.ListViewItemSeparator}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) => (
<View key={item.id}>
<Text style={styles.textUnderlines}>{item.activity} <Text style={styles.recordsTypes}>
Minutes
</Text></Text>
</View>
)}
/>
The problem is, I need to use the same value of item.activity in another place in this page as a data object which currently uses state
this.state = {activity: ''}
Is there a way on page load that I can just take the value {item.activity} and set it to the activity state so that I can use it anywhere else in the page with the state call?
So where you are getting the data of flatlist, just there get the value and setstate it like below
vartemp = this.state.FlatListActivityItems[0].activity
this.setState({activity:vartemp})
I hope this helps....Thanks :)
Related
I'm developping a React App with React-Bootstrap library.
I display a ShopResume component which render CardGroup element within a map funciton inside to map my data on each Card in my CardGroup.
I would like to Have a max of 3 Cards display by row. But none of all my change seems to work. Somebody could help me to fix it?
For now I have all my Card displayed on only one row. I would like to my render create new row when it displayed already 2 item on a row.
BONUS Question: My ternary operator don't display what it is supposed to even when the condition is true. If any idea where that could come. I will be gratefull.
Thanks a lot for your help and your precious answer like always
class ShopResume extends Component {
state = {};
render() {
return (
<React.Fragment>
{(this.props.filteredResults === [""]) ? "Aucun Résultat" :
( <CardGroup className="card_container">
{this.props.filteredResults.map((detail, index) => {
return (
<Card className="card_item" key={index}>
<Card.Img variant="top" src={detail.imgURL} id="card_img" />
<Card.Body>
<Card.Title className="shopTitle">{detail.nom}</Card.Title>
<Card.Text>{detail.resume}</Card.Text>
<Button variant="primary" onClick={this.props.filterClick}>Détails</Button>
<ListGroup className="list-group-flush">
<ListGroupItem>
{detail.startPrice === "" ? "Sur devis" : 'A partir de ' + detail.startPrice + ' €'}
</ListGroupItem>
</ListGroup>
</Card.Body>
</Card>
);
})}
</CardGroup>)}
</React.Fragment>
);
}
}
export default ShopResume;
You can wrap your list in a Container and a Row. Each item will be a Col item with an xs prop of 4, so that only 3 items will be displayed in one row (12 colums per row / each Card 4 columns = 3 Cards per row). Here is a codepen.
I have text and image in one row. and now I want to put button over the row with exact size of row.
used flexDirection: 'row'
Any help?
You can wrap your text and image inside the TouchableOpacity component
<TouchableOpacity onPress={() => doYourThing()}>
<Text>{yourText}</Text>
<Image source={{}} />
</TouchableOpacity>
If the text and image are already wrapped in a View, you can just replace the View component with the TouchableOpacity component. It takes all the props which View takes.
I have added the button on simple screen and I want to scroll Bottom whenever I press the button. what code to add to button onPress?
render() {
return (
<ScrollView>
{this.yourComponents()}
<Button>Scroll To Bottom </Button>
</ScrollView>
)
}
You could do this using ref.
render() {
return (
<ScrollView ref={scrollView => this.scrollView = scrollView}>
{this.yourComponents()}
<Button onPress={() => {this.scrollView.scrollToEnd()}}>Scroll To Bottom </Button>
</ScrollView>
)
}
You can also do this using the useRef hook.
const scrollView = useRef();
const scrollView = useRef();
const onPress = () => {
scrollView.current.scrollToEnd();
}
<Button onPress={onPress} />
This question is quite similar to this one but isn't exactly the same, that is why i'll provide an answer.
ScrollView provide a ScrollTo() method that allows you to scroll to a x/y position in your scrollview.
let _scrollViewBottom
<ScrollView
ref='_scrollView'
onContentSizeChange={(contentWidth, contentHeight)=>{
_scrollViewBottom = contentHeight;
}}>
</ScrollView>
then use the ref name of the scroll view like
this.refs._scrollView.scrollTo(_scrollViewBottom);
Additionally, if your goal is to frequently push new data and scroll at the end of your scrollview, you might wanna take a look at react-native-invertible-scroll-view.
InvertibleScrollView is a React Native scroll view that can be inverted so that content is rendered starting from the bottom, and the user must scroll down to reveal more. This is a common design in chat applications
For functional component
<ScrollView
ref={ref => { scrollView = ref }}
onContentSizeChange={() => scrollView.scrollToEnd({ animated: true })}
>
...
</ScrollView>
For class component
<ScrollView
ref={ref => { this.scrollView = ref }}
onContentSizeCange={() => this.scrollView.scrollToEnd({ animated: true })}
>
...
</ScrollView>
let _scrollViewBottom
<ScrollView
ref={scrollViewRef}
onContentSizeChange={(contentWidth, contentHeight)=>{
_scrollViewBottom = contentHeight;
// this make move your scroll
scrollViewRef.current.scrollTo({x:0,y:_scrollViewBottom ,animated:true});
}}>
</ScrollView>
Additionally, if your goal is to frequently push new data and scroll at the end of your scrollview, you might wanna take a look at react-native-invertible-scroll-view.
InvertibleScrollView is a React Native scroll view that can be inverted so that content is rendered starting from the bottom, and the user must scroll down to reveal more. This is a common design in chat applications
I'm new to React Native (experiences iOS developer in Swift) and I can't seem to find anything online for how to move UI elements in response to touch events. (Or maybe I'm just really bad at searching stack overflow lol).
Eventually, I want to have a textbox in the center of the screen, and when the user begins to type (or taps on the box to start typing), the box will slide to the top of the screen. However I can't even find a simple tutorial for this. I know that I can have a const style that defines style/position aspects of the textbox, and I can create a second style and then on button tap I can change the textbox's style and re-render, but it seems overkill to make an entire second style, where only one attribute is changing.
Can someone provide sample React Native code, where there is a text label and a button on the screen, and when the user taps the button, the label moves from above the button to below the button?
Check out this example of moving an element on touch. I use a <TouchableWithoutFeedback> and onPressIn. When you touch it, it changes the x and y position of it:
https://snack.expo.io/#noitsnack/onpressin-twice
import React, { Component } from 'react';
import { Text, View, TouchableWithoutFeedback, Image, Dimensions } from 'react-native';
import IMAGE_EXPO from './assets/expo.symbol.white.png'
const IMAGE_SIZE = 100;
export default class App extends Component {
state = {
score: 0,
...getRandXY()
}
render() {
const { score, x, y } = this.state;
return (
<View style={{flex:1, backgroundColor:'steelblue' }}>
<Text style={{fontSize:72, textAlign:'center'}}>{score}</Text>
<TouchableWithoutFeedback onPressIn={this.addScore}>
<Image source={IMAGE_EXPO} style={{ width:IMAGE_SIZE, height:IMAGE_SIZE, left:x, top:y, position:'absolute' }} />
</TouchableWithoutFeedback>
</View>
)
}
addScore = e => {
this.setState(({ score }) => ({ score:score+1, ...getRandXY() }));
}
}
function getRandXY() {
return {
x: getRandInt(0, Dimensions.get('window').width - IMAGE_SIZE),
y: getRandInt(0, Dimensions.get('window').height - IMAGE_SIZE)
}
}
function getRandInt(min, max)
{
return Math.floor(Math.random()*(max-min+1)+min);
}
Once you get this movement down you can move to the Animation API to get teh sliding effect.
I'm working on a eCommerce React Native project. I have a cart component which contains a Listview of all current items within the Cart. The main issue is the styling. I display each product according to quantiy - product name - price and delete button.
So something like this
As you can see the price text is not aligned equally and varies depending on product name. How can I edit the style so all text and buttons within the list view are equal length?
Each Text field can be assigned a flex value like this:
<Text style={{flex: 0.1}}>{product.quantity}x</Text>
<Text style={{padding: 10, flex:0.5}}>{product.name.toString()}</Text>
<Text style={{flex: 0.2}}>£{(product.quantity * product.price).toFixed(2)}</Text>
<TouchableOpacity style={{flex: 0.2}} onPress={() => { this.removeItem(product) }}>
The total of the 0.* should equal to 1.