We Keep Coding

How to use linear-gradient text in react native mobile apps (android apps)? no expo

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

The text of button at react native is always uppercase

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>

Fontweight - Bold not working in react native page

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>

Style for nested Text is not working react-native

App.js:
import React, { Component } from "react";
import { Text, View, StyleSheet } from "react-native";
export default class App extends Component {
render() {
return (
<View style={styles.container}>
<Text>
<Text>First</Text>
<Text style={{ borderBottomWidth: 1 }}>Second</Text>
<Text>Third</Text>
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
backgroundColor: "#ECF0F1"
}
});
As you can see, we have nested <Text> components. The problem is some style props such as borderBottomWidth - marginVertical - width is NOT working for the nested components!
Any idea for solving this issue?
Thanks in advance!

I'm not sure why the (width, marginVertical) are not working but I know that you should specify the (borderStyle=solid, borderColor) so that you can see it.I think that's the problem, hope it helped.
But I should say that it might not be it cause I came across your question by trying to ask one, and for me all the styles did not work, not only that but it's raising an error and it does not run at all, this strange behavior only happen to Text component whether nested or not.

react native - screen cut off at bottom

I'm building a React Native app for the first time using an iOS Simulator with XCode, and it seems that my elements on the bottom of the screen are being cut off, as if the screen can only scroll so far. I've tried changing the overall container View's height, but it doesn't change how far down I can scroll. I've also tried removing the styling, as well as changing View to ScrollView, but neither helped. Another strange thing is that I need to add paddingTop, otherwise, the first Text is displayed over the time in the simulator
Here's the code:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Fields from './components/Fields.js'
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Calculator</Text>
<Text>1099 Calculator</Text>
<Fields />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
paddingTop: 50
},
});
Here's the top of the screen without the padding
And here's how it looks cut off

This is an issue I also had. To fix it just wrap your container with another view without padding but with flex. So like this:
export default class App extends React.Component {
render() {
return (
<View style={styles.main}>
<View style={styles.container}>
<Text>Calculator</Text>
<Text>1099 Calculator</Text>
<Fields />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
paddingTop: 50
},
main: {
flex: 1
}
});

I was facing the same problem, it turned out to be the padding that I added to my ScrollView. Maybe it is not the solution, it is simply to discard ideas..