I am new to React Native, now I want to make a sample project.
I see there is an option for making a text bold by using 'fontWeight'.
I am Using expo.
But even if I use this property for my <Text> tag, I can't see any changes.
Can you suggest me any possibilities and solutions?
Here is what i tried.
import React, { Component } from 'react';
import { StyleSheet, Text, View, Button, TouchableOpacity } from 'react-native';
import { Image } from 'react-native';
import { FlatList, ActivityIndicator } from 'react-native';
export default class Screen1 extends Component {
//Screen1 Component
constructor(props){
super(props);
}
render() {
return(
<View style={{flex: 1, padding: 20}}>
<Text style={{ fontWeight: 'bold' }} >Bold Text</Text>
</View>
)
}
}
There isn't an issue with your style, your style is perfect as it is { fontWeight: 'bold' }, but your <Text/> component is not correctly.
<Text/>Bold Text</Text>
You have an extra '/' inside of your JSX component. It should be like this:
<Text>Bold Text</Text>
Want to see an example? https://snack.expo.io/#abranhe/bold-example
import React from 'react';
import { View, Text } from 'react-native';
export default () => (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ fontWeight: 'bold' }}>Bold Text</Text>
</View>
);
By the way, you are also missing React from your imports, and it is required.
the issue was solved by changing my mobile's system font.
I have changed my system font once. that was not accepting Bold. that was the issue.
your mistake in TEXT tag , try this
<Text style={{ fontWeight: 'bold' }} >Bold Text</Text>
Related
How to use linear-gradient text in react native mobile apps (android apps)? no expo and I want to make text color in linear-gradient how can I do? is it possible if yes than how and if no than how popular apps use linear-gradient text they also use react native in their tech stack tired tired to give color style to color linear-gradient but it didn't work
background: linear-gradient(90.35deg, #33DFDF 10.9%, #0047FF 25.48%, #00A3FF 40.06%, #044AFF 54.65%, #FA00FF 69.23%, #D90AFB 83.81%);
my code
//import liraries
import React from 'react';
import { Image, Text, View, TouchableOpacity } from 'react-native';
import WrapperContainer from '../../Components/WrapperContainer';
import imagePath from '../../constatns/imagePath';
import strings from '../../constatns/lang';
import navigationStrings from '../../constatns/navigationStrings';
import colors from '../../styles/colors';
import styles from './styles';
import LinearGradient from 'react-native-linear-gradient';
import MaskedView from '#react-native-masked-view/masked-view';
const TermsCondition = ({ navigation }) => {
return (
<WrapperContainer containerStyle={{ alignItems: 'center' }}>
<Image resizeMode='contain' style={styles.logoStyle} source={imagePath.icLogo} />
<Text style={styles.headingStyle}>{strings.WELCOME_TO_ourapp}</Text>
<Text style={styles.descStyle}>{strings.READ_OUR} <Text style={{ color: colors.lightBlue }}>{strings.PRIVACY_POLICY}</Text> {strings.TAP_AGREE_AND_CONTINUE_TO_CEEPT_THE} <Text style={{ color: colors.lightBlue }}>{strings.TERMS_OF_SERVICE}
</Text></Text>
<TouchableOpacity onPress={() => navigation.navigate(navigationStrings.PHONE_NUMBER)} activeOpacity={0.7}>
<Text style={styles.agreeStyle}>{strings.AGREE_AND_CONTINUE}</Text>
</TouchableOpacity>
</WrapperContainer>
);
};
export default TermsCondition;
I think react-native-linear-gradient can only be customized in the background text, not in the text.
Android:
I also have another option, using react-native-text-gradient, but until now there is still an issue in the installation. https://github.com/iyegoroff/react-native-text-gradient/issues/53
so, Now I suggest using #react-native-masked-view/masked-view if you want a custom gradient in the text, I think this helps, you can read here
https://github.com/react-native-masked-view /masked-view
Android:
step 1 :
yarn add react-native-linear-gradient-text
or
npm install react-native-linear-gradient-text
step 2 :
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { LinearGradientText } from 'react-native-linear-gradient-text';
export const App = () => {
return (
<View style={styles.container}>
<LinearGradientText
colors={['#E76F00', '#EA374E']}
text="Hello World"
start={{ x: 0.5, y: 0 }}
end={{ x: 1, y: 1 }}
textStyle={{ fontSize: 40 }}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
Hope this solves your problem. for the library documentation check this link :
https://www.npmjs.com/package/react-native-linear-gradient-text
I created a component at react-native, but the text of the button is always at uppercase, someone knows why it doesn't take the text that pass, because I want to show 'Login', but it shows 'LOGIN'
import React, { Component } from 'react';
import { View, Button} from 'react-native';
import LabelApp from "../../config/labels.app";
const labelApp = LabelApp.loginView;
export default class Login extends Component {
constructor(props){
super(props);
this.handleClickBtnEnter = this.makeLogin.bind(this);
}
makeLogin() {
}
render() {
return (
<View>
<Button title= {labelApp.textButtonLogin} onPress={this.handleClickBtnEnter}/>
</View>
);
}
}
Label of component
const LabelApp = {
loginView: {
textButtonLogin: 'Ingresar',
},
}
export default LabelApp;
The visualization
For react Native Paper button use uppercase={false} prop:
<Button
mode="outlined"
uppercase={false}
accessibilityLabel="label for screen readers"
style={styles.yourButtonStyle}>Button label</Button>
So, the other two answers are correct that you should use TouchableOpacity, but as someone new to React Native, it took me awhile to understand what was going on here. Hopefully this explanation provides a little more context.
The built-in Button component seems to have some weird compatibility/visibility issues on occasion, one of which is rendering the title prop text all uppercase. When viewing the documentation for the Button component in Chrome, the preview shows all text being capitalized under the "Web" view but not Android or iOS (I was having this issue using Expo and Metro Bundler on an Android device, so not sure what to make of this). I couldn't find anything about capitalization/uppercase in the Button docs, so perhaps this is a bug.
The solution is to use a different component called TouchableOpacity. It also has an onPress event you can use and a built-in touch animation, but it has less out of the box styling than the Button component. Important to note from docs: "Opacity is controlled by wrapping the children in an Animated.View, which is added to the view hierarchy. Be aware that this can affect layout." It doesn't have a title prop, so you just put the button text in a Text component, like so:
<Button
title='text will be capitalized'
onPress={onPress}
/>
becomes
<TouchableOpacity onPress={onPress}>
<Text>text will stay lowercase</Text>
</TouchableOpacity>
I was having the same issue as OP, and this solved it for me.
From the official documentation
A basic button component that should render nicely on any platform. Supports a minimal level of customization.
The recommend use of touchable opacity or touchable native feedback
https://facebook.github.io/react-native/docs/touchableopacity
Below I've added textTransform: 'lowercase', as a style rule for the button to override any inherited text casing.
import React, { Component } from 'react'
import {
StyleSheet,
TouchableOpacity,
Text,
View,
} from 'react-native'
export default class App extends Component {
constructor(props) {
super(props)
this.state = { count: 0 }
}
onPress = () => {
this.setState({
count: this.state.count+1
})
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity
style={styles.button}
onPress={this.onPress}
>
<Text> Touch Here </Text>
</TouchableOpacity>
<View style={[styles.countContainer]}>
<Text style={[styles.countText]}>
{ this.state.count !== 0 ? this.state.count: null}
</Text>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingHorizontal: 10
},
button: {
alignItems: 'center',
backgroundColor: '#DDDDDD',
padding: 10,
textTransform: 'lowercase', // Notice this updates the default style
},
countContainer: {
alignItems: 'center',
padding: 10
},
countText: {
color: '#FF00FF'
}
})
https://snack.expo.io/Bko_W_gx8
This question is 3 years old and I'm not sure why no one has answered it correctly until now.
Native android buttons are all caps by default starting from android lollipop, which is what react native uses when you use the control Button from react-native in your app. To override the functionality, you just need to add this line in your styles.xml file inside your app theme (not the splash screen style)
<item name="android:textAllCaps">false</item>
You can get more details here: https://stackoverflow.com/a/30464346/11104068
The changes are not going to apply instantly obviously since the change is in the naive xml file and not in a JavaScript file. So you will need to do a npm/yarn run android
I've tried your code and it looks like it's the expected behaviour with Button component from react-native
You can see this at the official documentation
I believe that you need to change Button component, take it from another package to meet your needs.
As an alternative you can create your own button
import React, { Component } from 'react';
import { View, Button, TouchableHighlight, StyleSheet } from 'react-native';
import LabelApp from "../../config/labels.app";
const labelApp = LabelApp.loginView;
export default class Login extends Component {
constructor(props){
super(props);
this.handleClickBtnEnter = this.makeLogin.bind(this);
}
makeLogin() {
}
render() {
return (
<View>
<TouchableHighlight onPress={this.handleClickBtnEnter} underlayColor="white">
<View style={styles.button}>
<Text style={styles.buttonText}>{labelApp.textButtonLogin}</Text>
</View>
</TouchableHighlight>
</View>
);
}
}
const styles = StyleSheet.create({
button: {
marginBottom: 30,
width: 260,
alignItems: 'center',
backgroundColor: '#2196F3'
},
buttonText: {
textAlign: 'center',
padding: 20,
color: 'white'
}
});
<Button
style={{
borderRadius: 10,
backgroundColor: "#000",
width: 200,
height: 50,
}}
>
<Text
uppercase={false}
>
Login
</Text>
</Button>
Good day,
Here's a small problem with my React Native app which uses NativeBase components. The problem is within the <Content /> component of NativeBase. I want to use the <Carousel /> component from github which is react-native-carousel.
The code is as follows:
index.android.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
} from 'react-native';
import {
Container,
Header,
Content,
Title,
Icon,
Button,
} from 'native-base';
import Carousel from 'react-native-carousel';
import styles from './src/styles/styles';
export default class iABC extends Component {
render() {
return (
<Container>
<Header backgroundColor='#ffffff' height={50}>
<Button transparent>
<Icon name='md-menu' style={styles.header.icon} />
</Button>
<Title style={styles.header.title}>
iABC
</Title>
<Button transparent>
<Icon name='md-person' style={styles.header.icon} />
</Button>
</Header>
<Content>
<View style={styles.global.content}>
<Carousel width={375}
hideIndicators={false}
indicatorColor='#000000'
indicatorSize={25}
indicatorSpace={20}
indicatorAtBottom={true}
indicatorOffset={250}
indicatorText='>'
animate={true}
delay={2000}
loop={true}>
<View style={styles.carousel.page1}>
<Text>Page 1</Text>
</View>
<View style={styles.carousel.page1}>
<Text>Page 2</Text>
</View>
<View style={styles.carousel.page1}>
<Text>Page 3</Text>
</View>
</Carousel>
</View>
</Content>
</Container>
);
}
}
AppRegistry.registerComponent('iABC', () => iABC);
Style: carousel.js
'use strict'
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
page1: {
flex: 1,
height: 150,
width: 375,
backgroundColor: '#cdcdcd',
justifyContent: 'center',
alignItems: 'center',
}
})
Style: global.js
'use strict'
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
content: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
})
I have tried many things, styling carousel component, giving it a separate view, styling both at the same time, but unfortunately it doesn't work. However, as long as I remove <Content /> component of NativeBase, it works fine. I'm pretty sure that the problem is with the NativeBase component.
Thanks in advance.
About react-native-carousel
Renders Carousel
Carousel renders CarouselPager
And CarouselPagerrenders ScrollView of RN
About NativeBase Content, it renders ScrollView of RN. So wrapping it in another ScrollView is not necessary and causing problem.
Try excluding NB's Content.
Know more about NativeBase's replacing components - CheatSheet
I am trying to truncate a text in my reactnative app. I've decided to use the "ellipsizeMode" attribute, but I can't get it to work.
I wrote a demo of the problem :
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native';
export class EllipsizeModeTest extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>{'first part | '}</Text>
<Text style={styles.text} numberOfLines={1} ellipsizeMode={'tail'}>
{'a text too long to be displayed on the screen'}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
},
text: {
fontSize: 20,
}
});
Now the text does not get truncated, any idea why ?
I had the same problem, it's enough to have the size of the element bound to a value. So if you define width, or add a flex value will work.
<View style={{width: 200}}><Text ellipsizeMode='tail' numberOfLines={1}></View>
You need to set a width on your Text element so it knows when to ... it
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
},
text: {
fontSize: 20,
width: 100
}
});
Try assigning a string to ellipsizeMode (remove the curly brackets):
<Text style={styles.text} numberOfLines={1} ellipsizeMode='tail'>
Try setting a width style property to the component
'use strict';
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
} from 'react-native';
export class EllipsizeModeTest extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.text}>{'first part | '}</Text>
<Text style={styles.text} numberOfLines={1} ellipsizeMode={'tail'}>
{'a text too long to be displayed on the screen'}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
},
text: {
fontSize: 20,
width: 100
}
});
I am trying to make a simple iOS page with a button that triggers an action.
I have followed the tutorial on how to get started and this is my index code:
'use strict';
var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
Component,
AlertIOS // Thanks Kent!
} = React;
class myProj extends Component {
render() {
return (
<View style={styles.container}>
<Text>
Welcome to React Native!
</Text>
<TouchableHighlight style={styles.button}
onPress={this.showAlert}>
<Text style={styles.buttonText}>Go</Text>
</TouchableHighlight>
</View>
);
}
showAlert() {
AlertIOS.alert('Awesome Alert', 'This is my first React Native alert.', [{text: 'Thanks'}] )
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#FFFFFF'
},
buttonText: {
fontSize: 18,
color: 'white',
alignSelf: 'center'
},
button: {
height: 44,
flexDirection: 'row',
backgroundColor: '#48BBEC',
alignSelf: 'stretch',
justifyContent: 'center'
}
});
AppRegistry.registerComponent('myProj', () => myProj);
The problem is that when I run it from Xcode on my device I get
Can't find variable: React
render
main.jsbundle:1509:6
mountComponent
mountChildren
Any idea what might be the problem here?
In the latest version of React Native you must import React from 'react' package
import React, {Component} from 'react';
import {
View,
...
} from 'react-native';
import * as React from 'react';
Add the constructor to before render
constructor(props) {
super(props);
}
Adding import React from 'react'; in all the jsx/tsx file resolved my issue