I'm creating a button using <TouchableOpacity> on react-native.
<View style = {{
flex: 1,
justifyContent: 'flex-end',
paddingBottom: 30,
}}>
<TouchableOpacity
style = {{
justifyContent: 'center',
padding: 10,
height: 30,
width: '100%',
flexDirection: 'row',
}}
onPress = {() => {
this.props.navigation.navigate('Login');
firebase.auth().signOut();
}}>
<Icon
name = 'log-out'
type = 'feather'
color = 'black' />
<Text style = {{
fontWeight: 100,
fontSize: 20
}}>
LOGOUT
</Text>
</TouchableOpacity>
</View>
The output
How do I align the icon and text to the left? And is there a way I can make the icon fully appear?
You can use images that works same as iconsYou can download some great icons from google fonts icons
check this out https://fonts.google.com/icons
So your code will be
<View style = {{
flex: 1,
justifyContent: 'flex-end',
paddingBottom: 30,
}}>
<TouchableOpacity
style = {{
justifyContent: 'center',
padding: 10,
height: 30,
width: '100%',
flexDirection: 'row',
}}
onPress = {() => {
this.props.navigation.navigate('Login');
firebase.auth().signOut();
}}>
<Image src={source to your image} style={{add your style}}/>
</TouchableOpacity>
</View>
Related
I'm practicing with React Native: in this list every entry returned for my database is composed by 3 items:
Now I want my screen to look like this:
My code is:
<ListItem bottomDivider>
<ListItem.Content style={{textAlign:'left'}}>
<ListItem.Title>{item.title}</ListItem.Title>
<ListItem.Subtitle
style={{color: '#9D7463'}}>
<Image
style={{ alignSelf: "center", borderRadius: 50 }}
source={{ uri: item.probability, width: 48, height: 48 }}
/>
</ListItem.Subtitle>
<ListItem.Subtitle
style={{color: '#000', textTransform: 'uppercase'}}>
{item.country_id}
</ListItem.Subtitle>
<Button
buttonStyle={{backgroundColor: primaryColor, padding: 9, textAlign: "right"}}
title="Follow"
onPress={() => alert(item.id_user)}
/>
</ListItem.Content>
</ListItem>
You need to change the flexDirection to row. Notice that this is different from the web:
Flexbox works the same way in React Native as it does in CSS on the web, with a few exceptions. The defaults are different, with flexDirection defaulting to column instead of row
Thus, changing the flexDirection to row of the parent view, and setting flex:1 for each child, should solve the issue.
<ListItem.Content style={{flexDirection: "row"}}>
<ListItem.Subtitle
style={{color: '#9D7463', flex: 1}}>
<Image
style={{ alignSelf: "center", borderRadius: 50 }}
source={{ uri: item.probability, width: 48, height: 48 }}
/>
</ListItem.Subtitle>
<ListItem.Subtitle
style={{color: '#000', textTransform: 'uppercase', flex: 1}}>
{item.country_id}
</ListItem.Subtitle>
<Button
buttonStyle={{backgroundColor: primaryColor, padding: 9, textAlign: "right", flex: 1}}
title="Follow"
onPress={() => alert(item.id_user)}
/>
</ListItem.Content>
In this component you can use flexbox
<ListItem.Content style={{width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
I have a hidden animated view that displays when you click on the specific account name. Currently, when you click an account name, the animated hidden view displays for all the children in the .map() function. I tried adding the key and id to the animated view as well but that does not work either. Still shows the hidden animated view for all the children in the map.
<ScrollView style={{flex: 1}} showsVerticalScrollIndicator={true}>
{accounts.map(account => (
<View key={account.id} id={account.id}>
<View
style={{
width: '100%',
backgroundColor: colors.primary,
borderRadius: 10,
padding: 10,
marginBottom: 10,
marginTop: 10,
zIndex: 1,
}}>
<View
style={{
flex: 1,
flexDirection: 'row',
}}>
<Text
onPress={() => setHidden(!hidden)}
style={{
fontSize: 30,
textAlign: 'left',
flex: 1,
marginTop: 'auto',
marginBottom: 'auto',
}}>
{account.name}
</Text>
<View>
<Text
style={{
fontSize: 30,
textAlign: 'right',
flex: 1,
marginBottom: 10,
}}>
{account.amount}
</Text>
<View
style={{
flexDirection: 'row',
justifyContent: 'flex-end',
}}>
<DeleteAccount account={account.name} />
<Icon name="wrench" size={25} color="#000000" />
</View>
</View>
</View>
</View>
{hidden ? (
<Animated.View
key={account.id}
id={account.id}
style={[
styles.subView,
{transform: [{translateY: bounceValue}]},
]}>
<Text>{account.name}</Text>
</Animated.View>
) : null}
</View>
))}
</ScrollView>```
How can I disable only horizontal scrolling on my FlatList? Putting it to false doesnt work. I want to be able to scroll it vertically but not horizontally.
<FlatList
data={data.me.friends.nodes}
//horizontal={false}
//scrollEnabled={false}
renderItem={({ item }) => (
<FriendItem friend={item} originatorId={data.me.id}/>
)}
keyExtractor={(item) => item.id.toString()}
ListEmptyComponent={NoFriendsContainer}
/>
FriendItem's return. FriendItem is the renderItem which is being used in the FlatList:
return (
<View style={styles.item}>
<TouchableOpacity
onPress={() =>
navigation.navigate('FriendDetails')
}>
<Thumbnail
style={styles.thumbnail}
source={{
uri:
'https://cdn4.iconfinder.com/person-512.png',
}}></Thumbnail>
</TouchableOpacity>
<View style={styles.nameContainer}>
<Text style={styles.userName}>{userName}</Text>
</View>
<View style={styles.deleteButtonContainer}>
<Button
rounded
style={styles.deleteButton}
onPress={() => onDeleteFriend(originatorId, friend.id)}>
<Icon name="trash-o" size={moderateScale(20)} color="black" />
</Button>
</View>
</View>
);
};
Styles:
export const styles = StyleSheet.create({
item: {
backgroundColor: 'white',
borderRadius: moderateScale(20),
padding: moderateScale(20),
marginVertical: moderateScale(8),
marginHorizontal: 16,
height: moderateScale(110),
width: moderateScale(360),
justifyContent: 'space-between',
flexDirection: 'row',
},
userName: {
paddingRight: 55,
paddingLeft: 10,
paddingTop: 20,
},
deleteButton: {
backgroundColor: '#31C283',
width: moderateScale(45),
justifyContent: 'center',
},
deleteButtonContainer: {
paddingTop: 12,
marginRight: 2,
},
thumbnail: {
height: 85,
width: 85,
marginLeft: 2,
paddingRight: 0,
position: 'relative',
},
nameContainer: {
flexDirection: 'row',
},
});
Edit:
When there are 4 items, it seems to be okay but as soon as another item is added to the list, the last item is disturbed and is overlapped with the footer? of the app.
It should actually be behind it so that we can scroll down and see the next items.
horizontal parameter is not related to horizontal scroll.
https://reactnative.dev/docs/flatlist#horizontal
If true, renders items next to each other horizontally instead of stacked vertically.
Your 'scroll issue' is your FriendItem , the issue is the width: moderateScale(360).
If you want your item be full width, with margin, you can just remove it.
Example with moderateScale(360)
Example removing width
item: {
backgroundColor: "white",
borderRadius: moderateScale(20),
padding: moderateScale(20),
marginVertical: moderateScale(8),
marginHorizontal: 16,
height: moderateScale(110),
justifyContent: "space-between",
flexDirection: "row",
}
Hope it helps you.
Regards,
<ScrollView horizontal pagingEnabled snapToInterval={200}>
{this.state.json_arr.map((item, index) => (
<View
key={item.user_id}
style={{
paddingBottom: 40,
justifyContent: "center",
alignItems: "center",
padding: 5
}}
>
<TouchableOpacity onPress={this.fullsize_image}>
<Image
source={{ uri: this.state.url + item.image }}
style={{ width: 380, height: 400 }}
/>
</TouchableOpacity>
<View
style={{
flexDirection: "row",
paddingBottom: 50,
position: "absolute",
top: 0,
marginTop: 320,
left: 0,
right: 0,
bottom: 0,
justifyContent: "center",
alignItems: "center"
}}
>
<Text style={{ color: "white", fontSize: 22 }}>
{item.user_id}.
</Text>
<Text style={{ color: "white", fontSize: 22 }}>
{item.age}.
</Text>
<Text
style={{ color: "red", paddingLeft: 5, fontSize: 22 }}
>
{item.nick_name}
</Text>
<Text
style={{ color: "red", paddingLeft: 5, fontSize: 22 }}
>
{" "}
{item.user_location}
</Text>
</View>
</View>
))}
</ScrollView>
In the above code I mapping a array and getting data like image , user_id etc. but I need user set to state for call another api using this id. suppose when i press image than id of this image generated and pass for call api.below I attached a image in which comment, like option avaiale when comment on paticular image than comment should save for this user_id. so please guide how to make logic for that.
Right there on Tag which write a function to carry the event handler function which in turn calls a util to send this id to API as below
<Image onPress = {() => api.sendToAPI(item.id);}
source={{ uri: this.state.url + item.image }}
style={{ width: 380, height: 400 }}
>
Within a popup dialog I want to buttons to be placed on the same line but now I'm getting like this https://i.stack.imgur.com/sJ30p.png.Following is the style given.
<PopupDialog
ref={popupDialog => {
this.popupDialog = popupDialog;
}}
dialogStyle={{ backgroundColor: "#ddd", height: 200, width:320, border:10,padding:10}}
overlayBackgroundColor="#fff"
dismissOnTouchOutside={true}
>
<View style={styles.dialogContentView}>
<Text style={{fontSize:18}}>Are you sure you want to submit?</Text>
<View style={styles.button_1}>
<Button
title="Yes"
onPress={() => {
console.log('clicked')
}}
/>
</View>
<View style={styles.button_1}>
<Button
title="No"
onPress={() => {
console.log('clicked')
}}
/>
</View>
</View>
</PopupDialog>
.....
....
dialogContentView: {
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between'
},
button_1:{
width: '40%',
height: 30,
}
Add View parent to both Button component with style flexDirection: 'row' after </Text>
<View style={{ flexDirection: 'row' }}>
<View style={styles.button_1}>
<Button
title="Yes"
onPress={() => {
console.log('clicked');
}}
/>
</View>
<View style={styles.button_1}>
<Button
title="No"
onPress={() => {
console.log('clicked');
}}
/>
</View>
</View>
You can try this snack
Try this for full width without any spaces or margin JUST COPY PASTE
<View style={{ flexDirection: "row" }}>
<View style={{ flex: 1 }}>
<TouchableOpacity style={{ alignSelf: 'stretch',backgroundColor: '#2980B9' }} onPress={() => { onSavePress }}>
<Text style={{ alignSelf: 'center',
color: '#ffffff',
fontSize: 16,
fontWeight: '600',
paddingTop: 10,
paddingBottom: 10 }}>Save</Text>
</TouchableOpacity>
</View>
<View style={{borderLeftWidth: 1,borderLeftColor: 'white'}}/>
<View style={{ flex: 1}}>
<TouchableOpacity style={{ alignSelf: 'stretch',backgroundColor: '#2980B9'}} onPress={() => { onCancelPress }}>
<Text style={{ alignSelf: 'center',
color: '#ffffff',
fontSize: 16,
fontWeight: '600',
paddingTop: 10,
paddingBottom: 10 }}>Cancel</Text>
</TouchableOpacity>
</View>
</View>
To do that, I usually create a view, set its flexDirection to 'row' and put the button components inside of it. So, your code would look like this:
<View style={{ flexDirection: 'row' }}>
<Button title='Button 1'/>
<Button title='Button 2'/>
</View>
I hope it helps.