How to render something in an if statement React Native - javascript

Problem
I am using a flatlist in react native, and want to compare to variables in the flatlist, and render a text component if the two variables are equal, but render nothing if they are not. I've tried many methods of doing this, but they nothing has worked. I would love some help figuring out a way to do this! Thank you.

Couple ways that spring to mind straight away. Ill just assume what you are trying to compare but you can switch these variables out for whatever you please. First thing you could do is have your text be conditional inside of your Text component, EG
<Text>{this.state.variable == this.props.stuff ? "RENDER TEXT" : ""}</Text>
or, if you want to emit the Text component when variables are not equal, have a function inside of your class that will return the Text component conditionally
renderMessage = () => {
if(this.state.variable == "stuff"){
return(
<Text>They were equal</Text>
);
}else{
return(
<View></View> // OR WHATEVER YOU WANT HERE
);
}
}
...
//Then in your render function
....
<View style = {styles.whatever}>
{this.renderMessage()}
</View>

just compare your data in renderItem method accordingly
<FlatList
data={this.props.data}
renderItem={this._renderItem}
/>
_renderItem = ({item}) => (
if(item=='somthing'){
return <Text> your test </Text>
}else{
return <Text>some other text</Text>
}
);
if you want to compare your text in component then
<View>
{
item.data == 'somthing'
?
<Text>if</Text>
:
<Text>else</Text>
}
</View>

Related

How to get the position of a moving element in React Native

I am currently trying to develop an app with draggable elements using React Native and the library react Native draggable (https://www.npmjs.com/package/react-native-draggable).
My goal is to get the position of my Draggable element. (So I can change their color depending on where it is on the screen).
I tried different method but nothing worked for me. Here is the last thing I tried :
return (
<View>
<Draggable
onDragRelease={event =>
{const layout = event.nativeEvent.layout;
console.log('x:', layout.x);
console.log('y:', layout.y);
}
}
x={positionX}
y={positionY}
renderSize={56}
renderColor='#BDFF00'
renderText={'Drag me'}
// onDrag={getPosition}
/>
</View>
)
The code above returns this error (TypeError: undefined is not an object (evaluating 'layout.x'))
I also tried to do this :
const getPosition = (event) => {
console.log(event.locationX)
setPositionX(event.locationX)
setPositionY(event.locationY)
};
const changerColorFunction = () => {
}
return (
<View>
<Draggable
x={positionX}
y={positionY}
renderSize={56}
renderColor='#BDFF00'
renderText={'Drag me'}
onDrag={getPosition}
/>
</View>
)
Based on the react native Draggable documentation, but it is not working too. I think, I didn't fully understand how it should be working. Any help would be great.

Basic Beginner React-Native State Question

Hello guys I just started learning React-Native and I have a question about state.
I was practicing this concept trying to make a button that shows how many times I've pressed it.
My plan was to make a variable called clicks which will increase by 1 each time I press it and set the clickState to clicks. This is my code.
export default function App() {
const [clickState, setClicks] = useState(0)
let clicks = 0
return (
<View style = {styles.container}>
<StatusBar style="auto" />
<TouchableOpacity style={styles.button} onPress={()=>{setClicks(++clicks); console.log(clicks)}}>
<Text>Clicks : {clickState}</Text>
</TouchableOpacity>
</View>
);
}
this is the console
But apparently something is wrong and my clicks value goes random between 1 and 2 each time I click it instead of increasing by 1.
So I was curious about what I was doing wrong and why the values don't increase as I expected. I would also be glad if you showed how you would implement it if there is a better way.
Thanks guys.
You only need to update clickState, no need of variable clicks.
Also it won't rerender if we increment state value directly, so we should increment state by taking its previous state value like shown below
export default function App() {
const [clickState, setClicks] = useState(0)
return (
<View style = {styles.container}>
<StatusBar style="auto" />
<TouchableOpacity style={styles.button} onPress={()=>setClicks(prevState => prevState + 1)}>
<Text>Clicks : {clickState}</Text>
</TouchableOpacity>
</View>
);
}

How do you render item time under bubble chat react native gifted chat?

I use React Native Gifted Chat To create a UI chat and I want to render the chat time and symbol under the bubble chat.
I want make like this image :
I have tried to use the rendering message but no luck, please help.
I was just working on this my self. What you need to do is to have custom renderBubble in which you wrap the with your own components. It would look something like this. The first part of the code is just the alignment of timestamp to the left or right, depending if the message was written by the current user or not.
renderBubble(props) {
var sameUserInPrevMessage = false;
if (props.previousMessage.user !== undefined && props.previousMessage.user) {
props.previousMessage.user._id === props.currentMessage.user._id ? sameUserInPrevMessage = true : sameUserInPrevMessage = false;
}
var messageBelongsToCurrentUser = currentUserId == props.currentMessage.user._id;
return (
<View>
{!sameUserInPrevMessage && <View
style={messageBelongsToCurrentUser ? styles.messageTimeAndNameContainerRight : styles.messageTimeAndNameContainerLeft}
>
<Bubble
{...props}
/>
<Text style={styles.messageTime}>{moment(props.currentMessage.createdAt).format("LT")}</Text>
<Text style={styles.messageUsername}>{props.currentMessage.user.name}</Text>
</View>}
</View>
)
}
also put this in the GiftedChat component renderMessage={this.renderBubble}

Nesting React components in a variable

I've attached the relevant code in the bottom
Hey guys, I've created a file with multiple button components, and a function component that should render 2 buttons according to the props it receives (for example, render & when in homepage, and render & when in a different page).
The concept being it is to create a single component that will always be rendered in my Layout HOC and will know which buttons to display based on the page url.
The way I tried realizing that buttons function, is by creating a variable that will get the two proper buttons assigned to in a switch case based on the current url, and return that variable.
I try assigning a JSX element made of a React.Fragment that has the 2 relevant button components inside it, but I get an error saying my needs to have a corresponding closing tag..?
I'd really appreciate an explanation as for why it happens, and what would be a proper approach for my use case.
Thanks a lot...!!!
My layout HOC:
const Layout = props => (
<Grid fluid>
<div style={layoutStyles}>
{props.children}
<FloatingButtons page={props.page.pathname} />
</div>
<div style={layoutStyles}>
{ showFooter(props.page.pathname, pagesToShow) && <Footer /> }
</div>
</Grid>
This is my FloatingButtons component:
const FloatingButtons = (props) => {
const { page } = props;
let buttons;
let simplifiedUrl = page.slice(page.lastIndexOf('/') + 1);
switch (simplifiedUrl) {
case 'home':
buttons =
<React.Fragment> ***// Here is where I get the error***
<MenuFloatingBtn {...props} />
<ShareFloatingBtn {...props} />
<React.Fragment/>
break;
case 'otherPage':
buttons = 'etc'
break;
default:
break;
}
return buttons;
};
Instead of declering let buttons.
You can return directly the answer. with no needed for break.
Than the switch will look like this:
switch (simplifiedUrl) {
case 'home':
return (
<React.Fragment> ***// Here is where I get the error***
<MenuFloatingBtn {...props} />
<ShareFloatingBtn {...props} />
<React.Fragment/>);
case 'otherPage':
return 'etc';
default:
return null;
}
Good luck!

onPress doesn't detect props of touchable opacity in react native

onPress doesn't show me the id of my touchable opacity component when I press on it. He just shows me undefined.
render() {
var rows = [];
var i = 0;
while(i<5){
rows.push(<TouchableOpacity id={i} activeOpacity={0.9} onPress={() => alert(this.props.id)}>
<View>
</View>
</TouchableOpacity>);
i++;
}
return {rows}
}
I want to when I press on it, it shows the id of touchable opacity. Please help me
The component you have for this render() function would need to have a prop id for this to show an alert, but I think you are wanting to show each value of i. Due to i never going out of scope within this function (as it is var), if you attempted to just do alert(i) it would show 5 for each button, but if you use const inside the while to store the current value of i, each button will have the correct value:
while (i < 5) {
const temp = i;
rows.push(
<TouchableOpacity
id={i}
activeOpacity={0.9}
onPress={() => alert(temp)}
>
<View />
</TouchableOpacity>,
);
i++;
}
You can't use a prop you are assigning in another prop you are assigning like you were trying to do.

Categories