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>
Related
I want to change the fill colour on a single element in a lottie.json file conditionally. How can I access the fill of 'circle' and update the colour?
I currently have this
<LottieView
source={require('../assets/splash_logo_2.json')}
autoPlay
loop={false}
onAnimationFinish={() => {
progress.value = 1;
}}
colorFilters={[
{
keypath: 'circle',
color: progress.value === 1 ? '#85AA82' : '#B5FFAF',
},
]}
/>
Check this answer:
How do I use ColorFilter with React-Native-Lottie?
and also this tool to help you to identify it better:
https://colorize-react-native-lottie.netlify.app/
I'm trying to throw together a simple phone app mockup using React Native & React Native Elements as a set of UI components. I want to set the styling of various elements to a common theme, so I'm following the example in the documentation: https://reactnativeelements.com/docs/customization#using-themeprovider.
But the trouble with the example there (as it says in the docs), it sets the style of all buttons. What I'd like to do is to set the background colour of only the solid buttons for example, leaving the clear buttons, clear! Can anyone point me in the right direction of how to do this?
Current snippet (trimmed to save space):
const myTheme = {
Button: {
buttonStyle: {
borderRadius: 4,
backgroundColor: '#03E0EE',
},
titleStyle: {
color: '#180D43',
},
},
};
...
<ThemeProvider theme={myTheme}>
<View style={styles.footerContainer}>
<Button title="Primary Button"/>
<Button title="Secondary Button" type="clear" />
</View>
</ThemeProvider>
Create a wrapper component for SolidButton and or ClearButton. Make this wrapper components consuming the myTheme context with style props (e.g. ButtonSolid\ButtonClear). AFAIK there are no selector capabilities like in css.
I'm using Fluent UI's TeachingBubble component. I want it to have one button, which should be centered. How can that be done? I'm unable to move it from the bottom right corner.
Current code:
<TeachingBubble
headline="Welcome"
primaryButtonProps={{
children: "Next",
onClick: () => alert("Primary button pressed!"),
}}
>
This is some content.
</TeachingBubble>
This outputs:
What should be added to this code so that the primary button is centered (at the red cross I marked)?
Button is inside footer part of TeachingBubble, so the style of footer should be changed:
<TeachingBubble
headline="Welcome"
primaryButtonProps={{
children: "Next",
onClick: () => alert("Primary button pressed!"),
}}
styles={{
footer: {
display: "flex",
justifyContent: "center",
},
}}
>
Some text
</TeachingBubble>
That renders as:
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.
The react-native-paper docs suggest you can set the color of a disabled button using a theme, but this code does not work:
export const buttonTheme = {
colors: {
primary: COL_BASE_YELLOW,
disabled: COL_DARK_HIGHLIGHT,
},
}
<Button
loading={submittedPhoneNumber ? true : false}
mode="contained"
onPress={() => handleSubmitPhoneNumber(phoneNumber)}
theme={buttonTheme}
disabled={phoneNumber.length < 5 ? true : false}>
Continue
</Button>
The primary color works however.
How do I change the color of the button when it is disabled?
Don't use disabled props, it will always make your button grey, if you want to use your desired colour for disabled mode, do it like this :
<Button
loading={submittedPhoneNumber ? true : false}
mode="contained"
onPress={phoneNumber.length < 5 ? () => {} : () => handleSubmitPhoneNumber(phoneNumber)}
color={phoneNumber.length < 5 ? 'darkerColor' : 'fadedColor'}>
Continue
</Button>
From this Github issue:
The text if the contained button depends on the background color of
the button, which is automatically determined based on of the
background color is light it dark. Wherever theme is dark or not
doesn't affect it.
This is the desired behavior. We don't want to show white text on a
light background because you have a dark theme, otherwise the text
won't have enough contrast and will be illegible.
Changing the theme to dark changes the disabled button color, as I tested. Apart from this, I don't think its possible if you use react-native-paper. The author has decided to automatically set the color & background color of the button based on something, but his language is unclear.
However, you can give a labelStyle prop the button directly, and you could have a conditional in that style.
<Button labelStyle={{ color: phoneNumber.length < 5 ? 'red' : 'green' }}>
or,
[buttonDisabled, setButtonDisabled] = useState(false); // put this outside the render function.
<Button disabled={disabled} labelStyle={{ color: disabled ? 'red' : 'green' }}>
I'm may be late but here's my solution:
<Button
id="save-phonenumber"
color="darkColor">
onClick={doSomething}
disabled={phoneNumber.length < 5 ? true : false}>
<Button/>
In you Css file you can add
Button#save-phonenumber[disabled] {
background: "fadedColor"
}
Benefit of using this approach is that you don't additionally need to disable the clicking effect when the button is disabled.
If you're caring about light and dark themes at the moment, then you can achieve your goal like this -
I would suggest creating your own Button Component on the top of Paper Button.
// extending default Paper Button Component
<PaperButton style={[ props.disabled && { backgroundColor: 'cccccc' } ]}>
{children}
</PaperButton>
// Using component...
<MyButton disabled={disabled}>
Click Me!
</MyButton>