Already Wrap my page with
When switch the button, the color of nav bar changes, but not the page content.
I can change the content theme by importing the following files from ant design;
import 'antd/dist/antd.css'; //white mode
//import 'antd/dist/antd.dark.css'; //dark mode
so how to import different css file by click on the switch button?
Thanks.
Create two separate components for darkMode and whiteMode and use conditional rendering with states or context provider with onClick function.
import darkMode styles inside <DarkModeComponent/> and whiteMode styles in <WhiteModeComponent/>.
const [darkmode,setDarkmode]=useState(false)
and onClick function in like below:
function onClick(){ setState (s => !s) };
and in your components:
return ({darkmode ? <DarkModeComponent/> : <WhiteModeComponent/>})
Also, you can use context Provider for handling this state and pass it to child components.like this : context.provider for swithing theme
Related
I've started using RN recently and have been doing some research on the implementation of themes and/or a dark-light mode. Here's roughly how I understand the two main options so far:
Context: Easy setup and can be accessed via hook inside the component that needs it. I count things like the React Navigation themes since that works, in essence, the same way(?)
Styled Components: Essentially just replacing the components with custom ones that access the current theme and that can then be set up to change their props on toggle if needed.
What I don't like about context, is that (the way I understand it) it wouldn't let me access the theme when using a StyleSheet, since that's outside the component. With the styled components on the other hands I'm not sure if I can cover all options inside my custom components, wouldn't I still need some sort of hook in each component anyway?
I was also thinking about just saving the current theme into my Store (in my case Zustand), together with an action that lets me toggle to a dark-mode. But so far, I haven't really seen anyone else do that, is there a downside to doing it that way?
It's not hard to pass context to your stylesheet, it just requires a bit of extra boilerplate. Something like the below:
import ThemeContext from '<path>';
export default () => {
const theme = useContext(ThemeContext);
const stylesWithTheme = styles(theme);
return <Text style={stylesWithTheme.text>Hi</Text>;
}
const styles = theme => StyleSheet.create({
text: {
color: themeStyles.color[theme];
}
});
const themeStyles = {
color: {
dark: '#FFF',
light: '#000',
},
};
I don't think using styled components would be a big departure from the above scheme.
If you did store your theme in state, and define your styles within the body of the component, that could be a savings in boilerplate. It's up to you whether having your styles in the component body is acceptable.
Side note, if you're already using a state manager, I would recommend not mixing it with the Context API without knowing more. It's simpler to have one solution there.
I have created an ionic 4 app.
I am using native google maps and custom marker.
When I click on a marker, I want to open my side-menu with place details.
What I did,
- I have disabled the menu at first on app.component.ts
- When ionViewWillEnter() on Map Tab, I have disabled the side-menu
- When ionViewWillLeave() on Map Tab, I have disabled the side-menu
- Side-menu only will enable when to click on the place marker
- I have triggered the event when clicking on place marker
- This event carries the data of place
- I have used the variable 'business' to fill the side-menu
- I have subscribed the event on app.component.ts and assign the
place data to 'business' variable
Problem:-
My side menu doesn't update it's content when I click on the marker
It updates when I switched between tabs, I think when refreshing the tab
Are the data of 'business' variable updated?
If so, perhaps you could try run the assignment code inside ngzone.
// import zone in your app.component.ts
import { NgZone } from '#angular/core';
// add zone provider to the component constructor
constructor(private zone: NgZone) {
// ...
}
// cath click event, then
this.zone.run(() => {
// update data here
});
Is it possible to take control of React-Select 2's menu positioning? I'm using it inside React Virtualized table rows but then I'm rendering the dropdown to a portal outside of the row. I have set menuPosition to fixed but React-Select 2 has delayed automatic positioning which is far too slow, so I would like to take control of the positioning myself.
You can override the Components styles by adding a styles prop to your Select, targeting the component. React-Select uses emotionCSS for styling, rather than classes, so it can key off of state changes.
const styles = {
menuPortal: (base, state) => {
let overrideProps = {};
// do something here
return Object.assign(base, overrideProps);
}
};
<Select styles={styles} />
You can find additional info in the Styles section of the documentation.
I am working with Outlook Add-in with Office UI fabric js UI components. I am having issue using dropdown.
When click on a drop down it doesn't show the dropdown list style and it opens a complete new panel with options.
I followed this link to add drop down component.
The dropdown component has a prop called responsiveMode. This dictates how the container is rendered.
As you can see, for ResponsiveMode.medium and below, a Panel gets rendered, otherwise it will be a Callout. What you want is the Callout.
You just have to pass in the prop ResponsiveMode.large for it to render the way you want.
import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
import { ResponsiveMode } from 'office-ui-fabric-react/lib/utilities/decorators/withResponsiveMode';
render() {
return (
<Dropdown
label='My Label'
options={myOptions}
responsiveMode={ResponsiveMode.large}
/>
);
}
I'm not using the native navigation for my app. I have these SVGIcon that I want the user to tap and have the new page slide in from the right moving left. On that page when they tap the back, the page should slide back out to right. In other cases, I want the page to slide in from the left, or from the top, etc... Each time, the "back" button should just reverse that transition.
I found this package where I was able to get pages to slide in from the right. The issue I have is that the back button also slides the page off to the left. Here's a sample code I have doing this.
import React from 'react';
import { createTransition, SlideLeft, SlideRight } from 'react-native-transition';
const Transition = createTransition(SlideLeft);
export default class App extends React.Component {
//... some code to decide what page is CurrentScreen
render() {
return (
<Transition>
<CurrentScreen navigate={this.navigate} />
</Transition>
)
}
}
From this code, I'm not sure how I would implement SlideRight if the Transition node is already using SlideLeft. Maybe there's a better package, or a built in way to handle what I want?
Have a look at the following:
https://reactnavigation.org/docs/en/
https://github.com/fram-x/FluidTransitions
the react navigation lib is the simplest to implement, and there is a recommended community extension for fluid transitions, which would allow you to set an an appear and disappear animation:
<Transition appear='scale' disappear='bottom'>
<View style={styles.circle}/>
</Transition>
for native transitions have a look at the excellent library from the wix team: https://wix.github.io/react-native-navigation/#/third-party-libraries-support