Develop Reference

How to add an icon to a button in react-native

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>

.map() function displays my hidden animated view for each child in React Native. And I am using keys and id

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>```

Disable only horizontal scrolling in FlatList

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,

is there way to put text "cancel" and "ok" below the avatar buttons ? i mean that the avatar and the text need to be pressable when click

is there a way to put the text "cancel" and "ok" below the avatar button? I mean that the avatar and the text need to be pressable when click.
I can't put the text below to every button and I don't understand what is my mistake.
this is what I get now
but I need the text below to every button and also must be also pressable same the image (it should be part of the button)
this is my example of code :
const OrderInformationScreen = props => {
return (
<View
style={{
backgroundColor: '#00BFFF',
alignItems: 'flex-start',
justifyContent: 'center',
marginTop: 30,
borderBottomWidth: 2,
borderColor: 'blue',
flexDirection: "row",
justifyContent: 'space-evenly'
}}
>
<Avatar
size='large'
containerStyle={{ marginTop: 30 }}
activeOpacity={0.2}
rounded
source={require('../assets/down.png')} style={{ height: 80, width: 80 }}
onPress={() => console.log("cancel!")}
/>
<View >
<Text style={{ fontSize: 30 }}>cancel</Text>
</View>
<Avatar
size='large'
activeOpacity={0.2}
rounded
source={require('../assets/up.png')} style={{ height: 80, width: 80 }}
onPress={() => console.log("Works!")}
/>
<View>
<Text style={{ fontSize: 30 }}>ok</Text>
</View>
</View>
);
};

I think the best option is wrapping the avatar and the text by TouchableOpacity.
<TouchableOpacity onPress={() => console.log("cancel!")}>
<Avatar
size='large'
containerStyle={{ marginTop: 30 }}
activeOpacity={0.2}
rounded
source={require('../assets/down.png')} style={{ height: 80, width: 80 }}
/>
<View >
<Text style={{ fontSize: 30 }}>cancel</Text>
</View>
</TouchableOpacity>
I recommend to write your own styles by using basic react native elements. Try to use least number of 3rd party plugins. Good luck.

It is like that because of the styles you have given to view. You have given a flex direction row which will place all your elements in a row. You have given four elements in your root view which has style flex-direction row so all four elements in that view (2 Avatar component and 2 text) will be placed side by side in a row.
if you want text below image i thin you should put avatar and text box in a view and give that a view a flex-direction column like:
<View style={{flexDirection: 'row', justifyContent: 'space-evenly'}}>
<TouchableOpacity onPress={() => console.log("cancel!")>
<View style={{flexDirection: 'column', justifyContent: 'space-evenly'}}>
<Avatar>
<View>
<Text />
</View>
<View>
</TouchableOpacity>
<TouchableOpacity onPress={() => console.log("works!")>
<View style={{flexDirection: 'column', justifyContent: 'space-evenly'}}>
<Avatar>
<View>
<Text />
</View>
<View>
</TouchableOpacity>
<View>
hope this helps in someway :)

The best option is Wrapping the avatar and text with TouchableOpacity. and Add some more Styles like below
<TouchableOpacity style={{
backgroundColor: '#00BFFF',
display : "flex",
alignItems: 'flex-start',
justifyContent: 'center',
marginTop: 30,
borderBottomWidth: 2,
borderColor: 'blue',
}} onPress={() => {}>
<Avatar
size='large'
containerStyle={{ marginTop: 30 }}
activeOpacity={0.2}
rounded
source={require('../assets/down.png')} style={{ height: 80, width: 80 }}
/>
<View >
<Text style={{ fontSize: 30 }}>cancel || ok</Text>
</View>
</TouchableOpacity>

How to pass id for call api in react native or get unique id on press of image?

<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 }}
>