Component with nested gradient
<View style={styles.sectionContainer}>
<Text style={{
flexDirection: 'row',
alignItems: 'center',
fontSize: 24,
}}>
First
<LinearGradientText
textComponent={Text}
showGradient
>
<Text>second</Text>
</LinearGradientText>
third
</Text>
</View>
Component with Linear Gradient
export const LinearGradientText: React.FC\<Props\> = props =\> {
const TextComponent = props.textComponent ?? Text;
return (
\<View\>
\<MaskedView
maskElement={
\<TextComponent {...props} style={\[props.style, {fontSize: 24}\]} /\>
}
\\>
\<LinearGradient
colors={\[
props?.firstColor ?? 'pink',
props?.secondColor ?? 'blue',
\]}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 0 }}
style={\[props.style\]}
\\>
\<TextComponent
{...props}
style={\[props.style, { opacity: 0, fontSize: 24 }\]}
/\>
\</LinearGradient\>
\</MaskedView\>
\</View\>
);
};
I can't resolve the problem with gradient text shifting, but I need to use gradient text in nested text, for an example "Good enough, [[username]]".
It works perfectly only for plain text, any tips how can I achieve this?
Related
I'm using this library to make a StackedAreaChart. It's currently working but I need to change the colors to gradients.Only I am able to plot points using the data,I want the gradient colors to be applied in the plotted chart area.
I have attached the code and screenshot for this.
<ChartPathProvider
data={{
points: chartData.map((data) => ({
x: toTimestamp(data.fiscal_year),
y:
data.close_price != null
? parseFloat(data.close_price).toFixed(
instrumentData.digit
)
: 0,
})),
smoothingStrategy: "bezier",
}}
>
<View>
<ChartPath
height={moderateScale(280)}
stroke="green"
strokeWidth={3}
width={screenWidth}
/>
<ChartDot>
<View
style={{
position: "absolute",
left: moderateScale(-35),
width: moderateScale(80),
alignItems: "center",
backgroundColor: "rgba(0, 0, 0, 0.4)",
}}
>
</View>
{/* Chart x & y axis */}
<ChartXLabel
format={toStringDate}
style={[
styles.M12_FW600_LH19_LS02,
styles.whiteColor,
]}
/>
<ChartYLabel
format={formatPrice}
style={[
styles.M12_FW600_LH19_LS02,
styles.whiteColor,
]}
/>
</View>
</ChartDot>
</View>
</ChartPathProvider>
Currently this charts
[1]: https://i.stack.imgur.com/jYptt.png
This is required
[2]: https://i.stack.imgur.com/pr270.png
I've been trying to add a linear gradient as a background to my react native app.
Here is my initial code:
<NavigationContainer theme={MyTheme}>
<Stack.Navigator
initialRouteName="Camera"
screenOptions={{
headerStyle: { elevation: 0 },
}}
>
And here my attempt at adding the gradient:
const MyTheme = {
colors: {
primary: "rgb(255, 45, 85)",
background: () => <LinearGradient colors={["red", "blue"]} />,
},
};
Now, when I console.log(MyTheme.colors) I get background: [Function background
Any idea how I can make this work?
You can try this, may help below code.
<LinearGradient
colors={["red", "blue"]}
start={{x: "Your postition", y: "Your postition"}}
end={{x: "Your postition", y: "Your postition"}}
/>
<View style={{flex:1}}>
<LinearGradient style={{ position: "absolute",
left:0,right: 0, top: 0,bottom: 0,
}}
colors={["#120318", "#221a36"]}
/>
</View>
If you set the LinearGradient's position to absolute, and set left,right,top,bottom as 0, LinearGradient will take up entire space's of its parent element.
I'm quite new to React Native and have a question.
I get this warning: Each child in a list should have a unique "key" prop.
I've tried everything. Now I even have Math.random() as key and I still get the warning.
Home.js:
return(
<ScrollView style={styles.container}>
<StatusBar barStyle='light-content' />
<ImageBackground source={image} style={styles.image} imageStyle={styles.image2}>
<LinearGradient colors={['transparent', 'rgba(249,249,249,1)' ]} locations={[.4, 1]}
style={{
position: 'absolute',
left: 0,
right: 0,
top: 0,
height: 400
}} />
<TouchableOpacity activeOpacity={0.9} style={styles.topNews} onPress={()=> navigation.navigate('WebView')}>
<Text style={styles.topCategoryText}>ITALIAN LEAGUE</Text>
<Text style={styles.topTitleText}>Juventus legend: Ronaldo is natural to be criticized</Text>
<Text style={styles.topSourceText}>CNN Sport</Text>
</TouchableOpacity>
</ImageBackground>
<View style={{marginHorizontal: 10, flex: 1}}><RNMasonryScrollView
colums='2'
columnStyle={{flexDirection: 'column'}}
oddColumnStyle={{flex: 1, marginRight:15, marginLeft:10}}
evenColumnStyle={{flex:1,marginLeft:15}}
>
{[
<NewsDetail Key='1' title="Papers: Salah eager for Barca move" category='LA LIGA' imageSrc='https://en.as.com/en/imagenes/2020/06/11/football/1591881357_315795_noticia_normal.jpg'/>,
<NewsDetail Key='2' title="Man Utd struggles 'mentally impacting' Pogba, says France boss Deschamps" category='PREMIER LEAGUE' imageSrc='https://resources.premierleague.com/premierleague/photo/2019/06/20/88784d96-ef4b-4414-8b59-517c15b162a5/MW1-EditorialLead-new.png'/>,
<NewsDetail Key='3' title="Arsenal's complete player: The meteoric rise of Vivianne Miedema" category='PREMIER LEAGUE' imageSrc='https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTupBTx2is9w3Z7pIhrorpPDMTFHmQhS1Ypmg&usqp=CAU'/>,
<NewsDetail Key='4' title="Mourinho hit with suspension by UEFA" category='SERIE A' imageSrc='https://www.telegraph.co.uk/content/dam/football/2018/02/13/TELEMMGLPICT000153853426_trans_NvBQzQNjv4BqwD2sfO9joeQ6RY-qlTATNB2cSHopZMn-aCc647VHTAY.jpeg'/>,
<NewsDetail Key='5' title="'Ronaldo is definitely faster than me!' – Bolt" category='LA LIGA' imageSrc='https://resources.premierleague.com/premierleague/photo/2018/08/10/bf1acdf0-7b10-4dfe-8844-06f0f18d5c38/2018-08-10T192712Z_1257041591_RC18CE142CA0_RTRMADP_3_SOCCER-ENGLAND-MUN-LEI.JPG'/>,
<NewsDetail Key='6' title="Southgate admits to fears over Maguire's career" category='LIGUE 1' imageSrc='https://images.daznservices.com/di/library/GOAL/a8/c9/vivianne-miedema-goal-50-gfx_nuhcgkr4tthu1kyux2ymq4y4l.jpg?t=-1147520971&quality=60&w=1200'/>,
]}
</RNMasonryScrollView></View>
</ScrollView>
)
NewsDetail.js
import React, {useState, useEffect} from 'react';
import {View, Text, StyleSheet, Image, Dimensions } from 'react-native';
const NewsDetail = (props) => {
const random = Math.random()
const ViewWidth = 157.5
// const [imageSize, setImageSize] = useState({width: 0, height: 0});
// const [viewSize, setViewSize] = useState({width: 0, height: 0});
const [imageHeight, setHeight] = useState(0);
const myUri = props.imageSrc;
useEffect(() => {
Image.getSize(myUri, (width, height) => {
setHeight(height / (width / ViewWidth));
});
}, [])
if(imageHeight > 0){
console.log(random)
return (
<View style={styles.newsDetail} key={`${random}`}>
<Image
resizeMode='cover'
style={{
width: ViewWidth,
height: imageHeight,
borderTopLeftRadius: 7,
borderTopRightRadius: 7,
}}
source={{ uri: myUri,}}
/>
<Text style={styles.textOne}>{props.category}</Text>
<Text style={styles.textTwo}>{props.title}</Text>
</View>)
} else return null;
}
const styles = StyleSheet.create({
image:{
width: '100%',
borderTopLeftRadius: 7,
borderTopRightRadius: 7
},
newsDetail:{
backgroundColor: "white",
marginTop: 10,
borderRadius: 7,
opacity: 0.9,
shadowColor: "grey",
shadowRadius: 5,
shadowOffset: {width: 0, height: 0},
shadowOpacity: 0.3
},
textOne:{
fontSize: 10,
color: '#7A7F82',
fontWeight: 'bold',
paddingTop: 10,
paddingHorizontal: 10,
paddingBottom:3
},
textTwo:{
fontSize: 14,
color: '#2D3041',
fontWeight: 'bold',
paddingHorizontal: 10,
paddingBottom:10
}
});
export default NewsDetail;
I dont know what to do. Any help? Also, is there any websites where I can pay to get quick help on questions I have about React Native? Similar to StackOverflow just you pay to get quick answers on all questions?
A proper way to generate a list is to create an array of objects, then you use map to display. In your codes, it's almost correct. You should use key instead of Key.
const articles = [
{ id: 1, title: "Papers: Salah eager for Barca move", category: 'LA LIGA', imageSrc: 'https://en.as.com/en/imagenes/2020/06/11/football/1591881357_315795_noticia_normal.jpg' },
{id: '2', title: "Man Utd struggles 'mentally impacting' Pogba, says France boss Deschamps", category: 'PREMIER LEAGUE', imageSrc: 'https://resources.premierleague.com/premierleague/photo/2019/06/20/88784d96-ef4b-4414-8b59-517c15b162a5/MW1-EditorialLead-new.png'},
{ id:'3',title: "Arsenal's complete player: The meteoric rise of Vivianne Miedema", category: 'PREMIER LEAGUE', imageSrc: 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTupBTx2is9w3Z7pIhrorpPDMTFHmQhS1Ypmg&usqp=CAU'}]
<RNMasonryScrollView
colums='2'
columnStyle={{flexDirection: 'column'}}
oddColumnStyle={{flex: 1, marginRight:15, marginLeft:10}}
evenColumnStyle={{flex:1,marginLeft:15}}
>
{ articles.map((article) => {
return <NewsDetail key={article.id} title={article.title} imageSrc={article.imageSrc} />
})}
</RNMasonryScrollView>
How to convert kilometers value into miles using slider in react-native?
I am using this one dependency for import slider.
import Slider from "react-native-slider";
I want something like this output.
When i click on km then it give me output as in kilometers and when i clicked on ml then it give me output as in miles.
export default class AdvanceFilter extends Component {
render(){
constructor(props) {
super(props);
this.state={
distance: 100,
minDistance: 0,
maxDistance: 300,
};}
return(
<View style={styles.sliderdistance1}>
<Text style={styles.texthead}>Distance</Text>
<View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
<Text style={styles.txtslider}>0 -</Text>
<Text style={styles.txtslider}>{this.state.distance}</Text>
<TouchableOpacity style={styles.txtsliderkm}><Text style={{ color: 'white', }}>Km</Text></TouchableOpacity>
<TouchableOpacity style={styles.txtsliderml}><Text style={{ color: 'black', }}>ml</Text></TouchableOpacity>
</View>
</View>
<View style={styles.sliderdistance2}>
<Slider
style={{ width: 370, marginLeft: 10, padding: 3, marginRight: 10 }}
step={1}
minimumValue={this.state.minDistance}
maximumValue={this.state.maxDistance}
value={this.state.distance}
onValueChange={val => this.setState({ distance: val })}
thumbTintColor='#FE5F63'
maximumTrackTintColor='gray'
minimumTrackTintColor='#FE5F63'
/>
</View>
);
}
}
}
If I understood correctly, you're talking about two different things.
If you want to convert from kilometers to miles, you need to apply a mathematic formula to this: KM_TO_M = KM * 0.621371 and M_TO_KM = M * 1.609344.
To change the slider you need to change the values in your state, probably. So you need to set the action of the TouchableOpacity (or any button) that changes from KM to M something like:
if (<going to miles mode>) {
this.setState({
distance = this.state.distance * 0.621371,
minDistance: 0,
maxDistance: 186, //aprox result of 300 * 0.621371
});
} else if (<going to kilometers mode>) {
this.setState({
distance = this.state.distance * 1.609344,
minDistance: 0,
maxDistance: 300,
})
}
Remeber to apply rounding as needed
You can create one function which convert km to mile and return mile
const convertKmToM = (values) => {
// you can make change as per requirement
var realMiles = ( values * 0.621371 );
var Miles = Math.floor(realMiles);
return Miles;
}
Use this function like
<Text>({convertKmToM(YOUR_VALUE_IN_KM)}))</Text>
I am working with React native component FlatList there is actually two FlatList one for the dynamic content of Images and the other is using static data. The problem is when i loads that screen static data is loads initially and after that dynamic content loads but when static data loads it occupies the area of dynamic content and when dynamic images are loads they occupy there position and static data stretch to bottom i want to set a position for dynamic data until it loads the area where it will be shown it should be shadow type or something loading skeleton i don't wants that the other FlatList occupy the space of Images while Images are on Loading state.
<FlatList
data={newMovies}
renderItem={({ item, index }) => {
if (index >= 10) {
return null;
}
return (
<View
><Image
resizeMode="cover"
style={{
height: Sizes.DEVICE_HEIGHT * 0.32,
width: Sizes.DEVICE_WIDTH * 0.8875,
zIndex: -100,
marginLeft: 9,
}}
source={{ uri: IMAGE_URL_PREFIX + item.backdrop ||
item.poster }}
/>
<LinearGradient
start={{ x: 0.0, y: 0.0 }}
end={{ x: 0.0, y: 1.2 }}
locations={[0, 0.4, 0.85]}
colors={[Colors.transparent, Colors.transparent,
Colors.black]}
style={{
height: Sizes.DEVICE_HEIGHT * 0.32,
width: Sizes.DEVICE_WIDTH * 0.8875,
marginLeft: 10,
position: 'absolute',
zIndex: 10,
}}
>
<View style={Styles.horizontalImage}>
<Text style={Styles.posterName} numOfLines={1}>
{item.name}</Text>
<Text style={Styles.posterDesc}>
{item.stringAttributes}
</Text>
</View>
</LinearGradient>
</View>
);
}
}
horizontal
onEndReached={() => this.onListEndReached(this.props)}
/>
</View>
<ScrollView style={Styles.innerContainer}>
<FlatList
removeClippedSubviews={false}
data={[{ key: 'New On Netflix', id: 0 },
{ key: 'Watch With Friends', id: 1 },
{ key: 'Watch By Yourself', id: 2 },
{ key: 'Newset Movies', id: 3 },
{ key: 'Best of All Time', id: 4 },
{ key: 'Best On Netflix', id: 5 },
{ key: 'Most Conversational', id: 6 },
{ key: 'Most Rewatchable', id: 7 }]}
renderItem={({ item }) => (<List>
<ListItem style={{ marginLeft: 0 }} onPress={() => this.selection(item.key, item.id)}>
<Text style={Styles.innerheader}>{item.key}</Text>
</ListItem>
</List>)}
keyExtractor={item => item.id}
/>
I found a solution with defining the View around my first FlatList and assigning the with to it exactly to my image so now the other FlatList is not overlapping with it while loading.