I am new to React native and working on a project on that, I am using react-native material-dropdown for using drop down component .i want to change the label color of drop-down but i am unable to do it because i didn't find label color property to change .could someone help me with this as the label is taking default color as black for the label text.
textColor:'#FFF'
tintColor:'#ffffff'
I tried giving these two styles also but it doesn't work for me.
Do anyone have a solution for that?
Thanks in advance
<Dropdown
onChangeText={ (val) => this.changeDate(val)}
label='All Dates'
data={data}
style = {{color: 'white'}} //for changed text color
baseColor="rgba(255, 255, 255, 1)" //for initial text color
/>
Use itemTextStyle and textColor.
<Dropdown
containerStyle={{width:200}}
label='Favorite Fruit'
itemTextStyle={{backgroundColor:"blue",textColor:"white"}}
textColor="#FFF"
data={data}
/>
Here is expo example.
If you are using DropDownPicker from react-native-dropdown-picker, then you should do
labelStyle = {{
fontSize: 15,
color:'white'
}}
This will change the text color. Refer here
import React, {useState, useEffect} from 'react';
import {Dropdown} from 'react-native-element-dropdown';
function DropdownComponent() {
const [value, setValue] = useState(null);
const dropDownData = [
{label: 'Option 1', value: '0'}
{label: 'Option 2', value: '1'}
{label: 'Option 3', value: '2'}
{label: 'Option 4', value: '3'}
{label: 'Option 5', value: '4'}
];
return (
<Dropdown
selectedTextProps={{
style: {
fontSize: 20,
color: 'blue',
},
}}
selectedTextStyle={{
fontSize: 13,
color: 'black',
}}
data={dropDownData}
iconColor="black"
iconStyle={{width: 36, height: 36}}
maxHeight={200}
labelField="label"
valueField="value"
value={value}
onChange={(item) => {
setValue(item.value);
}}
/>
);
}
export default DropdownComponent;
Related
I am getting the following error in my implementation of FlatList
A VirtualizedList contains a cell with more than one VirtualizedList of the same orientation as the parent list. You must pass a unique listKey prop to each sibling list.
VirtualizedList trace:
Child (vertical):
listKey: rootList-header
cellKey: rootList-header
Parent (vertical):
listKey: function listKey(item, index) {
return 'createEX' + index.toString();
}
cellKey: rootList
I am also adding relevant code. The code works when I test using expo, although the error comes up. The app crashes in TestFlight.
This is my FlatList Implementation. If I remove the MetNeedsMenu part, the code works.
<FlatList style={stylesCreate.scrollStyle}
listKey={(item, index) => {return 'createEX' + index.toString()}}
ListHeaderComponent={
<View style={stylesCreate.createForm}>
<Text style={styles.screenTitle}>CREATE NEW{"\n"}ENTRY</Text>
<Text style={stylesCreate.label}>How are you feeling now?</Text>
<Dropdown mood={newMoodBefore} setMood={setMoodBefore}/>
<Text style={stylesCreate.label}>Select the areas of life that made you feel grateful.</Text>
<MetNeedsMenu selectedNeeds={needs} setSelectedNeeds={setNeeds}/>
<InfoButton/>
<Text style={stylesCreate.label}>What are you grateful for?</Text>
<GratitudeInput value={newEntry} placeholder="Write Here..." setValue={setEntry}/>
<Text style={stylesCreate.label}>How are you feeling after doing the activity?</Text>
<Dropdown mood={newMoodAfter} setMood={setMoodAfter}/>
<CustomButton text='CREATE' onPress={addEntry}></CustomButton>
</View>
}
>
</FlatList>
This is my MetNeedsMenu implementation.
const K_OPTIONS = [
{
item: 'Physical Wellbeing:',
id: '1',
},
{
item: 'Peace & Calm',
id: '2',
},
{
item: 'Energizing Moments',
id: '3',
},
{
item: 'Engagement / Flow',
id: '4',
},
{
item: 'Connection',
id: '5',
},
{
item: 'Accomplishment',
id: '6',
},
{
item: 'Meaning / Fulfillment',
id: '7',
},
{
item: 'Others',
id: '8',
}
]
const MetNeedsMenu = ({ selectedNeeds, setSelectedNeeds }) => {
return (
<View style={{ marginBottom: 20}}>
<SelectBox
width={300}
label="Select multiple"
options={K_OPTIONS}
selectedValues={selectedNeeds}
onMultiSelect={onMultiChange()}
onTapClose={onMultiChange()}
hideInputFilter={true}
isMulti
listKey={(item, index) => {return index.toString()}}
labelStyle={{
fontSize: 15,
color: '#0060ff',
}}
containerStyle={{
backgroundColor: '#ffffff',
borderRadius: 5,
}}
arrowIconColor={'blue'} //style for dropdown arrow
optionsLabelStyle={{ //style for labels of options
color: 'black',
paddingLeft: 10,
fontSize: 15,
}}
multiOptionContainerStyle={{ //style multiple selections
backgroundColor: '#0060ff',
}}
multiListEmptyLabelStyle={{ //style for SELECT text
paddingLeft: 10,
}}
toggleIconColor={'#0060ff'} //style color of select icon
selectedItemStyle={{
paddingLeft: 10,
}}
/>
</View>
)
function onMultiChange() {
return (item) => setSelectedNeeds(xorBy(selectedNeeds, [item], 'id'))
}
}
I am guessing the problem lies with MultiNeedsMenu, but I have put listKey there with no success
The error tells you that you have a FlatList or Scrollview inside another FlatList or Scrollview with the same orientation. What is possible to do is to have nested FlatList or ScrollView of different orientation. Here is an example:
<FlatList
data={...}
keyExtracto={...}>
<ScrollView horizontal>
<Text>One</Text>
<Text>Two</Text>
</ScrollView>
</FlatList>
Unable to see the list items in the result list. Spent a full day figuring out what it might be, still unable to resolve it.
When search results appear, I cannot see the text. listview style doesn't color the text.
<GooglePlacesAutocomplete
returnKeyType={'default'}
fetchDetails={true}
minLength={2}
placeholder="Search"
textInputProps={{
placeholderTextColor: '#32a852',
returnKeyType: 'search',
}}
onPress={(data, details = null) => {
// 'details' is provided when fetchDetails = true
console.log(data, details);
}}
query={{
key: GOOGLE_API_KEY,
language: 'en',
}}
styles={{
textInput: {
height: 38,
color: '#5d5d5d',
fontSize: 16,
},
predefinedPlacesDescription: {
color: '#1faadb',
},
listView: {color: 'black', zIndex: 100000}, // doesnt work, text is still white?
}}
/>
</View>
In styles, add description for changing the color or any other style attribute.
styles = {{
...
description : {color : 'black'}
}}
I want to adjust the outlined react-native-paper TextInput label color at the initial state (not onFocus). This is my OutlinedInput component:
import * as React from 'react';
import { TextInput } from 'react-native-paper';
const OutlinedInput = (props) => {
return (
<TextInput
mode='outlined'
label={props.label}
placeholder={props.placeholder}
placeholderTextColor='white'
secureTextEntry={props.secureTextEntry}
multiline={props.multiline}
keyboardType={props.keyboardType}
value={props.value}
onChangeText={(value) => props.onChangeText(value)}
style={props.style}
theme={props.theme}
/>
);
};
export default OutlinedInput;
In my Register component, I created an OutlinedInput component inside it:
<View style={{ justifyContent: 'center', alignItems: 'center' }}>
<OutlinedInput
label={'User Name'}
value={userName}
onChangeText={(userName) => setUserName(userName)}
style={{ color: 'white', backgroundColor: 'rgb(35,39,42)',
borderRadius: 5, width: '75%', height: '5%'
}}
theme={{ colors: { text: 'white', primary: 'rgb(33, 151, 186)' } }}
/>
</View>
I added this line at the top of Register component:
const [userName, setUserName] = useState('');
The screenshot of my program if I do not click the input:
This is the screenshout for clicking the input:
As you can see, the color of label User Name is black. I want to set this to white. When clicking on it, it works as expected, but the initial state of the color of the label is not what I want.
I tried to solve this problem using placeholder. I added placeholder props to the OutlinedInput and change placeholder color to white, but in this case, placeholder didn't become outlined. When I tried anything about placeholder, it didn't become outlined.
How can I adjust the label color to see it as white after opening the program?
You need to replace TextInput property:
placeholderTextColor='white'
with:
theme={{
colors: {
placeholder: 'white'
}
}}
In order to adjust label color in React Native Paper v5 you have to update this prop:
theme={{
colors: {
onSurfaceVariant: 'white'
}
}}
I don't get why they made it so unsemantic and inaccessible (it's not even in their Docs)
I have a simple vertical Flatlist on Android and I would like to render some of its items with a negative margin. The goal is for those items to appear wider than the Flatlist.
Something like this with red being an item of the flatlist:
Unfortunately, the edges of the items are cut by the edge of the Flatlist.
Is there a way to display items that are wider than the Flatlist that renders them?
EDIT:
I know I can achieve the visual on my illustration by adding a margin/padding to every item on the list except the red one. What I would like to know is if it is possible to make a specific item wider than the Flatlist itself (not just wider than the other items)
I would rather stylize the one item that needs to be wider, rather than all the others.
I myself actually never make an item in FlatList with wider scale of the whole flatList cause I know it's a bad idea and it tends to be ugly looking, just imagine an item with an overlapped verticalScrollIndicator. But the better way is that you can add a View like this.
...FlatList tag.....
renderItem={({ item, index }) => {
return (
<View style={{ paddingHorizontal:item.isWider ? 0 : '5%' }}>
....Children
</View>
)
}}
You can also write the statement to work only for some particular item index.
By the way, the scroll indicator will not overlap with any item and it has a controlled and better looking UI.
Whenever you want to render specific items without margin value, the only thing you have to do is override style.
I create a sample application according to your requirements.
import React, { Component } from 'react';
import { SafeAreaView, View, FlatList, StyleSheet, Text } from 'react-native';
const DATA = [
{
id: 1,
title: 'First Item',
},
{
id: 2,
title: 'Second Item',
},
{
id: 3,
title: 'Third Item',
},
{
id: 4,
title: 'Forth Item',
},
{
id: 5,
title: 'Fifth Item',
},
{
id: 6,
title: 'Sixth Item',
},
];
export default class App extends Component {
renderItems = ({ item }) => (
// Suppose if you want to change margin value & background color of id == 3
<View style={item.id !== 3 ? styles.item : [styles.item, { backgroundColor: 'red', margin: 0 }]}>
<Text>{item.title}</Text>
</View>
)
render() {
return (
<SafeAreaView style={styles.container}>
<FlatList
data={DATA}
renderItem={this.renderItems}
keyExtractor={item => item.id}
/>
</SafeAreaView>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
marginTop: 20,
},
item: {
backgroundColor: 'green',
padding: 20,
marginVertical: 8,
marginHorizontal: 16,
},
});
Hope this helps you. Feel free for doubts.
According to the image you provided, and only style the specific list item, I could change align-self, width, and negative margin to achieve what you want.
Apply the specific item
<FlatList
contentContainerStyle={styles.list}
data={data}
renderItem={({ item, index }) => (
<View style={[styles.item, index === 3 && styles.oversize]} />
)}
/>
styles:
oversize: {
backgroundColor: 'orange',
alignSelf: 'stretch',
width: 'auto',
marginHorizontal: -16,
},
Here is working example
How can I change text color of TextInput in React Native Paper without wrapping in PaperProvider?
Currently this works:
const theme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
text: "orange",
}
};
<PaperProvider theme={theme}>
<TargetComponent />
</PaperProvider>
However I want to control text color through passed props from a parent component.
Strangely, passing backgroundColor works but color does not.
Removing the PaperProvider wrapping doesn't help either.
This is the relevant code in TargetComponent:
return (
<View style={styles.container}>
<TextInput
type="outlined"
style={this.props.style}
onChangeText={this.props.onChange}
label={this.props.label}
value={this.props.value || "Replace this text"}
placeholder={this.props.placeholder}
/>
</View>
)
this.props.style is:
{
color: "orange", // This does not work
backgroundColor: "transparent" // This works
},
Found a solution. But for those in the same predicament:
For some reason color is not recognized as a style prop even though others, like backgroundColor, are.
Simply pass theme as a prop to TextInput. In that theme object, assign the text color like so:
<TextInput
type="outlined"
style={{ ...styles.textInput, ...this.props.style }}
underlineColor={this.theme.colors.primary}
onChangeText={this.props.onChange}
label={this.props.label}
value={this.props.value || "Replace this text"}
placeholder={this.props.placeholder}
theme={{ colors: { text: this.props.style.color } }}
/>
Updated for functional components and React Native Paper 5.x
(also if you want label color control):
const MyFuncComponent = ({style, colors, onChange, label, value}) => {
const Label = <Text color={style.labelColor}>{label}</Text>;
<TextInput
type="outlined"
style={{ ...styles.textInput, ...style }}
underlineColor={theme.colors.primary}
onChangeText={onChange}
label={Label}
value={value || "Replace this text"}
placeholder={placeholder}
textColor={style.color}
/>
}
theme={{
colors: {
placeholder: 'white', text: 'white', primary: 'white',
underlineColor: 'transparent', background: '#003489'
}
}}
Just add this line theme={{colors: {text: 'Your Color' }}} to the <TextInput/> of React native paper.
<TextInput
placeholder= {'Some Text'}
theme={{
colors: {
text: 'white',
}
}}
<TextInput
type="outlined"
style={this.props.style}
onChangeText={this.props.onChange}
label={this.props.label}
value={this.props.value || "Replace this text"}
placeholder={this.props.placeholder}
theme={{ colors: { text: 'white' } }}
/>
just add color in --- theme={{ colors: { text: 'your_color' } }}