Circle shape with center text not working React Native iOS - javascript

I am trying to drawing circle shape view for textview inside that some text.
It is working with Android, But, iOS not working properly. Text is coming top of the view.
<Text style={styles.na}> NA </Text>
styles
na: {
width: 60,
height: 60,
borderRadius: 60 / 2,
backgroundColor: 'orange',
alignItems: 'center',
textAlign: 'center',
fontWeight: 'bold',
color: 'white',
fontSize: 15,
textAlignVertical: 'center',
marginRight: 10,
overflow: 'hidden',
},
Any suggestions?

try this code, works for me
<View style={{
width: 60,
height: 60,
justifyContent: "center",
borderRadius: 60 / 2,
backgroundColor: 'orange',
}}>
<Text style={{
alignSelf: 'center',
fontWeight: 'bold',
color: 'white',
fontSize: 15,
}}>NA</Text>
</View>

try alignSelf : center
alignSelf has the same options and effect as alignItems but instead of affecting the children within a container, you can apply this property to a single child to change its alignment within its parent. alignSelf overrides any option set by the parent with alignItems.
Reference

Related

React Native make items responsive

Example between correct and incorrect item stacking
Please refere to the image. I have twee phones one with a screen width of 1440px and one with 1080px.On the 1440 screen the items are stacked in a two column structure. On the 1080 everything gets stacked on the left column. Is there a way to write a javascript function that looks at the device width and sets the item to adjust accordingly?
const Complex = () => {
return (
<View style={{ flex: 1 }}>
<CarouselCards />
<Divider
style={{
color: 'black',
backgroundColor: 'black',
marginHorizontal: 15,
}}
/>
<ScrollView horizontal={false}>
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
{KPI.map((item) => (
<View style={styles.cardContainer} key={item.id}>
<View style={{ flexDirection: 'row' }}>
<View
style={{
flex: 1,
flexWrap: 'wrap',
}}
>
<View style={styles.cardContent}>
<Text style={styles.cardTitle}>{item.title}</Text>
<Text style={styles.bigFatNumber}>{item.value}</Text>
<Text style={styles.smallKPI}>{item.kpi}</Text>
<View style={{display:' flex'}}>
<BarChart
style={{ height: 100, width: 130 }}
data={barData}
svg={{ fill }}
contentInset={{ top: 1, bottom: 30 }}
></BarChart>
</View>
</View>
</View>
</View>
</View>
))}
</View>
</ScrollView>
</View>
)
export default Complex
const styles = StyleSheet.create({
cardContainer: {
backgroundColor: '#fff',
width: 168,
height: 190,
margin: 15,
borderRadius: 8,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 3,
},
shadowOpacity: 0.29,
shadowRadius: 4.65,
elevation: 7,
padding: 15,
},
chartContainer: {
backgroundColor: '#fff',
width: 168,
height: '100%',
margin: 15,
borderRadius: 8,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 3,
},
shadowOpacity: 0.29,
shadowRadius: 4.65,
elevation: 7,
padding: 15,
flexWrap: 'wrap',
display: 'flex',
},
cardTitle: {
// letterSpacing: 0.25,
fontStyle: 'normal',
fontSize: 14,
},
cardContent: {
alignItems: 'flex-start',
flexWrap: 'wrap',
gap: 6,
paddingVertical: 5,
},
bigFatNumber: {
letterSpacing: 0.25,
lineHeight: 36,
fontWeight: 'bold',
fontStyle: 'normal',
fontSize: 24,
},
smallKPI: {
letterSpacing: 0.25,
lineHeight: 24,
fontWeight: 'bold',
fontStyle: 'normal',
fontSize: 14,
order: 1,
color: 'rgba(0, 0, 0, 0.6)',
},
})
You can get device-width with Dimensions that you get in React native - https://reactnative.dev/docs/dimensions. Yust add your items fixed width(something like (width-yourMargin) / 3) or you can use flex and not use fixed width.
use
react-native-responsive-dimensions
use key word npm install for windows
npm i react-native-responsive-dimensions
import using that
import {
responsiveHeight as rh,
responsiveWidth as rw,
responsiveFontSize as rf,
} from "react-native-responsive-dimensions";
how to use
width:rw(100),
height:rh((100),
fontSize:rf(1.5),

How to align this text in the center of its parent flex item?

I have some react-native code, where I have a pop-up modal. I created it using flex, but for some reason the text will not vertically align. I solved it using top = 30%, but then my touchable opacities(surrounding the texts) do not span all of the free space available. And I feel this is a hacky solution.
Curious if there is a better one, to automatically align the text vertically and make sure the touchable opacities take up the free space available to them?
Below is my code:
<Modal
isVisible={confirmationVisible}
onBackdropPress={() => toggleConfirmation()}
style={styles.confirmationModal}
>
<Text style={styles.confirmationTitle}>Would you like to add a beacon to {assetName}?</Text>
<TouchableOpacity style={styles.confirmationContainer} onPress={() => navigateAway("AddAssetScreenFinish")}>
<Text style={styles.confirmationText}>No, I'm done</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.confirmationContainer} onPress={() => navigateAway("AddBeaconExistingScreen")}>
<Text style={styles.confirmationText}>Yes, an existing Beacon</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.confirmationContainer} onPress={() => navigateAway("AddBeaconScreen")}>
<Text style={styles.confirmationText}>Yes, a new Beacon</Text>
</TouchableOpacity>
</Modal>
Below is my styling:
confirmationModal: {
flex: 0.3,
width: "60%",
alignItems: "center",
justifyContent: "space-evenly",
backgroundColor: "white",
marginTop: "auto",
marginBottom: "auto",
marginLeft: "auto",
marginRight: "auto",
borderRadius: 8
},
confirmationTitle: {
fontWeight: "bold",
textAlign: "center",
margin: 5,
paddingLeft: 20,
paddingRight: 20
},
confirmationContainer: {
borderTopColor: "lightgrey",
borderTopWidth: 1,
width: "100%"
},
confirmationText: {
textAlign: "center",
color: COLORS.purple
},
Edit:
using this modal if curious
Also, have tried justifyContent on confirmationContainer but it does not work, unsure why
Edit2:
Got the solution. Seems flex is scaling the height and width had to be set manually for my text element. Removing the justifyContent and alignItems from a parent container, I was able to use textAlignVertical for my title and scale titleContainer vs touchableContainers with flex 2 and flex 1 respectively. Not sure what is going on, but the touchable now scales the whole free space and the text is aligned vertically...used AnthonyDev220's solution and reworked it so marked him as best answer, updated styles jsx did not change:
confirmationModal: {
flex: 0.3,
width: "60%",
backgroundColor: "white",
marginTop: "auto",
marginBottom: "auto",
marginLeft: "auto",
marginRight: "auto",
borderRadius: 8
},
confirmationTitle: {
fontWeight: "bold",
textAlign: "center",
textAlignVertical: "center",
flex: 2,
paddingLeft: 20,
paddingRight: 20
},
confirmationContainer: {
borderTopColor: "lightgrey",
borderTopWidth: 1,
flex: 1,
width: "100%"
},
confirmationText: {
marginTop: "auto",
marginBottom: "auto",
textAlign: "center",
color: COLORS.purple
},
You could try adding textAlignVertical: "center" to your confirmationText
or
Try wrapping your component inside a component and then style your componenet.
<TouchableOpacity style={styles.confirmationContainer} onPress={() => navigateAway("AddAssetScreenFinish")}>
<View style={{flex:1,justifyContent: "center",alignItems: "center"}}>
<Text style={styles.confirmationText}>No, I'm done</Text>
</TouchableOpacity>
</View>
same for your other two <Text> components.
confirmationContainer: {
display: flex,
justifyContent: center,
alignItems:center,
borderTopColor: "lightgrey",
borderTopWidth: 1,
width: "100%"
}

Elevation not working suddenly after the modification in my react-native app content which worked before

I have used elevation property in my app it was working fine before but suddenly after few other changes the elevation not working.
styling i have used which worked fine before.
flexDirection: 'row',
backgroundColor: 'white',
height: hp('9%'),
alignItems: 'center',
borderRadius: wp('2%'),
marginBottom: hp('2%'),
marginLeft: wp('5%'),
elevation: 5, ```
You can try "position: 'relative'" under elevation on styles.
flexDirection: 'row',
backgroundColor: 'white',
height: hp('9%'),
alignItems: 'center',
borderRadius: wp('2%'),
marginBottom: hp('2%'),
marginLeft: wp('5%'),
elevation: 5,
position: 'relative',

place <Text> at middle and left end

I have a screen where I want to place the first, main text item (Filter)in the exact middle of the screen while the second item (All Delete) should be at the right end. Both of them should be in the same line.
I would prefer not to use padding/margins since they can vary in different phone sizes. I am already using text-align but it doesn't work for me.
export default function App() {
return (
<View style={styles.container}>
<View style={styles.topTextContainer}>
<Text style={styles.filterText}>Filter</Text>
<Text style={styles.deleteAllText}>All Delete</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
topTextContainer: {
paddingTop: moderateScale(35),
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
filterText: {
fontSize: moderateScale(15),
fontWeight: 'bold',
textAlign: 'center'
},
deleteAllText: {
fontSize: moderateScale(13),
color: '#363636',
fontWeight: '300',
marginLeft: moderateScale(75),
},
});
Codesandbox: https://snack.expo.io/#nhammad/frowning-bagel
You can use a absolute position for the delete button and set right:0 like below.
deleteAllText: {
fontSize: moderateScale(13),
color: '#363636',
fontWeight: '300',
position: 'absolute',
right: 0
}
The other option is to use marginLeft:'auto' for the both the texts which can help but wont keep the first one in center.
With exact milld do you mean in the middle of the screen width and height like this:
const styles = StyleSheet.create({
container: {
flex: 1,
},
topTextContainer: {
paddingTop: moderateScale(35),
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
height: "100%"
},
filterText: {
fontSize: moderateScale(15),
fontWeight: 'bold',
textAlign: 'center'
},
deleteAllText: {
fontSize: moderateScale(13),
color: '#363636',
fontWeight: '300',
position: "absolute",
right: 0
//marginLeft: moderateScale(75),
},
});
If yes, you should set the height: "100%"
if you want to have it on the top middle than this should be the right approach:
const styles = StyleSheet.create({
container: {
flex: 1,
},
topTextContainer: {
paddingTop: moderateScale(35),
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
filterText: {
fontSize: moderateScale(15),
fontWeight: 'bold',
textAlign: 'center'
},
deleteAllText: {
fontSize: moderateScale(13),
color: '#363636',
fontWeight: '300',
position: "absolute",
right: 0
//marginLeft: moderateScale(75),
},
});
setting deleteAllText position: absolute and right: 0

React Native: Why doesn't <TextInput/> center with flexbox?

In React Native, I have a <TextInput/> but with flexbox style set to center it, yet it still does not and rather just sits to the left but only vertically centered. I tested it out with simple <Text/> and it centers correctly.
How can I center <TextInput/> with flexbox?
Here is the code:
render() {
return (
<View style={{alignItems: 'center', justifyContent: 'center', flex: 1, }}>
<TextInput
style={{fontWeight: 'bold', height: 18, color: 'red'}}
placeholderStyle={{fontWeight: 'bold'}}
placeholderTextColor='red'
placeholder='Center Me'
/>
</View>
)
}
}
Thank you in advance!
EDIT - with additional styles added
<View style=style={{alignItems: 'center', justifyContent: 'center', flex: 1,}}>
<TextInput
onChangeText={this._handleName}
value={this.props.name}
placeholderTextColor='white'
placeholder='Put in name'
style={{
backgroundColor: 'black',
borderWidth: 0,
borderRadius: 15,
width: 250,
height: 70,
fontFamily: 'Roboto',
fontSize: 20,
textAlign: 'center',
}}
/>
</View>
Add textAlign: 'center' to your TextInput component.
style={{fontWeight: 'bold', height: 18, color: 'red', textAlign: 'center'}}
The actual element is center aligned, but textAlign controls the alignment of the inner text and placeholder.
The result of adding the change to your code

Categories