general questions regarding react native. props and style - javascript

I was tasked with making some tweaks on a react native app. while it's not my skill there is no one available to work on this so I am stuck with it. for the most part I was able to make the edits needed, however I have few questions about the code if anyone can help me understand better.
1 - what is the difference between
color={Colors.myColorGold}
color: Colors.myColorGold
2 - if I want to use the predefined style but change one parameter like color, or font size how can I do it while keeping the rest of the parameters
<Text style={{ color: Colors.ochsnerGold, fontWeight: 'bold' }}>
<Text style={styles.emphasized}>{alert.SensorType}</Text>
3 -
what is the differance between the two below
this.props.navigation.navigate('NotificationPreferences');
this.navigate('NotificationPreferences')
4 - and lastly, I wanted to change the color of the placeholder, I have tried everything without success, below is the code and all the things I tried.
const ItemPicker = ({itemOptions, handleChangeitem, selectedItemID}) => {
return Platform.OS === 'ios' ? (
<RNPickerSelect
placeholder={{label: 'Select an item', value: null, placeholderTextColor: Colors.myGold}}
placeholderTextColor={Colors.myGold} //tried this
items={itemOptions}
onValueChange={handleChangeItem}
style={{inputIOS: styles.inputIOS, inputAndroid: styles.inputAndroid, Color: Colors.myGold}} //tried this
value={selectedItemID}
textColor={Colors.myGold} //tried this
/>
) : (
<Picker
selectedValue={selectedItemID}
style={styles.inputAndroid}
onValueChange={handleChangeItem}
textColor={Colors.myGold} //tried this
Color={Colors.myGold} //tried this
>
<Picker.Item label="Select a Item" value="null" textColor={Colors.myGold} Color={Colors.myGold}/> //tried this
{
itemOptions.map((item) => (
<Picker.Item key={item.value} label={item.label} value={item.value} textColor={Colors.myGold} Color={Colors.myGold} /> //tried this
))
}
</Picker>
)
}

For
1. If you are using a component which has style as its props so you can use as color={Colors.myColorGold} . like suppose in
<MaterialIcon color={Colors.myColorGold} />
and if you want to add a color property in the styles object you do :
const proAppHeaderStyles=StyleSheet.create({
hederStyle:{
color:"#4f58ff",
}
})
suppose you want to change in
<Text style={styles.emphasized}> {alert.SensorType}</Text> just go to styles.emphasized object where its defined and add color or fontsize whatever you want to change. e.g
emphasized:{
color:'red'
}
3.this.props.navigation.navigate('NotificationPreferences') is same as the below one. Only that the above one states in explicitly and below syntax will only work if you first destructure navigate. i.e
const {navigate} = this.props.navigation; and after that use navigate as below
this.navigate('NotificationPreferences')
SO you have to apply styles as below
<RNPickerSelect
placeholder={{
label: 'Select a number or add another...',
value: null,
color: 'red',
}}
items={this.state.numbers}
onValueChange={value => {
this.setState({
favNumber: value,
});
}}
style={{
...pickerSelectStyles,
iconContainer: {
top: 20,
right: 10,
},
placeholder: {
color: 'purple',
fontSize: 12,
fontWeight: 'bold',
},
}}
value={this.state.favNumber}
Icon={() => {
return (
<View
style={{
backgroundColor: 'transparent',
borderTopWidth: 10,
borderTopColor: 'gray',
borderRightWidth: 10,
borderRightColor: 'transparent',
borderLeftWidth: 10,
borderLeftColor: 'transparent',
width: 0,
height: 0,
}}
/>
);
}}
/>
so basically inside the style object you need to pass placeholder object and then the style :
style={{
...pickerSelectStyles,
iconContainer: {
top: 20,
right: 10,
},
placeholder: { // this is the part
color: 'purple',
fontSize: 12,
fontWeight: 'bold',
},
}}
Do check out this link : example
ask me for doubts.

Related

How to Solve ERROR Warning: Failed prop type: Invalid prop `style` of type `array` supplied to `Row`, expected `object` (react-native-table-component)

Here i'm working on a react-native-table-compornent.
when i try to run my project, and display my data in table (react native),
i get this type of error ( ERROR Warning: Failed prop type: Invalid prop textStyle of type array supplied to Cell, expected object.) on my project;
how can solve this error warning?
where is the problem in my codes? i am sharing here in below my codes.
when i excute this code, i can able to view those data in table but besides i also get this error warning in my project, so i want to solve this Warning.
anyone can help me how to fix this error or where i should do what in my project?
i appreciate your helping, thankyou in advance!
Here i am sharing my codes, i have use in vs code(react native):
import React from "react";
import { StyleSheet, View, ScrollView } from "react-native";
import { Table, Row } from "react-native-table-component";
const TT = () => {
const th = ["Name", "Age", "Gmail", "Occupation"];
const widthArr = [150, 150, 150, 150];
const td = [
["John", 32, "john01#gmail.com", "Doctor"],
["Paul", 39, "poul09#gmail.com", "Teacher"],
["Rokey", 45, "rokey03#gmail.com", "Engineer"]
];
return (
<View style={styles.container}>
<ScrollView horizontal={true}>
<View>
<Table
style={{ marginTop: 12, marginLeft: 12 }}
borderStyle={{ borderColor: "#FAEBD7", borderWidth: 1 }}
>
<Row
data={th}
widthArr={widthArr}
style={styles.header}
textStyle={styles.headerText}
/>
</Table>
<ScrollView style={styles.dataWrapper}>
<Table
style={{ marginLeft: 12 }}
borderStyle={{ borderColor: "#FAEBD7", borderWidth: 1 }}
>
{td?.map((rowData, index) => (
<Row
key={index}
data={rowData}
widthArr={widthArr}
style={[
styles.row,
index % 2 && { backgroundColor: "#212733" }
]}
textStyle={styles.text}
/>
))}
</Table>
</ScrollView>
</View>
</ScrollView>
</View>
);
};
export default TT;
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 20,
paddingBottom: 18,
backgroundColor: "#212732"
},
header: {
height: 50,
backgroundColor: "#2F4F4F"
},
headerText: {
textAlign: "center",
fontWeight: "400",
color: "white"
},
text: {
textAlign: "center",
fontWeight: "300",
color: "#fefefe"
},
dataWrapper: {
marginTop: -1
},
row: {
height: 40,
backgroundColor: "#2c3445"
}
});
output of error:
react-native-table-component isn't being maintained by its original developer. Warnings like this are covered in the repo's issues section, and there are great forks that fix some errors.
So in my case i choose to use different library which is react native paper;
libraries: npm i react-native-paper
using dataTable i finished my project. for more information https://callstack.github.io/react-native-paper/data-table.html

React Native TextInput on iPhone initially show all the content inside

I have a TextInput component with limited width, while the content inside sometimes longer. I set numberOfLines to 1 and expected that each time the content's length larger than the input's width, the overflow part will be hidden. It goes fine on Android, but in iOS, initially it's still show all the content, the overflow part is placed in a new line, but when the input is focused, it becomes as normal as I expected. How can I fix this.
At the first time, when value is set by useEffect
When the input is focused
Code:
<TextInput
allowFontScaling={false}
autoComplete="off"
autoCapitalize={'none'}
onChangeText={e => {
onChange(e);
trigger && trigger([triggerTags]);
}}
value={value}
autoCorrect={false}
spellCheck={false}
placeholderTextColor={Colors.placeholder}
placeholder={placeholder}
style={[
{
zIndex: 100,
borderWidth: 1,
borderRadius: 12,
width: Sizes.width(76),
height: 40,
marginTop: 8,
color: Colors.text,
fontSize: Sizes.h6,
paddingHorizontal: Sizes.padding,
backgroundColor: !editable ? '#E5E5E5' : undefined,
textAlign: 'center',
paddingVertical: 0,
textAlignVertical: 'center',
},
inputStyle,
]}
// multiline={false}
numberOfLines={1}
maxLength={maxLength}
keyboardType={keyboardType}
editable={editable}
/>
I found the solution, just change textAlign from 'center' to undefined

How to make a view height fit the content inside in react native?

I'm building a mobile chat application and I came across this problem where I display the messages as text inside of a view, but apparently I can't make the messages appear in a certain height where it would fit inside the view. It's either the message is too long so it won't be displayed completely (there isn't enough space in the view) or the message appears but there is a lot of spaces after the text.
Please see the image that describes exactly the problem :
Here is my code :
1- Views :
if (chat.from !== CurrentUser) {
temp_chat.push(
<View key={i} style={styles.messageContainer1}>
<View style={styles.thisUserText}>
<Text style={styles.message}>{chat.msg}</Text>
</View>
<View style={styles.empty}></View>
</View>
);
} else {
temp_chat.push(
<View key={i} style={styles.messageContainer2}>
<View style={styles.empty}></View>
<View style={styles.otherUserText}>
<Text style={styles.message}>{chat.msg}</Text>
</View>
</View>
);
}
2- Style :
messageContainer1: {
flexDirection: "row",
marginBottom: 10,
flex: 1,
},
messageContainer2: {
flexDirection: "row",
justifyContent: "flex-end",
marginBottom: 10,
flex: 1,
},
message: {
fontSize: 16,
color:"#fff",
padding:10
},
empty: {
flex: 1,
},
thisUserText: {
backgroundColor: "#bf0010", // red
flex: 1,
height: 100,
borderRadius: 5,
color:"#fff",
},
otherUserText: {
backgroundColor: "#13283E", // dark blue
flex: 2,
height: 100,
borderRadius: 5,
},
What I need to have is a dynamic height for the red and dark blue views, to make the text inside fit perfectly whether it's a long or short text. How can I achieve this ?
Thanks in advance 🙏
You can use flexBasis: auto
Read here for more information

How to change the underline thickness in react native

I have been using reactive native for a few weeks and I have stuck at a point. I have a text and it is underlined. But I need to make the thickness of the underline higher so that it is clearly visible. I tried finding a solution and didn't get any. Can someone help me here?
My code is like the following. :
<Text style={{textDecorationLine: 'underline'}}>Underlined Text</Text>
<TextInput style={styles.textInput}/>
const styles = StyleSheet.create({
textInput: {
borderBottomColor: '#000', // Add this to specify bottom border color
borderBottomWidth: 10 // Add this to specify bottom border thickness
}
});
Underline Text
const styles = StyleSheet.create(
{
Container:
{
justifyContent: 'center',
flex: 1,
},
TextStyle:
{
textAlign: 'center',
fontSize: 20,
textDecorationLine: 'underline',
}
}

React Native / Victory Charts : Need to style coords

I am building a small mobile app in React Native that displays a line graph.
I have built the line graph via Victory Charts component.
This is my App.js
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { VictoryBar, VictoryChart, VictoryAxis, VictoryLine } from 'victory-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<VictoryChart
domainPadding={{x: 40}}
style={{marginLeft: 120}}
>
<VictoryLine
data={[
{logdate: "11-01", temp: 110 },
{logdate: "12-01", temp: 98 },
]}
x="logdate"
y="temp"
style={{
data: {opacity: 0.7},
labels: {fontSize: 12},
parent: {border: "1px dotted #001"}
}}
/>
<VictoryAxis
label="logdate"
style={{
axisLabel: { padding: 30 }
}}
/>
<VictoryAxis dependentAxis
label="temp"
style={{
axisLabel: { padding: 40 }
}}
/>
</VictoryChart>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
The line graph is displayed as shown below
The graph is working fine.
I need help in styling of the x-axis co-ord's label as highlighted in the pic.
Instead of showing "11-01" horizontally I want it to be shown vertically as shown in the pic.
Anyone has any ideas ?
Add tickLabels: { angle: -90, }
in style of VictoryAxis :
<VictoryAxis
label="logdate"
style={{
axisLabel: { padding: 30 },
tickLabels: { angle: -90, }
}}
/>
You should just add two victory Axis before the victory line
add dependentAxis for the first
<VictoryAxis dependentAxis />
for the second add the axeY list to the ticketFormat item and define the -60 angle style.
<VictoryAxis
style={{ tickLabels: { angle: -60 } }}
tickFormat={AxeY}
/>
Hopefully I help you

Categories

Resources