Whenever I put a string of more than 5 characters inside a element, the last one is not rendered.
Here's my code and the outputted string.
const Header = () => {
const { textStyles, viewStyles } = styles;
return (
<View style={viewStyles}>
<Text style={textStyles}>Albums</Text>
</View>
);
};
const styles = {
viewStyles: {
backgroundColor: '#F8F8F8',
alignItems: 'center',
justifyContent: 'center',
height: 60,
paddingTop: 15,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
elevation: 2
},
textStyles: {
fontSize: 20
},
};
Outputted string:
Album
If I change the string inside the Text element to something like 'Albums!', the output will be Albums. It always show n-1 characters.
I tested your code buddy Its working fine
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
const Header = () => {
const { textStyles, viewStyles } = styles;
return (
<View style={viewStyles}>
<Text style={textStyles}>Albums!!!!</Text>
</View>
);
};
export default class App extends React.Component {
render() {
return (
<View>
<Header></Header>
</View>
);
}
}
const styles = StyleSheet.create({
viewStyles: {
backgroundColor: '#F8F8F8',
alignItems: 'center',
justifyContent: 'center',
height: 60,
paddingTop: 15,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
elevation: 2
},
textStyles: {
fontSize: 20
},
});
Here is the output
I experienced the same issue on my OnePlus 6.
I fixed it by using textAlign: "center" instead of using alignItems: "center".
I propose changing your styles to:
const styles = {
viewStyles: {
backgroundColor: '#F8F8F8',
justifyContent: 'center',
height: 60,
paddingTop: 15,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
elevation: 2
},
textStyles: {
fontSize: 20,
textAlign: "center"
},
};
Please add all components fontFamily: "" style just like this with empty value. Example:
<Text style={{color:'red', fontFamily: "", fontSize:20}}> Hasan Rıza UZUNER </Text>
Manually applying a font may fix this issue
Here's how using expo / Here's how in vanilla react native
If you don't feel like following those links, here's a quick rundown:
1. Acquire and add your font to your project
Make a new folder (eg. assets/fonts/) to hold your font's ttf files, here's a link to roboto
Copy your .ttf files directly into the directory you created (eg. assets/fonts/Roboto-Regular.ttf)
2. Link your fonts
Add rnpm asset configuration to your package.json (using your new folder from above, our example is assets/fonts/ but you can use whatever folder you want.
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
Execute react-native link from your terminal
3. Use your font
From our example above we're using Roboto, replace Roboto with whatever font family you have downloaded. If you're on a mac and don't know the font family you can use the font book.app default app to find the name.
<Text style={{ fontFamily: 'Roboto' }}>Some Text Here</Text>
I think you made just need to add width to either the text or the parent view
May be you can wrap you inside and give width of '100%' to both tags.
<View style={{flex:1,alignItems:'center', justifyContent:'center', width:'100%'}}>
<Text style={{width:'100%', fontWeight:'bold', fontSize: 12, textAlign:'center'}}> Whatever the text you want to write here..!!</Text>
</View>
Don't know if it is still relevant.
I solved this issue by adding width to text element
Related
Hello i was following along a tutorial and it was going fine, until the tutor used react-native-paper ProgressBar in his project, I wrote exactly same but it was not visible, I found the documentation and plugged it, still not visible.
What am i Doing wrong?
import {View, StyleSheet, Text} from 'react-native' ;
import { ProgressBar, Colors } from 'react-native-paper';
import CountDown from '../comps/CountDown.js' ;
const Timer = ({task}) => {
return (
<View style={styles.container}>
<CountDown />
<Text style={styles.text}> Focusing On:</Text>
<Text style={[styles.text, styles.textBold]}> {task} </Text>
<ProgressBar progress={0.4} color='#5E84E2' style={styles.progress}/>
</View>
) ;
}
const styles = StyleSheet.create({
container : {
flex: 1,
width: 100,
alignItems: 'center' ,
justifyContent: 'center',
paddingTop: 40,
},
text: {
// flex: 0.5,
color: 'white'
},
textBold: {
fontWeight: 'bold' ,
// borderColor: 'white',
// borderWidth: 1,
// borderStyle: 'solid' ,
},
progress: {
height: 10,
// borderColor: 'white',
// borderWidth: 1,
// borderStyle: 'solid' ,
}
}) ;
export default Timer ;
Also, If i were to Give border to the progressBar, it appears but keep on increasing in width even when width is more than the viewport width. I dont know what is happening
The problem here is when you use alignItems the children components need to have a fixed width, your progress bar doesnet have a fixed width.
You will have to provide a with in the styles.
progress: {
height: 10,
width:50
}
Based on documentation default value for width is
auto (default value) React Native calculates the width/height for the
element based on its content, whether that is other children, text, or
an image.
Better have a value for width which will solve your issue.
A responsive solution
Currently ProgressBar doesn't support the flex styling system.
If someone is also looking to make the width equal to 100% if it's parrent component, there is a good recommended solution provided here.
Just set the width to undefined:
progress: {
height: 10,
width:undefined
}
e.g.
<View style={{ flex: 2, other flex styles }}>
<ProgressBar progress={0.5} color="white" style={{ height: 5, width: undefined }} />
</View>
i have an about component that just render two text component, this is the code:
class about extends Component {
render() {
return (
<>
<View style = {this.styles.container}>
<Text style = {this.styles.text}>Hi</Text>
<Text style = {this.styles.text}>A very simple notebloc.</Text>
</View>
</>
);
}
styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
marginTop: - Math.round(Dimensions.get("window").height * 0.5) / 2,
flexDirection: "column"
},
text: {
fontSize: 25,
fontFamily: "serif",
textAlign: "center",
color: "#1E90FF",
}
})
}
pertty simple, the problem now, is that I want them with FontSize: 25 but when I taste it in real devices, in some of them the second text is separated, gonna post some screen so you can see the issue:
this is how I want it works in all devices:
but in some devices I get this:
how can I solve this? I set the fontSize to 24 and I think it will work in all devices, but when its in 25, it doesnt, something to add, the first image is a device that the width is bigger than the second one, so I think the width isnt the problem
To solve that, try to use react-native-size-matters to scale the font size no matter the device pixel density.
For example
fontSize: moderateScale(24, 0.3)
I have added Text inside touchableopacity now when user clicks on touchableopacity I want to change color of that button from default gray color to blue color see screenshot below. Now initially checked={this.state.newProjects} newProjects is not present inside state variable so onclick it should create new variable so that checked prop becomes true and then color changes. So I need to toggle button color onpress each time. Below code is not working. I am trying to create samething -> https://codesandbox.io/s/k3lzwo27z5 but in react native.
Code:
constructor(props) {
super(props);
this.state = {
};
}
handleClick = e => {
this.setState({
[e.target.name]: !this.state[e.target.name]
});
};
<TouchableOpacity onPress={this.handleClick('newProjects')}>
<Filterbutton name="New Projects" checked={this.state.newProjects}/>
</TouchableOpacity>
Filterbuttonjs:
const Filterbutton = ({name, checked}) => (
<View style={checked ? styles.buttonTab : styles.defaultButtonTab}>
<Text style={styles.buttonContent}>{name}</Text>
</View>
)
export default Filterbutton;
const styles = StyleSheet.create({
defaultButtonTab: {
justifyContent: 'center',
alignItems: 'center',
maxWidth: 150,
height: 30,
padding: 10,
borderRadius: 13,
borderStyle: "solid",
borderWidth: 1.3,
borderColor: "rgba(131, 143, 158, 0.7)",
marginRight: 10,
marginTop: 10
},
buttonTab: {
justifyContent: 'center',
alignItems: 'center',
maxWidth: 150,
height: 30,
padding: 10,
borderRadius: 13,
borderStyle: "solid",
borderWidth: 1.3,
borderColor: "#1994fc",
marginRight: 10,
marginTop: 10
},
Screenshot:
The color of button should be defined on <Text> instead of
<View>
<Text style={[styles.text, checked ? styles.btnChecked : '']}>{name}</Text>
</View>
You have to declare newProjects inside state.
Code:
constructor(props) {
super(props);
this.state = {
newProjects=''
};
}
AND change your nulll check to this.
<View style={!checked ? styles.defaultButtonTab :styles.buttonTab }>
This is where you have a problem:
onPress={this.handleClick('newProjects')}
onPress takes a function, not returned value of an executed function. by doing this: this.handleClick('newProjects') you have an execution here. onPress executes the function name given. This is not how you call your own function. I know it's confusing but please try to bear with me here:
onPress={this.handleClick}
This will invoke your function on a click/tap but it's actually the default function it suppose to execute. At this point your handleCLick would look like:
handleClick = (e) => {
//do stuff
}
But in any case if you want to send some value from the component level better way to do would be:
onPress={(v) => this.handleClick(yourValue)}
I am currently developing an application, and I am having trouble figuring out how to get the button to change color after being pressed using TouchableHighlight. Not to be confused with the underlayColor prop which I know exists as part of TouchableHighlight which only changes the color for when the button is pressed and then returns to its regular color.
This is what I have so far (Some of the code has been omitted for simplicity):
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
TouchableHighlight,
Alert,
} from 'react-native';
class MeetingScreen extends Component {
constructor(props){
super(props);
this.state = {
buttonColor: '#7395AE',
}
this.onButtonPress=this.onButtonPress.bind(this);
}
onButtonPress(){
this.setState({ buttonColor: 'red' });
}
render() {
return (
<View style={styles.container}>
<TouchableHighlight
style={styles.talk}
color={this.state.buttonColor}
onPress={() => this.state.buttonColor}
selected={this.onButtonPress}
>
<View>
<Text style={styles.welcome} >
Talk
</Text>
</View>
</TouchableHighlight>
</View>
);
}
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#7395AE',
},
welcome: {
fontSize: 30,
textAlign: 'center',
margin: 10,
color: '#ffffff',
},
talk:{
height: 200,
width: 200,
borderWidth: 5,
backgroundColor: '#7395AE',
borderRadius: 100,
borderColor: '#557A95',
justifyContent:'center',
alignItems:'center',
borderRadius: 100
},
});
export default connect(mapStoreToProps, mapDispatchToProps)(MeetingScreen);
I have looked at other answers on StackOverflow and have attempted a good portion of them but I couldn't find anything that fit specifically to my issue. I have also looked at the React Native documentation and wasn't able to find anything helpful. The code as it is right now just displays the button and when pressed it goes black but then goes back to it's original color after being pressed. What I am looking for is for the button to turn red and stay red after being pressed. Any help would be greatly appreciated. Thank you so much for any help in advance!
<TouchableHighlight
style={[styles.talk, { backgroundColor: this.state.buttonColor}]} //Or if don't want "backgroundColor:" and just need change the text color use => "color:""
onPress={() => this.state.buttonColor}
selected={this.onButtonPress}/>
I am trying to change the background color of my button but nothing seems to work, I tried the raised property, maybe i am using it incorrectly. Do any of you have any ideas?
import React from 'react';
import { StyleSheet, Text, View, Button, TouchableHighlight } from 'react-native';
export default class App extends React.Component {
state={
name: "Mamadou"
};
myPress = () => {
this.setState({
name: "Coulibaly"
});
};
render() {
return (
<View style={styles.container}>
<Button
title={this.state.name}
color="red"
onPress={this.myPress}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Use this for adding the background color to the button in iOS:
Styles:
loginScreenButton:{
marginRight:40,
marginLeft:40,
marginTop:10,
paddingTop:10,
paddingBottom:10,
backgroundColor:'#1E6738',
borderRadius:10,
borderWidth: 1,
borderColor: '#fff'
},
loginText:{
color:'#fff',
textAlign:'center',
paddingLeft : 10,
paddingRight : 10
}
Button:
<TouchableOpacity
style={styles.loginScreenButton}
onPress={() => navigate('HomeScreen')}
underlayColor='#fff'>
<Text style={styles.loginText}>Login</Text>
</TouchableOpacity>
For Android it simply works with Button color property only:
<Button onPress={onPressAction} title="Login" color="#1E6738" accessibilityLabel="Learn more about this button" />
I suggest to use React Native Elements package, which allow to insert styles throught buttonStyle property.
styles:
const styles = StyleSheet.create({
container: {
flex: 1
},
button: {
backgroundColor: '#00aeef',
borderColor: 'red',
borderWidth: 5,
borderRadius: 15
}
})
render()
render() {
return (
<View style={styles.container}>
<Button
buttonStyle={styles.button}
title="Example"
onPress={() => {}}/>
</View>
)
}
Effect:
Expo Snack: https://snack.expo.io/Bk3zI0u0G
"color" property applies to background only if you're building for android.
Other than that I personally find it easier to manage custom buttons. That is create your own component named button and have it as a view with text. This way its way more manageable and you can import it as easy as Button.
this answer is little bit late, but can be good for anothers.
To solve this problem it is better to use "Text" Component as a Button
fist make a component name it AppButton
function AppButton({children,style,onPress}) {
return (
<TouchableOpacity onPress={onPress}>
<Text
style={[styles.appButton,style]} >
{children}
</Text>
</TouchableOpacity>
);
}
export default AppButton;
then Import it in where that you want to use it
import AppButton from './AppButton';
and with this line you can call your custom Button that actually is a Text which you can customize it.
remember onPress Event have to calling in TouchableOpacity not Text:
<AppButton style={styles.appOk} onPress={()=> visibleFunc(false)} >Ok</AppButton>
Maybe Pressable is what you're looking for; it allows you to add style to a pressable component (like a button).Read more here
Sample code:
import React from 'react';
import { Text, View, StyleSheet, Pressable } from 'react-native';
export default function Button(props) {
const { onPress, title = 'Save' } = props;
return (
<Pressable style={styles.button} onPress={onPress}>
<Text style={styles.text}>{title}</Text>
</Pressable>
);
}
const styles = StyleSheet.create({
button: {
alignItems: 'center',
justifyContent: 'center',
paddingVertical: 12,
paddingHorizontal: 32,
borderRadius: 4,
elevation: 3,
backgroundColor: 'black',
},
text: {
fontSize: 16,
lineHeight: 21,
fontWeight: 'bold',
letterSpacing: 0.25,
color: 'white',
},
});
You should use the hex code backgroundColor="#FF0000" instead of color="red". Also please use raised={true} other wise background color is not override.