In my react-native app (using native-base as the component library). I have been trying to change the background color of the checkbox in the unchecked state but the default white background is not changing.
react-native: "0.68.5"
native-base: "3.0.3"
After spending some time and trying out multiple ways I was able to find the solution.
Add this piece of code to your theme file, change the color you want and you are good to go.
Checkbox: {
baseStyle: {
_checkbox: {
bg: "#faf3de",
},
},
},
Related
Today for a school project I need to create a shop in which when you click a button, the Video (used as background) in the Home page changes.
I found how to change color through style but here the Video is a component and the Video's link is it content so I'm not sure how to proceed...
I'm trying to use useEffect like this :
useEffect(() => {
const backGround = document.getElementById("bg");
setBg(backGround.Video = "source{require("./test2.mp4")}");
}, [bg])
`
If you guys could refer me, it would be awesome !
I want to change the colorScheme of a NativeBase Input component.
Other components, like button, slider or checkbox, have a prop "colorScheme" which, if set, changes all the associated colors of that component. Input does not have that prop.
These approaches would technically work:
Setting colors for border, background etc. manually
-> But it would be a lot or work and pretty ugly
Changing the primary color in the theme
-> But maybe I want to have two different color schemes for Input on the same page, so it would not make sense to change the theme.
So, what is the best way to easily change all the associated colors of an Input component, without setting all colors manually or changing the overall theme?
I've never used NativeBase ( but now I'll take a look, thanks for this discovery... )
I highly recommend you to have a read at the Customizing Components doc which provide a way to do what you're looking for...
You can create a "variant" which is a predefined theme for a specific component. You have to define it in your customized theme ( If you don't use a <NativeBaseProvider theme={theme} /> yet check this )
export default function () {
const theme = extendTheme({
components: {
Input: {
variants: {
otherColorInput: ({ colorScheme }) => {
return {
bg: /*otherColorToSet*/ ,
};
},
},
},
},
});
return (
<NativeBaseProvider theme={theme}>{/* components */}</NativeBaseProvider>
);
};
Then you can call you new Input like this :
<Input variant="otherColorInput">
I have a vue app which has a feature than can change the theme, for example, light/dark,
Initially, I've set in my localStorage.setItem['app_theme', 'light'],
I have my app theme changer function in the Header.vue component, and after clicking the theme changer toggle button, it also changes the localStorage['app_theme'] = 'dark'.
Now, in my other components, I have some computed values/variables/properties like this:
...
computed() {
app_card() {
return localStorage.getItem('app_theme') === 'dark' ? 'card-dark' : 'card-light'; //these are some classes with their respective theme css
},
app_text() {
return localStorage.getItem('app_theme') === 'dark' ? 'text-dark' : 'text-light'; //these are some classes with their respective theme css
}
}
...
I've thought about using polling to get the localStorage.getItem('app_theme') value every 2 secs, but I think this'll slow down my app.
Are there any other alternatives to listen for localstorage item change without polling?
This is exactly what the observer pattern is for.
You create an event "OnAppThemeChange". You can subscribe to that event with all your components.
Then whenever your App Theme changed you call your event, and all the components will refresh their App Theme.
This removes the need of Refreshing the theme every 2 seconds. It will only refresh when you actually change the theme.
Usefull links:
https://developer.mozilla.org/de/docs/Web/Guide/Events/Creating_and_triggering_events
https://refactoring.guru/design-patterns/observer
In Vuetify, what is the best way to manage differenly styled appbars for various pages?
And how to enable back button instead of hamburger icon programatically?
Example: There are 5 screens, 2 of them have separate controls in app bar than the rest.
For the question of coloring the app bar, if you're using the router, you can add a meta tag "color", then set v-app-bar's color property to something to the effect of
:color="$route.meta && $route.meta.color || 'blue-grey'", where blue-grey is the fallback color. Your route would look something like:
{
path: '/mycoolpath',
component: MyCoolComponent,
meta: {
//other route meta...
color: 'blue'
}
}
For the question of enabling Back, just replace the app-bar-nav-icon with the appropriate icon name (mdi-arrow-left, likely) and change it's #click to $router.go(-1) (further reading on routes)
Stuck with small problem. I have Animated.ScrollView and there i have onScroll Event like this
Animated.event(
[
{
nativeEvent: {
contentOffset: {
x: this.topViewAnimation,
},
},
},
],
{ useNativeDriver: true },
)
So onScroll that card which active ( on the screen ) highlights item in view.
Sometimes i need to scroll to specific value with scrollTo method but i always see one problem.
For example i have 10 items. ( 10 items in view and 10 items which i will highlight based on scrollOffset ).
When i will use my scrollTo method i will see how every item highlights untill it become this one what i need.
Is there a way to highlight only one item what i need?
I've just jumped into the same problem today, and after hours trying to solve this issue, the solution was quite straightforward.....
What I did is to NOT TO USE the Animated.ScrollView component, and instead, I created a new ScrollView animated component whith the animated interface:
const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView)
Then I used this new "AnimatedScrollView" component insted of the "Animated.ScrollView" and everything run just smoothly...
Good luck!