I have a question related to React Native.
I have existing application that should be themed and theming should be part of the configurable settings. There should be 3 aspects of such theming: changing colors/theme, changing logo and add custom fonts
I see this is a way that there will be settings view where:
there will be possibility to upload image, image will be stored in filesystem in ios and android and then used as a brand logo
there will be multiple settings regarding some primary, secondary, buttons colors as hash values, or maybe some color picker component
The most complicated stuff is having custom fonts that can be configured by user in setting view of application. Anybody have experience with doing such a thing?
Any thought/suggestions in above points will be helpful. Like links to native libraries for both platform or any tips from more experiences React Native developers
The best ways I see to achieve what you want are :
Use https://github.com/itinance/react-native-fs to access file system so you can easily store and access the logo that the user want. If the image has some size restrictions you could as well store your image Base64 string in AsyncStorage but this is not recommended.
You can have a kind of theming system by using a global style file that your screens use, the values requested (for example "dark", "light" etc...) can be store in AsyncStorage.
Do you want the user to be able to use his own personal font ? I don't think this is possible. If you want to have multiple fonts and the user can choose which font will be used in a list for example you can follow this tutorial to install custom fonts : https://medium.com/#kswanie21/custom-fonts-in-react-native-tutorial-for-ios-android-76ceeaa0eb78. Then all you want to do is use your theming system to select the fontFamily that your text elements will be using !
Let me know if I'm not clear enough or you need advices, I recently did what you try to achieve :)
Related
ReactJS allows us to create user interfaces. Word Press allows us to build websites, whose buttons, list, color, styles can be customized, with a minimal(to no) knowledge in coding.
I have a web site up and running with ReactJS, where the backend is done in NodeJS and ExpressJS.
But the UI is just a basic one.
I want to build a new site where WordPress handles the UI, like the color, style, size etc of components like Button, Tables, List, headings etc and a person with minimal-to no knowldge in coding should be able to drag and drop or customize the website UI, and the ReactJS should handle all the front-end logic and the backend would be handled by NodeJS and ExpressJS.
Is it possible to do so?? Which frameword or word-press plugin should I use. How can I achieve this.
Good day, Hari.
I can try to help you.
1)Wordpress has now Gutenberg block editor withs use React to create UI logic.
So its very easy to create buttons with colors and style the text in 3 clicks.
At the backend we still have wordpress PHP scripts.
2)Another solution is that Wordpress allow to include your React code to your theme with webpack file
please follow this link to see Demo theme
https://github.com/zgordon/twentytwenty-react/
3)Next solution is Frontify its a framework to connect Wordpress + React
https://frontity.org/
The Let me know if it helps you.
Thanks
I am developing an React native app and I am using some custom fonts in the app. I successfully imported installed liked the fonts and it is working fine. But one font name neusa not working(Not showing). When font is called it loading only default font. i am sure all custom fonts i am using is .ttf. All other fonts i downloaded from google fonts but not this one. can any one please suggest a way to fix it
The link i followed
If you are 100% that you followed the guide to the letter then the problem might be that you are using the wrong fontFamily. Not all fonts have the font family equalto their names. This happens a lot with FontAwesome.
Upload your font here: http://torinak.com/font/lsfont.html
It should tell you the fontFamily that you need to use. Otherwise you could log the font names that RN is detecting but that involves a little more work
let me share my problem with you. To begin with I'm a junior-mid level web developer currently implementing a travel site. To deliver this I have a task in which I cannot find an efficient solution.
This travel site will be provided in different hotels. For each hotel, the main theme for the app will be different for example the background images, the colors of some buttons etc. My first suggestion would be to have the CSS files for each hotel and by reading the name of the hotel from the state to import the according css. But the hotels will be many and by using so many files my bundle file will be enormous which I don't need. Another solution would be sending all the colors and images from the server but this will have a use impact in my code and I will have to refactor it in so many places. The idea of the server is fine I think
But I want to use some theme template to makes these changes according to the server. Do you know something about that?
I think there is no need to send all the colors and images from the server. You can store all of it on a frontend part and get only a type from the server and apply different styles based on this type. Maybe this library can help you here.
Using Orchard 1.8.1 I have written a simple image gallery that displays thumbnails and a lightbox. It is just a template that is driven by an Orchard Projection, using a Shape Layout. Works just fine. However, for phone users there is no point displaying thumbnails and it's better to just display the lightbox (with touch support). So I have also implemented that in a separate template. But how can I get Orchard to switch templates depending on the UserAgent string?
I have tried implementing Theme switching (http://weblogs.asp.net/bleroy/dynamically-switching-the-theme-in-orchard), but it's a really ugly solution when I really want to just replace one view, and still enable implementers to switch themes. This is NOT an issue of styling; it's an issue of changing the content based on the device.
I tried implementing DisplayModeProvider as described here: http://www.campusmvp.net/blog/displaymodes-in-mvc-4. But although the filter was called, it had no effect on view names.
Are Projections problematic here because the shape name is set? Is there a better way to go about this?
Create an alternate when you see a mobile browser, preferably from a shape table provider.
I'm creating a new Drupal theme for news web sites, which needs some fields to be added to the Article content type to work. For example, the theme will change the header image into something science-related when the user is viewing an article tagged with the term "Science" of a taxonomy called "Section".
I have set up the "Section" vocabulary and added it as a field to my Article content type manually, but the theme I'm making should be "shippable" to end customers, meaning that someone should be able to download it and install it without manually creating taxonomies and fields.
The theme must in some way notify the user that it depends on the Taxonomies module, and, when installed, the theme must create the relevant taxonomies and add fields for it to the "Article" content type.
What is the best way to accomplish this in Drupal 7? The only way I can think of is to create a specific "installer module" for my theme, that officially depends on Taxonomies and are able to add the right fields to Article etc, but there must be a more robust and "standard" way to accomplish this?
Making a theme depend on modules isn't very "standard". Themes only deal with the display, while modules deal with function. If you're making this theme only for this client, I wouldn't bother trying to integrate the two. Now if you're wanting to keep this for down the road, then it's like an installation profile, or themes you would see on ThemeForest that come bundled with a database.
I'd recommend moving any non-theme parts (like content type, fields, etc) into a feature using the Features module. It will help you keep your functionality separate from the theme. If you want to add custom CSS into the feature, just use the drupal_add_css() hook the in .module file that gets generated.