Issue
I would like the name of the speciality, from the snapshot below, to be on 2 different lines, rather than one, as it appears quite squashed currently. Each line relates to a specific icon so would like them to also be centred directly below each. The first icon for example should be "Cardiac Electrophysiology & Ablation".
I had tried playing around with the numberOfLines and flex wrap but without much success. Thanks
import React, { useEffect, useState } from 'react';
import { View, TouchableOpacity, Text, Image, ScrollView, FlatList } from 'react-native';
import GlobalApi from '../../Services/GlobalApi';
import Colors from '../../../assets/Shared/Colors';
import SubHeading from './SubHeading';
import { useNavigation } from '@react-navigation/native';
export default function Categories() {
const navigation = useNavigation();
const [categoryList, setCategoryList] = useState([]);
useEffect(() => {
getCategories();
}, []);
const getCategories = () => {
GlobalApi.getCategories().then(resp => {
setCategoryList(resp.data.data);
});
};
if (!categoryList) {
return null;
}
return (
<View style={{ marginTop: 10 }}>
<SubHeading subHeadingTitle={'Doctor Speciality'} />
<ScrollView horizontal showsHorizontalScrollIndicator={false}>
<FlatList
data={categoryList}
numColumns={5}
columnWrapperStyle={{
flex: 1,
justifyContent: 'space-between',
}}
renderItem={({ item, index }) =>
index < 5 && (
<TouchableOpacity
onPress={() =>
navigation.navigate('hospital-doctor-list-screen', {
categoryName: item.attributes.Name,
})
}
style={{ alignItems: 'center', marginVertical: 5 }}
>
<View
style={{
backgroundColor: Colors.SECONDARY,
padding: 15,
borderRadius: 99,
}}
>
<Image
source={{
uri: item.attributes.Icon.data[0].attributes.url,
}}
style={{
width: 30,
height: 30,
}}
/>
</View>
<Text
style={{
textAlign: 'center',
marginTop: 5,
flexWrap: 'wrap',
}}
numberOfLines={2}
>
{item.attributes.Name}
</Text>
</TouchableOpacity>
)
}
/>
</ScrollView>
</View>
);
}
Solution
The way I'd handle this is by giving width to my Text component.
<Text
style={{
textAlign: 'center',
marginTop: 5,
flexWrap: 'wrap',
width: '50%' // Add width
}}
numberOfLines={2}>
{item.attributes.Name}
</Text>
Answered By - Vibhor
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.