I am new to react-native and i am trying to add multi selection component to my app
my code is as follows:
<SectionedMultiSelect
items={this.state.days}
uniqueKey="id"
hideSearch={true}
subKey="day"
selectText="Select Days"
selectToggle={{ color: '#f79334' }}
showDropDowns={true}
readOnlyHeadings={true}
onSelectedItemsChange={this.onSelectedItemsChangeHomeRepair}
selectedItems={this.state.selectedDaysHomeRepair}
showChips={false}
theme = {
{
Colors:{
selectToggleTextColor:'#053075',
text:'#053075'
}
}
}
/>
does anyone know how to apply color to "Select Days" text. thanks
You could use the renderSelectText prop and pass your own text component with your custom styles.
<SectionedMultiSelect
items={this.state.days}
uniqueKey="id"
hideSearch={true}
subKey="day"
renderSelectText={() => <Text style={{ color: 'red', fontSize: 24 }}>Select Days</Text>}
selectToggle={{ color: '#f79334' }}
showDropDowns={true}
readOnlyHeadings={true}
onSelectedItemsChange={this.onSelectedItemsChangeHomeRepair}
selectedItems={this.state.selectedDaysHomeRepair}
showChips={false}
theme = {
{
Colors: {
selectToggleTextColor:'#053075',
text:'#053075'
}
}
}
/>
Have a look at how this can be used in the example here.
Related
Is it possible to order inputs horizontally within ArrayImput and SimpleFormIterator? I know that the default is vertical. Thanks
See image of vertical inputs inside ArrayInputs here. Can the inputs be arranged horizontally? Thanks
Yes you can, the ArrayInput is made using material-ui which comes with its style way. For instance, you can play with elements root, form etc...
const useIteratorStyle = makeStyles(() => ({
root: {
display: 'flex',
flexDirection: 'row',
},
form: {
width: '100%',
},
line: {
border: 0,
},
}));
const iteratorClasses = useIteratorStyle();
<ArrayInput {...props}>
<SimpleFormIterator classes={iteratorWithIndexClasses}>
...
</SimpleFormIterator>
</ArrayInput>
Gives me something like
You can override each property of the useStyles object defined in the SimpleFormIterator: https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/form/SimpleFormIterator.tsx
Inline prop has been introduced in version 4.3. It should work like that
<ArrayInput {...props}>
<SimpleFormIterator inline>
...
</SimpleFormIterator>
</ArrayInput>
I'm using "react-native-material-textfield" for text inputs. I have a View to edit user details it fetch values from api when mounting and set it to state. But after upgrading "react-native-material-textfield" to "0.16.1" that original first name value is not shown in the text input after mounting. What I'm doing wrong here ?
constructor(props) {
super(props);
this.state = {
firstName: '',
};
}
componentDidMount(props) {
APIcall().then(data)=>{
this.setState({
firstName: data.firstName
});
}
}
<TextField
label="First Name"
value={this.state.firstName}
onChangeText={firstName => this.setState({firstName})}
/>
I ran into this after upgrading. In version 0.13.0 of the library, it switched to being a fully uncontrolled component according to the release notes.
Changed
defaultValue prop becomes current value on focus
value prop provides only initial value
Based on the current usage docs, there is now a method exposed for setting & getting the value using a ref to the component:
let { current: field } = this.fieldRef;
console.log(field.value());
(Personally, while I can maybe understand this improving performance because typing can often be fast for state updates, I'm not a fan of uncontrolled components since I want my state to drive the UI. I feel like this makes other live updates for validation very fiddly.)
In react-native-material-textfield, 'value' prop acts as default. To update the value you need to use ref. Get the ref using React.createRef(), then use setValue function
import React, { Component } from 'react';
import { TextField } from 'react-native-material-textfield';
import { View, Button } from 'react-native';
export default class TestComponent extends Component {
textField = React.createRef<TextField>();
constructor(props) {
super(props);
this.state = {
value: 'check',
};
}
onChangeText = () => {
// Send request via API to save the value in DB
};
updateText = () => {
if (this.textField && this.textField.current) {
this.textField.current.setValue('test');
}
};
render() {
return (
<View>
<TextField
label="Test value"
value={this.state.value}
onChangeText={this.onChangeText}
ref={this.textField}
/>
<Button onPress={this.updateText} />
</View>
);
}
}
Touch area in TextView
https://github.com/n4kz/react-native-material-textfield/issues/248
react-native-material-textfield
labelTextStyle={{ position: 'absolute', left: '100%' }}
label: {
fontFamily: fonts.Muli_SemiBold,
fontSize: 14,
letterSpacing: 0.1,
color: colors.gray90,
position: 'absolute', left: '100%'
},
<TextField
style={style.textInputRight}
labelTextStyle={style.label}
labelFontSize={16}}
onChangeText={value => onTextChange(value)}
/>
I am currently trying to re-style a Fabric UI Button in React by changing its shape, background color and hovering color. I managed to change the first two, but i'm still having troubles in accessing the hover color, since the selectors property does not seem to work.
My code is the following:
import React, { Component, Props } from 'react';
import { PrimaryButton as FluentPrimaryButton, IButtonStyles, IStyle} from 'office-ui-fabric-react';
interface MyPrimaryButtonProps {
label?: string
}
const MyPrimaryButton = ({label}: MyPrimaryButtonProps) => {
const styles: IButtonStyles = {
root: [
{
fontSize: '16px',
background: '#525CA3 ',
border: '1px solid #525CA3',
borderRadius: '20px',
padding: '0px 30px',
height: '40px',
selectors: { // <---
':hover': { // <--- this part doesn't work.
backgroundColor: 'red' // <---
},
}
}
]
};
return (
<div>
<FluentPrimaryButton styles={styles} text={label} />
</div>
);
};
export default MyPrimaryButton;
I get a custom button, but still the hover color remains default blue, instead of switching to red.
You can change the styling of the button when hovered like this:
const btnStyles = {
rootHovered: {
backgroundColor: "red"
}
};
// ...
<FluentPrimaryButton text = {label} styles = {btnStyles} />;
I have used react-native material dropdown to fetch data from my API as follows:
<Dropdown
label='colors'
data={this.state.data.colors}
containerStyle={{width: 50}}
/>
{console.log("sbHASB",this.state.data.colors)}
However when I implement thi, I do get the colors on my log but they do not seem to appear on the list, it seems to be blank, can anyone please tell me why is ot so?
Any help would be great, thank you.
my logs after implementing are as follows:
sbHASB ["Blue", "White", "Blue", "White", "Blue", "White", "Blue", "White"]
Do tell me if you require anything else.
Assuming you are using react-native-material-dropdown, the documentation on their github suggests that the data prop should be a list of objects with a value key. See here the example given.
import React, { Component } from 'react';
import { Dropdown } from 'react-native-material-dropdown';
class Example extends Component {
render() {
let data = [{
value: 'Banana',
}, {
value: 'Mango',
}, {
value: 'Pear',
}];
return (
<Dropdown
label='Favorite Fruit'
data={data}
/>
);
}
}
For your list to work you should transform it to match this format, for example
const data = this.state.data.colors.map((color) => ({value: color}))
Given your example above that could look like
<Dropdown
label='colors'
data={this.state.data.colors.map((color) => ({value: color}))}
containerStyle={{width: 50}}
/>
However I would advise transforming the data before this step, for example when you receive the response from the api.
see this example on snack.io, the dropdown will work best if you preview it on a device since the animation doesn't display properly on the web preview.
https://snack.expo.io/#dannyhw/dropdown
UPDATE:
Here is the updated example that includes an example of how it can be used dynamically
export default class App extends React.Component {
state = {
data: {colors: []}
}
getSomeData() {
// imagine this is your api call here and it returns a promise that resolves to be a list of colours
return Promise.resolve(["green", "White", "Blue", "White", "Blue", "White", "Blue", "White"])
}
componentDidMount(){
this.getSomeData().then((result)=> {
this.setState(state => state.data.colors = result)
})
}
render() {
return (
<View style={styles.container}>
<Dropdown
label='colors'
data={this.state.data.colors.map((color) => ({value: color}))}
containerStyle={{width: 150}}
/>
</View>
);
}
}
I am trying desperately to change the color used to underline the selected tab in the NativeBase element Tab https://docs.nativebase.io/Components.html#tabs-def-headref . So fare I have been able to change the text color of the selected element to red but there seems to be no way of doing it for the underlings blue bar.
here is The Vue native template which can use every react native element.
<template>
<nb-container :style="{flex:1, backgroundColor: '#fff'}">
<header v-bind:title="title" ></header>
<nb-tabs>
<nb-tab :heading="heading1" :textStyle="textStyle" :activeTextStyle="activeTextStyle" :tabStyle="tabStyle" :activeTabStyle="activeTabStyle">
<actualitesVue v-bind:navigation= "navigation" > </actualitesVue>
</nb-tab>
<nb-tab heading="Dossiers" :textStyle="textStyle" :activeTextStyle="activeTextStyle" :tabStyle="tabStyle" :activeTabStyle="activeTabStyle">
<dossiersVue v-bind:navigation= "navigation" > </dossiersVue>
</nb-tab>
</nb-tabs>
</nb-container>
here is the prop
data: function () {
return {
heading1: "Actualités",
title : "INFOS",
tabStyle : {backgroundColor: "white"},
activeTabStyle : {backgroundColor: "white"},
textStyle : {color: "rgba(189,40,26,0.6)"},
activeTextStyle : {color : "rgba(189,40,26,1)", fontSize: 20 },
}
},
And the result is close to this. My point is about the blue line:
Simply you can change :
<Tabs tabBarUnderlineStyle={{ backgroundColor: "red" }}>
....
</Tabs>