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

App.js module not found; Can't resolve, Failed to compile

I am new to javaScript and am having an interesting problem. Here is some context; I am running windows 10, node v15, I have downloaded expo and am using visual studio. The command I am using to run my code is npm start.
The problem happens when I add the code to line 4 of app.js. I am trying to import a file that is simply just a button. The code compiles and loads fine until I add line 4.
The error I get looks like this;
"C:/Windows/System32/pleasework/App.js
Module not found: Can't resolve 'C:WindowsSystem32pleasework"
Thank you for any insight at all!
App.js CODE
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import buttonWelcome from 'C:\Windows\System32\pleasework\node_modules\sweet.js';
export default class App extends Component() {
render() {
return (
<View style={styles.container}>
<Text style={styles.title}>Welcome</Text>
<buttonWelcome text='Login' color='red' />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 32,
textAlign: 'center',
margin: 10,
},
});
button CODE, name of file is sweet.js
import React from 'react';
import { StyleSheet, Text, View,TouchableOpacity } from 'react-native';
const buttonWelcome = props => {
const content = (
<View style={[style.button, {backgroundColor: props.color}]}>
<Text style={styles.text}>{props.text}</Text>
</View>
)
return <TouchableOpacity onPress={props.onPress}>{content}</TouchableOpacity>
}
const styles = StyleSheet.create({
button: {
padding: 16,
width: 200,
borderRadius: 24,
alignItems: 'center'
},
text: {
color: 'white',
fontSize: 20
}
})
export default buttonWelcome;

try a relative url with forward slashes:
import buttonWelcome from '../sweet.js';
btw you should never put source files in node_modules - that's only for node_modules code..

The import statement is wrong.
It should be
import buttonWelcome from './sweet.js';
As you can see it is using linux style file path which is important. This will work on both linux and windows.

undefined is not an object (evaluating '_this.props.navigator.push') react native , when i am trying to navigate from one page to another

Here is the sample code , i am trying react-native-navigation
i used react-native init navigate to start the project
and afterwards i installed
yarn add react-native-navigation#latest
the code run perfect for first screen , but as i am making a call to showNextScreen function it throws the error
undefined is not an object (evaluating 'this.props.navigator.push') react native
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import {Navigation} from 'react-native-navigation';
import firstPage from './app/components/firstPage';
export default class navigate extends Component {
//function to move to next screen
showNextScreen = () =>{
this.props.navigator.push({
screen: 'firstPage',
title: 'firstScreen'
})
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text onPress={this.showNextScreen.bind(this)}
style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('navigate', () => navigate);

Using React Native Navigation, you have to bootstrap your app differently than how it's done originally. Native Navigation doesn't use the registerComponent setup since it's a native navigator.
The steps to fully setting up are listed in their docs https://wix.github.io/react-native-navigation/#/usage

Can't find variable: React

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

I just added var React = require('react-native'); and my whole build failed

I just added
var React = require('react-native');
to my index.ios.js file but when I reload my React Native application, this
comes up:
It says React is read-only?!
So I tried to change the permissions on the react-native module by doing
sudo chmod -R 777 ExampleProject
sudo chmod -R 777 ExampleProject/node_modules/react-native
but it still doesn't work. What did I do wrong?
This is the full source code of my index.ios.js file:
* Sample React Native App
* https://github.com/facebook/react-native
*/
'use strict';
var React = require('react-native');
import React, {
AppRegistry,
Component,
StyleSheet,
Text,
View
} from 'react-native';
class Logbook extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('Logbook', () => Logbook);

You actually import react-native two times. The second time around it complains. Just get rid of
var React = require('react-native');
This does the same thing but with the ES6 module syntax
import React from 'react-native';