I'm the beginner of react-native.
I'm going to provide change global font size function in my app.
User could change the font size in setting page, them the whole app font size will be adjusted.
After doing some research, it seems can't do it. So my idea now is create multiple global style sheet and apply it base on the user setting saved in storage.
But I found that it seems not work, because after create global style sheet, it need to import at the beginning of the app page.
How can I apply change the app global style or font size in react-native?
You might want take a look at useContext hook, it will give you a good way to handle app global style, suck as light or dark theme, your case, font is also not a problem.
Another way is using react-redux, create a global state for your font, and all your component will listen to the font value stored in the store.
Let's keep it abstract. How I would do it: create and assign a theme for your app where you define classes with different font-sizes etc. Save the preferences as classes in the async storage. After loading the up retrieve saved preferences from async storage and set those to your components as classes. Job done.
Related
I'm currently using Vue i18n in an application with a bunch of custom messages for localisation. https://vue-i18n.intlify.dev/
Is there any way I can add a wrapper or something to add some custom CSS while in development to show all localised text in red? We're sweeping through an existing application adding localisation.
At the moment it's difficult to identify which parts of the application have been localised and which haven't. If I was able to add a class or something to all areas that use the t() function easily, and colour them all in red and bold or something, that would help identify areas that we've missed in localisation.
If I create style sheet for all my components like this (so 1 component = 1 stylesheet file) would this approach to writing it make some performance issue?
My goal is to have access to theme properties but if this approach can make performance issue in the future I need to consider another approach.
import { StyleSheet } from "react-native";
import { useTheme } from '#react-navigation/native'
const dashboardStyles = (props) => StyleSheet.create({
progress: {
backgroundColor: props.colors.background,
},
});
function useStyles() {
const { colors } = useTheme();
const styles = React.useMemo(() => dashboardStyles({ colors }));
return styles;
}
export default useGlobalStyles;
Performance issues may come in several shapes and flavors depends on your current situation. In our case I think performance issues could be in the following categories:
Size - a large compressed application file may result in higher loads in terms of bandwidth for both client (waiting longer for app to start) and server (more resources required which usually means a higher cost)
UX - we want to deliver the best user experience possible meaning actions perform by user will be processes as fast as possible
Let's start with the easy on - UX. Since the react styling commands are injected to the browser's DOM as styling properties the performance gap between this process comparing to simply use fixed css files should be insignificant. So at least here we are certain that the user experience will not be affected.
When we are talking about size (which has an immediate effect on bandwidth) - we aim to make our app bundle as lightweight as possible. Our endgame is a working application that will also be as lightweight as possible.
From my experience with react you can reduce the size of styling follow these steps:
For each component create 1 css file containing the fixed styling (from some odd reason many developers use react to apply static styles) and set only the dynamic styles in your react file (very similar to the code you've already posted in your question)
When several components use the same basic style (or when you feel you are copy-and-paste styles across components) - create higher-level stylesheet files that will be re-used. This will help you to write less and use more and therefore - reduce the total size of your app bundle file
These should keep you app as lightweight as possible meaning less bandwidth and less memory consumed by your end-clients browsers (less memory allocations and more references to shared styles).
Technical note: please use general styling commands in your css files and more specific commands in your code (e.g. background or border when using fixed style and backgroundColor or borderWidth when using synamic style in your code). This will help you to better ensure that your dynamic style will always overwrite the fixed default (if there is any) in your fixed styling. More information and useful operators on this topic can be found here
I would structure my files as such:
theme.js
contains only styles, definitions of color palette, font types, and
sizes, widths and heights, things that'll be used globally, I use react-native-paper theme on this page.
commonPageStyles.js
contains only styles that are repeated in multiples pages, such as
page header, page description, anything..
ComponentX.js
the component that is reused with their style on the same page, e.g
a submit button
MyUniquePage.js
the style that is unique to this page
Very important note: a lot of the styles I declare end up being unused, and I lose track of them, and the style files'd only get bigger and uglier. so what I ended up doing. Is if the styles file doesn't need to live on an independant .js page, I'd include it in the component page and then use this VS code plugin "remove unused styles by xixi" to clean the unused styles page.
Don't Repeat Yourself(DRY) is best for boost your performance.. Yes, your approach of creating a globalStyles files and import that file and using it in your project is a good concept..
I would only suggest that while using your globalStyles don't
import allGlobalStyles from '../GlobalStyles';
Instead use
import {progress, errorStyle, pannelStyle} from '.../GlobalStyles';
which will only import a section of code to your component rather than importing entire file...
This is also useful while importing from npm packages too...
Like
import {isEmpty, isObject} from 'loadsh';
1, I'm wondering why React native doesn't push an option that allow developers customize default font if it's a popular resonable need?
I've searched a number of posts and see some proposal solutions like: declares fontFamily every time we use Texts, declares common style and reuse, creates custom Text component to replace Text component from 'react-native', use theme provider and Text component from 'react-native-elements'... It says that a number of people needs this, but Text from 'react-native' hasn't supported this yet?
2, I search out a solution that overwrites render function of Text component (ex: https://github.com/Ajackster/react-native-global-props/blob/master/src/CustomFunctions/setCustomText.js) and consider where it's a good choice for this? is there any performance concern for it?
I've started a Microsoft fabric-react, using the Typescript-React-Started provided by Microsoft here.
Although the excellent Fabric-react documentation available here, i wasn't able to find any documentation on how to style the fabric-react components.
For example, the Microsoft documentation for the Commandbar component is available here.
The default theme renders the Commandbar background with a gray color, with blue command buttons.
From what i could understand, Microsoft provides a Themes/Styling system.
Unfortunately, i wasn't able to find any start-to-end example, on how to change the default theme, or create a custom theme.
So, my questions are:
How can i change the default theme, and apply a specific theme on a fabric-react component?
How can i create a custom theme?
Thanks for using Office UI Fabric React! Have you had a chance to read these wiki pages regarding styling and applying a theme to components?
https://github.com/OfficeDev/office-ui-fabric-react/wiki/Component-Styling
https://github.com/OfficeDev/office-ui-fabric-react/wiki/Theming
https://developer.microsoft.com/en-us/fabric#/components/themes
You can also generate your theme via https://developer.microsoft.com/en-us/fabric#/styles/themegenerator then apply it using the method described in the page(s) above.
This is a copy of Microsoft response on Github, so the merit is not mine :)
Current
Use loadTheme to provide component wide colors and fonts.
Use styles prop for components for one-off tweaks.
If you'd like to provide a standard styles override for a specific component type, you can use Customizer to provide scopedSettings to pipe in standard overrides. (Not this is experimental and will likely change.)
Legacy className / global css support still works, which is to use className to provide your own class overrides, and to reference global class names as needed. Though this is an option, this is is not recommended, as it's very fragile and suffers from numerous issues (selector specificity, no build time validation, easy to break, etc.) We're considering removing the global class names completely in a future major release.
In progress
Our goal is to move all customization into the theme; this lets you rev your design over time. We are tracking a bunch of work here: https://github.com/OfficeDev/office-ui-fabric-react/projects/26
The problems we've recognized
Customizer for providing contextual overrides is too generalized, and doesn't allow us to have theme-specific logic like caching themes.
ITheme should be expanded to allow you to pipe in component-specific overrides, in addition to other site-wide settings like sizing, shadowing, and animations.
Passing in styles is not a good contract; you need to know which component parts to target for the styling (sometimes multiple parts) and sometimes which selectors to override (do i use a pseudo element here? is my selector not specific enough?)
No support for color schemes (think the "dark header", where the Toggle should look different than in the "light content area".
Solutions to shortcomings
Expose a dedicated ThemeProvider component. We will still have loadTheme for providing the default theme, while ThemeProvider can switch out scheme, or even theme in a box.
Add support for color schemes.
Introduce style variables, which abstract the common knobs from full styles definitions. This lets you not worry about parts or selectors, and simply focus abstractly on what the component should look like. We have this experimentally in our Button and Toggle refactors in experiments.
I am creating an app with some style differences in portrait-landscape rendering.
For example the navigation bar height can be different and there are several sizes that I want to keep under strict control to make sure certain control/text fit to screen without scrolling.
I am fine with calculating stylesheets dynamically or caching them with either own utilities or utilities like react-native-extended-stylesheet yet.. where to store the calculated sheets for portrait landscape?
Possible options
1. A module level variable in my style.js. Possibly calculated on demand and cached later. I'd need to pass screen size to it though
2. Make styles a part of a state and update it on orientation changes action
3. Anything else
What makes most sense? What do you use in your applications?
I think a stylesheet library should take care about caching styles for landscape/portrait layouts and developer should just write styles and component logic.
I'm working on it currently here: https://github.com/vitalets/react-native-extended-stylesheet/issues/9
Until it is ready I think the best option is to cache on module level.
const styleLandscape = ...
const stylePorttrait = ...
Putting styles into component state will mix it with logic data that seems not good.