I am using this but I am facing issue that month is cutting in it so I am able to see Only 20% of JUN from top in month name. I am not able to get what is the problem in this.
import {
Calendar,
CalendarList,
Agenda,
Calander,
} from "react-native-calendars";
<CalendarList
current={calendarDate}
style={styles.calanderStyle}
markingType={"custom"}
theme={{
// backgroundColor: "rgb(31,35,43)",
calendarBackground: "rgb(31,35,43)",
textSectionTitleColor: "#ffffff",
textSectionTitleDisabledColor: "#ffffff",
selectedDayBackgroundColor: "#ffffff",
selectedDayTextColor: "#ffffff",
todayTextColor: "#ffffff",
dayTextColor: "#ffffff",
textDisabledColor: "#d9e1e8",
dotColor: "#00adf5",
selectedDotColor: "#ffffff",
arrowColor: "rgb(101,180,84)",
// disabledArrowColor: 'red',
monthTextColor: "white",
indicatorColor: "blue",
textDayFontFamily: "ProximaNova-Regular",
textMonthFontFamily: "ProximaNova-Regular",
textDayHeaderFontFamily: "ProximaNova-Regular",
textDayFontWeight: "400",
textMonthFontWeight: "bold",
textDayHeaderFontWeight: "200",
textDayFontSize: 15,
textMonthFontSize: 2,
textDayHeaderFontSize: 11,
}}
horizontal={true}
onDayPress={(day) => apiCallingFunction(day.dateString)}
caleendarWidth={300}
markedDates={calandarEvents}
/>
Try adding padding to the container the CalendarList is in.
Related
I want to display my text with even amount of space per line of text displayed similar to how eBooks display texts. I could only find resources regarding displaying many <View>s in space-evenly or space-between using flexbox justifyContent.
I have a <Text>a lot of text inside....</Text> and I want the text inside should be evenly spaced. How could I space my words inside the <Text>?
const TextDisplay = () => {
const part = part0004_split_010;
const text_example =
"fdkfjldjsfljsldfjlskdjflsdjf alkjgdlkjg lkdjgflkdjgkld kdjfauieghjknf uio 23jo1j kldanglk3tlk jasdn lskj jie hgihigehi anvmcnvmcn ,zmnmx nmf ei nvi nie 2 i2j42in42i n kd nk nskan lk lkdas j92al klkjr1l2or a;z;z;z; 9r3ur9j 39 091 jr1 j a,c n kn oian iong oien voin ow ni ei nwoinq ei n93 n99";
return (
<View style={styles.container}>
<ScrollView style={styles.scrollview}>
<Text style={styles.text_style}>{text_example}</Text>
</ScrollView>
</View>
);
};
export default TextDisplay;
const styles = StyleSheet.create({
container: {
flex: 1,
borderColor: "red",
borderWidth: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "grey",
width: "80%",
},
scrollview: {
flex: 1,
justifyContent: 'space-evenly'
},
text_style: {
fontSize: 20,
color: "black",
},
});
I tried using justifyContent: 'space-evenly' on my scrollView but it doesn't change anything
You can use textAlign:"justify" in the styles of a <Text> to make the text justified.
I have seen a few posts explaining how to set multiple countries for google places autocomplete in javascript/react as so:
componentRestrictions: {country: ["gb", "fr"]}
but for react-native GooglePlacesAutocomplete, the advice is to put a components option within query. Unsure if here we can pass multiple countries... have tried and failed to pass an array here as looks like it needs to just be a string containing one country code. Would appreciate any help...
<GooglePlacesAutocomplete
placeholder={placeholder}
listViewDisplayed={true}
fetchDetails={true}
textInputProps={{
borderColor: color,
fontSize: 18,
borderWidth: 1,
borderRadius: 4,
flex: 1,
padding: 7
}}
onPress={(data, details = null) => {
console.log(data, details)
}}
query={{
key: googleApiKey,
language: "en",
components: "country:gb",
types: types ? types : null
}}
/>
You can use the component restrictions like so components: "country:gb|country:us"
See full code example below
<GooglePlacesAutocomplete
placeholder={placeholder}
listViewDisplayed={true}
fetchDetails={true}
textInputProps={{
borderColor: color,
fontSize: 18,
borderWidth: 1,
borderRadius: 4,
flex: 1,
padding: 7
}}
onPress={(data, details = null) => {
console.log(data, details)
}}
query={{
key: googleApiKey,
language: "en",
components: "country:gb|country:us",
types: types ? types : null
}}
/>
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>
I am trying to create a multiline chart in simple react native mobile application.
I tried various libraries but the multiline chart is not working.
I am new to this. Please help.
you can use "react-native-char-kit"
just by providing multiple datasets, you can implement a multiline chart.
<LineChart
bezier
withHorizontalLabels={false}
withVerticalLabels={false}
data={{
labels: [' jan', ' feb', ' mar', ' apr', ' june', ' july'],
datasets: [
{
data: [10, -4, 6, -8, 80, 20],
strokeWidth: 2,
},
{
data: [5,8,6,9,8,2,-2],
strokeWidth: 2,
},
],
legend: ['car', 'bike'],
}}
width={Dimensions.get('window').width - 16}
height={200}
chartConfig={{
backgroundColor: '#1cc910',
backgroundGradientFrom: '#eff3ff',
backgroundGradientTo: '#efefef',
decimalPlaces: 2,
color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
style: {
borderRadius: 16,
},
}}
style={{
borderRadius: 16,
}}
/>
I have the following code:
return (
<>
<View style={styles.dashboardListItemContainer}>
<View style={styles.listItemBorder} />
</View >
</>
)
const styles = StyleSheet.create({
dashboardListItemContainer: {
minHeight: 73,
backgroundColor: COL_DARK_BG,
display: "flex",
flexDirection: "column",
},
listItemBorder: {
minHeight: 0.5,
backgroundColor: 'white',
}
});
Which produces the following result:
My question is, why are the lines inconsistently bright / appear to be different heights?
Also when I change column to row here: flexDirection: "row", the line disappears completely. I can't tell if this is a bug or there are errors in my code?
TIA.
Update:
I cannot solve this problem on any device, and I've tried different methods for determining the height.
borderBottomWidth: StyleSheet.hairlineWidth, looks like this:
You can see in the above picture some lines do not even show up.
borderBottomWidth: StyleSheet.hairlineWidth * 2, looks like this:
And height: 0.5, looks like this on a white background:
The problem is consistent across devices, it is at the edge of an item in a <FlatList>.
Android Emulator has less resolution, try on a real device, sometimes i have the same error, and when I run on a real device it looks good.
We can use flex value.
import React, { Component } from "react";
import { View, FlatList } from "react-native";
import { StyleSheet } from "react-native";
class App extends Component {
render() {
return (
<FlatList
data={[1, 2, 3, 4, 5, 6, 7, 8, 9]}
extraData={[1, 2, 3, 4, 5, 6, 7, 8, 9]}
horizontal={false}
renderItem={({ item, index }) => {
return (
<View style={styles.dashboardListItemContainer}>
<View style={styles.listItemBorder} />
</View>
);
}}
key={({ item, index }) => index}
/>
);
}
}
export default App;
const styles = StyleSheet.create({
dashboardListItemContainer: {
backgroundColor: "red",
display: "flex",
flex: 1,
minHeight: 73,
flexDirection: "column"
},
listItemBorder: {
minHeight: 0.5,
backgroundColor: "yellow"
}
});