How to set arrow icon center to the screen end in list item in react native - react-native

I am new to react native, In my application I have list. So that i have taken flatlist. I have designed the list item. But arrow icon need to set end of the item. I have tried many ways how to do this.
This is the my code
<View style={styles.MainContainer}>
<FlatList
data={ this.state.FlatListItems }
ItemSeparatorComponent = {this.FlatListItemSeparator}
renderItem={
({item}) =>
<View style={styles.main}>
<View style={styles.itemContainer}>
<View>
<Image source={require('./resource/ic_drawer.png')} />
<Text style={styles.item} onPress={this.GetItem.bind(this, item.key)} >
{item.key}
</Text>
</View>
<View style={styles.balanceItem}>
<View>
<Text >Balance</Text>
<Text >$89.04</Text>
</View>
<View style={styles.subItem}>
<View>
<Text >Account number</Text>
<Text >743509-001</Text>
</View>
<View style={styles.balanceItem}>
<Text >Meter number</Text>
<Text >17976849</Text>
</View>
</View>
</View>
<View style={styles.balanceItem}>
<View style={styles.duenbuttonItem}>
<View>
<Text >Due Date</Text>
<Text >30/09/2016</Text>
</View>
</View>
<TouchableOpacity style={styles.btn} onPress={this.login}><Text style={{color: 'white'}}>PAY NOW</Text></TouchableOpacity>
</View>
</View>
<Image source={require('./resource/arrow_24.png')} style={styles.arrowImage}/>
</View>
}
/>
</View>
and this is my styles
const styles = StyleSheet.create({
MainContainer :{
// Setting up View inside content in Vertically center.
justifyContent: 'center',
flex:1,
margin: 10
},
item: {
padding: 0,
fontSize: 18,
},
itemContainer :{
flex: 1,
flexDirection: 'row',
padding : 10,
},
subItem: {
marginTop: 10,
flexDirection: 'row',
},
btn:{
borderRadius: 10,
alignSelf: 'stretch',
backgroundColor: '#003366',
padding: 10,
marginTop: 10,
alignItems: 'center',
},
balanceItem: {
marginLeft: 5,
},
duenbuttonItem: {
marginLeft: 10,
flexDirection: 'row',
},
arrowImage: {
justifyContent: 'flex-end',
justifyContent: 'center',
},
main:{
flex: 1,
}
});
And this the output of the above code
Here my requirement is the arrow image end of the item in center. So please guide me how to do this?

Related

First show the profile clicked then swipe between profiles react native

Hi how can I first show the user that I've clicked on and then display a swiper ? I can't find a logic for that. I have a list of users and when I click on one, it should open a new component where we will find more infos about that user. Then I want to swipe between the list of users on the same component of the description ?
Here are my user profile component and the flatlist :
render () {
var colorConnected;
if (this.props.navigation.getParam('Statut') === "ON") {
colorConnected = "#1fbc26";
}
else if (this.props.navigation.getParam('Statut') === "OFF") {
colorConnected = "#ff0303";
}
else {
colorConnected = "#ffd200";
}
return (
<Swiper showsPagination={false}>
{this.state.items.map((item, key) => {
return (
<ScrollView style = {styles.view_container}>
<View style={styles.photo}>
<ImageBackground source={{uri:this.props.navigation.getParam('Photo')}} style={{ width: '100%', height: '100%' }}>
<View style={styles.photo_content}>
<LinearGradient colors={['transparent', 'rgba(0,0,0,0.5)']} style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 80 }} />
<View style={{ flexDirection: 'row', alignItems: 'center' }}>
<View>
<Text style={{ fontSize: 40, color:'white' }}>{this.props.navigation.getParam('Age')}</Text>
</View>
<View style={{ marginRight: 7, marginLeft: 7, backgroundColor: '#ffffff', width: 1, height: 39 }}></View>
<View style={{ flexDirection: 'column', flex:1 }}>
<View style={{ flexDirection: 'row' }}>
<View style={[styles.bulle_presence, { backgroundColor: colorConnected } ]}></View>
<Text style={{ fontSize: 18, fontWeight: '600', color:'white' }}>{this.props.navigation.getParam('Pseudo')}</Text>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-between'}}>
<Text style={{ fontSize: 15, color:'white' }}>{this.props.navigation.getParam('Distance')}</Text>
<Text style={{ fontSize: 15, color:'white'}}>{this.props.navigation.getParam('Genre')}</Text>
</View>
</View>
</View>
</View>
</ImageBackgroud>
</View>
</ScrollView>
)
})}
</Swiper>
)}
}
render() {
GLOBAL.data = this.state.dataSource;
//console.log(GLOBAL.data);
return (
<SafeAreaView style={{ flex:1 }}>
<View style={styles.main_container}>
<FlatList style={styles.flatList}
data={this.state.dataSource}
extraData = {this.state}
keyExtractor={(item, index) => item.MembreId}
renderItem={(item) => <UserItem user={item} displayDetailForUser={this._displayDetailForUser} />}
numColumns={numColumns}
refreshing={this.state.refreshing}
onRefresh={this.handleRefresh} />
</View>
</SafeAreaView>
)
}
With this code, I'm only able to swipe on the user where I've clicked. The others user are not showing.
You can open a modal then use a carousel like react-native-snap-carousel in full screen mode to generate your use case

react native Modal opening from last object in array

I am creating a render method where it displays information from a state array, and I want it so that when a user touches a Card a Modal will open presenting the same information.
My code is as follows:
this.state = {
fontLoaded: false,
feed: [{
username: ["Jeff", "Kyle", "David"],
caption: ["Great", "Amazing", "Not so Good"],
comments: ["Comment 1", "Comment 2", "No Comment"],
photo:[Pic1,Pic2,Pic3],
}]
}
state = {
isModalVisible: false,
};
toggleModal = () => {
this.setState({ isModalVisible: !this.state.isModalVisible });
};
renderFeed = () => {
return this.state.feed.map((card, index) => {
return card.username.map((username, i) => {
if(card.caption[i])
return (
<View>
<TouchableHighlight onPress={this.toggleModal} underlayColor="white">
<Card
key={`${i}_${index}`}
image={card.photo[i]}
containerStyle={{borderRadius:10, marginRight:1, marginLeft:1,}}>
<View
style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between' }}
>
<View style={{ flexDirection: 'row'}}>
<Avatar
size="small"
rounded
source={card.photo[i]}
/>
</View>
<View style={{flexDirection:'row'}}>
<Avatar
rounded
icon={{ name:'heart-multiple-outline', type:'material-community', color: '#ff4284'}}
overlayContainerStyle={{marginLeft:5}}
reverse
size='small'/>
<Avatar
reverse
rounded
icon={{ name:'comment-processing-outline', type:'material-community' }}
overlayContainerStyle={{backgroundColor: '#dbdbdb',marginLeft:5}}
size='small'/>
</View>
</View>
{ this.state.fontLoaded == true ? (
<View style={{flexDirection:'row'}}>
<Text style={{fontFamily: 'MontserratB', color:'#bf00b9', marginTop:10}}>{username}</Text>
<Text style={{fontFamily:'Montserrat', marginTop:10}}>{card.caption[i]}</Text>
</View>
) : (<Text> Loading...</Text>)
}
<Text style={{marginTop:4, color:'#878787'}}>{card.comments[i]}</Text>
</Card>
</TouchableHighlight>
<Modal
animationIn="zoomInDown"
animationOut="zoomOutDown"
animationInTiming={700}
animationOutTiming={600}
backdropTransitionInTiming={600}
backdropTransitionOutTiming={600}
isVisible={this.state.isModalVisible}>
<Image source={card.photo[i]}
style={{width: SCREEN_WIDTH - 20,
height: 300, justifyContent: 'center', alignSelf:
'center' }}/>
<Card
containerStyle={{ width: SCREEN_WIDTH - 20, marginTop: 0, justifyContent: 'center', alignSelf:
'center' }}>
<View style={{ flexDirection:'row' }}>
<Avatar
size="small"
rounded
source={card.photo[i]}
/>
<View style={{ flex:2, flexDirection:'row', justifyContent:'flex-end' }}>
<Avatar
rounded
icon={{ name:'heart-multiple-outline', type:'material-community'}}
overlayContainerStyle={{backgroundColor: '#ff4284',marginLeft:5}}
reverse
size='small'/>
<Avatar
reverse
rounded
icon={{ name:'comment-processing-outline', type:'material-community' }}
overlayContainerStyle={{backgroundColor: '#dbdbdb',marginLeft:5}}
size='small'/>
</View>
</View>
<View style={{ flexDirection:'row' }}>
<Text style={{fontFamily: 'MontserratB', color:'#bf00b9', marginTop:10}}>{username}</Text>
<Text style={{fontFamily:'Montserrat', marginTop:10}}>{card.caption[i]}</Text>
</View>
<Text style={{marginTop:4, color:'#878787'}}>{card.comments[i]}</Text>
</Card>
<Button style={{marginTop:0, borderBottomRightRadius: 20, borderBottomLeftRadius: 20, borderTopLeftRadius: 0, borderTopRightRadius: 0, width: SCREEN_WIDTH - 20, alignSelf: 'center', justifyContent: 'center'}} title="Close" onPress={this.toggleModal} />
</Modal>
</View>
);
return <React.Fragment />;
});
})
}
everything works perfectly except that no matter which Card is touched a Modal is opened presenting the last objects in the array. So no matter which of the three cards are pressed, a Modal will always open with the information regarding David
Modified snack version of your sample:
https://snack.expo.io/H1yHPQQdr

Place a component to middle right in React Native

I am still learning about react native especially flexbox. So I have a TouchableOpacity that have some child components on it, like this:
And the problem is I can't move that arrow icon to the middle right of TouchableOpacity. I try with
justifyContent: 'center', alignItems: 'flex-end' But nothing happened. Here is my code :
<TouchableOpacity onPress={this.onRowPress}>
<View style={{ padding: 5 }}>
<CardSection style={{ flex: 1 }}>
<Icons name="monitor" size={50} style={{ paddingLeft: 10 }} />
<View style={{ flexDirection: 'column' }}>
<Text style={styles.channelStyle}>
{item.nama}
</Text>
<Text
style={
[item.status === 'Online' ? onlineTextStyle : offlineTextStyle]
}
>
{item.status}
</Text>
</View>
<Icons name="arrow-right" size={50} style={styles.arrowIconStyle} />
</CardSection>
</View>
</TouchableOpacity>
And this is the style:
const styles = {
channelStyle: {
fontSize: 25,
paddingLeft: 30
},
onlineTextStyle: {
paddingLeft: 30,
color: 'green'
},
offlineTextStyle: {
paddingLeft: 30,
color: 'red'
},
footerTextStyle: {
flex: 1,
textAlign: 'center',
color: '#fff',
padding: 5,
fontSize: 18
},
arrowIconStyle: {
justifyContent: 'center',
alignItems: 'flex-end'
}
};
Is there something I missed?
Could you try the following and let me know how it goes?
// 1. Add flexDirection row here.
<CardSection style={{ flex: 1, flexDirection: 'row' }}>
...code...
// 2. Add alignSelf here.
<Icons name="arrow-right" size={50} style={[styles.arrowIconStyle, {alignSelf: 'flex-end'}]} />
</CardSection>
If that doesn't work, try not doing the previous step 2 and instead try this.
...code...
<Icons name="arrow-right" size={50} style={styles.arrowIconStyle} />
const styles = {
...code...
arrowIconStyle: {
justifyContent: 'center',
alignSelf: 'flex-end'
}
};
Update
<TouchableOpacity onPress={this.onRowPress}>
<View style={{ padding: 5 }}>
<CardSection style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between'}}>
<View style={{ flex: 1 }}>
<Icons name="monitor" size={50} style={{ paddingLeft: 10 }} />
<View style={{ flexDirection: 'column' }}>
<Text style={styles.channelStyle}>
{item.nama}
</Text>
<Text
style={[item.status === 'Online' ? onlineTextStyle : offlineTextStyle]}>
{item.status}
</Text>
</View>
</View>
<Icons name="arrow-right" size={50} style={styles.arrowIconStyle} />
</CardSection>
</View>
</TouchableOpacity>

Align 3 dynamic views in one row

i want to align 3 Views in a row:
|Icon| |Title| |Buttons|
The Title can be more than one line. The buttons are 0-3 Buttons, so their width is unknown to me.
Now the problem is, if I got more than one line in the title the buttons are cut off. How can i solve this and make sure the buttons are always on the screen and the title just has the space that is left?
On this screenshot 2 listitems are visible. Both should have 3 buttons on the right, but with the long title in the second row, the buttons are cut off
render() {
return (
<TouchableHighlight style={styles.view} underlayColor={'#eee'} onPress={this.props.navigateToDetails}>
<View style={{flex: 1}}>
<View style={styles.header}>
<View style={styles.headerTitle}>
<MaterialIcons style={styles.icon} name={"worker"}/>
<MentionsText style={styles.title}
>
{this.props.siteVisitNote.title}
</MentionsText>
</View>
<View style={styles.buttons}>
<FontAwesomeIcons style={styles.icon} name="tag"/>
{Utils.objectExists(this.props.siteVisitNote.attachments) || true ?
<FontAwesomeIcons style={styles.icon} name="paperclip"/> : null}
{Utils.objectExists(this.props.siteVisitNote.images) || true ?
<FontAwesomeIcons style={styles.icon} name="picture-o"/> : null}
</View>
</View>
<MentionsText style={styles.text}
>{this.getText()}</MentionsText>
</View>
</TouchableHighlight>
)
}
}
const styles = StyleSheet.create({
header: {
flexDirection: 'row',
justifyContent: "space-between",
},
headerTitle: {
flexDirection: 'row'
},
view: {
flex: 1,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#efeff4',
padding: 8,
minHeight: 40,
},
buttons: {
flexDirection: "row",
alignSelf: 'flex-end',
},
icon: {
fontSize: 20,
paddingRight: 5,
color: "#333333",
padding: 8
},
title: {
color: "#333333",
fontSize: 14,
fontWeight: 'bold',
padding: 8,
},
text: {
color: "#333333",
fontSize: 14,
padding: 8
}
});
Thanks!
Add flex: 1 to headerTitle, and title.
If that doesn't work see my working example of this layout here which you can compare.
https://gist.github.com/WilliamIPark/2ad3ecf47c5c1e559086e4b10d0cf018
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
ScrollView
} from 'react-native';
export default class App extends Component {
render() {
return (
<ScrollView
style={{ backgroundColor: '#edf2f9'}}
contentContainerStyle={styles.container}
>
<View style={styles.card}>
<View style={styles.header}>
<View style={styles.iconTitle}>
<View style={styles.icon} />
<Text>Hello world</Text>
</View>
<View style={styles.buttonWrap}>
<View style={styles.button} />
<View style={styles.button} />
<View style={styles.button} />
</View>
</View>
<View>
<Text>
Some other content...
</Text>
</View>
</View>
<View style={styles.card}>
<View style={styles.header}>
<View style={styles.iconTitle}>
<View style={styles.icon} />
<Text style={styles.title}>
Hello world this is some really long title right here, that
goes on and on and on. And then some!
</Text>
</View>
<View style={styles.buttonWrap}>
<View style={styles.button} />
<View style={styles.button} />
<View style={styles.button} />
</View>
</View>
<View>
<Text>
Some other content...
</Text>
</View>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#edf2f9',
},
card: {
backgroundColor: 'white',
height: 200,
width: 320,
shadowColor: 'black',
shadowOpacity: 0.25,
shadowOffset: {x: 10, y: 10},
padding: 10,
marginTop: 10,
},
header: {
borderBottomWidth: 0.5,
borderBottomColor: 'lightgrey',
flexDirection: 'row',
marginBottom: 10,
justifyContent: 'space-between',
},
iconTitle:{
flexDirection: 'row',
flex: 1,
marginBottom: 10,
},
icon: {
height: 24,
width: 24,
backgroundColor: 'black',
marginRight: 5,
},
title: {
flex: 1,
},
buttonWrap: {
flexDirection: 'row',
},
button: {
height: 24,
width: 24,
backgroundColor: 'red',
marginLeft: 5,
}
});

Layout arrangement in React Native

I'm trying to work on this Instagram layout using React Native:
However, I'm unable to arrange the layout properly. Here is my code:
import React from 'react';
import { StyleSheet, Text, View, Image, Button } from 'react-native';
import StatusBarBackground from './StatusBarBackground';
export default class App extends React.Component {
render() {
return (
<View>
<StatusBarBackground />
<View style={styles.user_profile}>
<View style={styles.container}>
<Image style={styles.image} source={require('./images/user_profile.jpg')}/>
</View>
<View style={{flex: 1, flexDirection: 'row'}}>
<View style={styles.container}>
<Text style={styles.numbers}>128</Text>
<Text style={styles.grey_text}>posts</Text>
</View>
<View style={styles.container}>
<Text style={styles.numbers}>256</Text>
<Text style={styles.grey_text}>followers</Text>
</View>
<View style={styles.container}>
<Text style={styles.numbers}>184</Text>
<Text style={styles.grey_text}>following</Text>
</View>
</View>
<View style={styles.btnContainer}>
<Button title="Edit Profile" color="#000" backgroundColor="#CCC" raised={true} onPress={this.onPressEditProfile} />
</View>
</View>
</View>
);
}
onPressEditProfile(event) {
console.log('Clicked Edit Profile');
}
}
const styles = StyleSheet.create({
user_profile: {
width: '100%',
height: 120,
alignItems: 'flex-start',
flexDirection: 'row',
},
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
image: {
height: 100,
borderRadius: 50,
width: 100,
margin: 10,
alignItems: 'center',
justifyContent: 'center',
},
grey_text: {
color: '#999',
},
numbers: {
fontWeight: 'bold',
},
btnContainer: {
backgroundColor: '#CCC',
borderRadius: 10,
padding: 10,
},
});
It looks like this now:
What did I miss in the layout?
You just applied flexDirection: 'row' to common container so it was cause of your result layout.
I've provided some pseudocode just for your understanding.
const style = StyleSheet.create({
container: {},
infoTopRow: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
infoBottomRow: {
justifyContent: 'center',
alignItems: 'center',
},
});
<View style={...}>
<Avatar/>
<View style={...}> {/* <---- here should be flexDirection: 'column' or just don't set any value for it */}
<View style={style.infoTopRow}>
<InfoBlock title="posts" value="128" />
<InfoBlock title="followers" value="256" />
<InfoBlock title="following" value="184" />
</View>
<View>
<Button title="Edit Profile" />
</View>
</View>
</View>
You are missing one more wrapper column view
<View>
<StatusBarBackground />
<View style={styles.user_profile}>
//Make this container something like flex:0.2
<View style={styles.container}>
<Image style={styles.image} source={require('./images/user_profile.jpg')}/>
</View>
// You need another column view wrapper
<View style={{flex:0.8}}>
<View style={{flex: 1, flexDirection: 'row'}}>
<View style={styles.container}>
<Text style={styles.numbers}>128</Text>
<Text style={styles.grey_text}>posts</Text>
</View>
<View style={styles.container}>
<Text style={styles.numbers}>256</Text>
<Text style={styles.grey_text}>followers</Text>
</View>
<View style={styles.container}>
<Text style={styles.numbers}>184</Text>
<Text style={styles.grey_text}>following</Text>
</View>
</View>
<View style={styles.btnContainer}>
<Button title="Edit Profile" color="#000" backgroundColor="#CCC" raised={true} onPress={this.onPressEditProfile} />
</View>
</View>
</View>
</View>