I create new project react native, then i installed #shoutem/ui , #shoutem/theme, #shoutem/animation to my project via nom install...!
But i have problem when try to find some way better to modify global theme shoutem.
I found theme.js inside folder node_module/shoutem/ui like picture below here!
So best way to modify all them of app is modify this theme.js file?
when i try to modify 1 content like View, Image follow tutorial at here:
https://github.com/shoutem/theme
my navigation bar got error like this picture:
So can u guys help me, suggest me best way to modify global theme default of shoutem?
Do modify theme.js or using something else?
And one more thing! When i try to builder app via https://builder.shoutem.com/ then pull-app using terminal!
I got project! But don't see anything code inside, only extension and so much info! Do not know what is true code when builder complete!
here is picture project when pull-app done!
And here is index file:
So how can i learn form that if only sort info inside index.js file :(
The file you should edit is in:
extensions/ExtensionName/app/theme/ThemeName.js
Where "ExtensionName" refers to the extension that has Screens which you are using in your app.
You should go through the Shoutem documentation on how to write a Theme.
It will show you:
how to create that file (ThemeName.js, your custom Theme)
how you can customize it
how you can use the Builder to manage details about it in Styles>Themes>Customize Theme
how you can add more details for the Builder to manage
When you initially create a Theme as the aforementioned documentation explains, it'll be a copy of the default Shoutem theme, so you'll have a fully functioning Theme right out the box, which you can edit to suit your wants and needs.
You can also check out the Shoutem documentation about the UI Toolkit to find out more info about Shoutem Components (including NavigationBar), Themes and Animations.
The reason I'm linking all this documentation is because the documentation covers all of the issues displayed here in a way that's much more detailed than I could provide in an answer here and the misconceptions and misunderstandings of the questioner can be resolved by self-education.
Edit as response to comment:
You have to use:
$ npm install --save #shoutem/theme
Inside your project directory.
You can follow read this documentation about Themes to better understand how to apply Theme styles to your own components.
If you want to edit specific components globally, you have to edit that component in:
node_modules/#shoutem/ui/components
Editing a file there will edit every iteration of the component throughout the app.
Related
I am making an app using Compose for Desktop. I am trying to include a simple file download Icon that I know is included in the lengthy set of Material Icons, however it is not available under Icons.Filled. Some of the icons included, in my opinion, are nowhere near as commonly used as download... go figure.
I know that Compose for Android has a dependency for an extended set of Material Icons. I tried adding that dependency to my Desktop app, but it threw errors at me.
For now I have added a Feather Icons set courtesy of DevSrSouza, but I would like to know if there is a way to access the Material Icons extension in Compose for Desktop? Thanks.
I guess you have already found the answer but I also had this problem for long time, so here is a right dependency for compose desktop: "org.jetbrains.compose.material:material-icons-extended-desktop:$compose_version"
I want to change my default icon's app to another one and generate my standalone app (with expobuild:android)
But when I add another image(capture) in my assets folder and replace it in app.js,it gives me an error:
{
"expo": {
"icon": "./assets/capture.png",
}}
I tried many time with and without default icon (I have error just with new image) so i'm sure that error came from the change of icons.
Do you have any idea ;
if you are using a CRNA solution, there is an easy way you can do it. Just go into the /assets folder and just paste there your new icon, then rename it to icon.png, just make sure you already removed the default one. It also works with the splash screen.
But if you created your project with create-react-native-app, you need to do it separatly in Android studio for Android and Xcode for iOS. See more with this link wich helped me too.
https://aboutreact.com/react-native-change-app-icon/
Hope it's gonna help ... Regards
I used this this repo and cloned it, then run one line command to resize the png to all the different formats.
bash resize.sh my-cool-new-app-logo.png
Then drag the folder over and merge/replace icons.
quick insight
I'm editing BigCommerce's cornerstone theme template with stencil and want to view and make changes to the admin interface. Much like what's happening in this video tutorial https://www.youtube.com/watch?v=mdhSLKpTOBY&list=PLwTYtMwfzbe7EZiIWPAmPtuwRHkY7BG-0&index=9
But I'm not sure how to access the theme editor locally. I saw that the --theme-editor commands were removed from the stencil cli. It says that we should look at this documentation instead https://developer.bigcommerce.com/stencil-docs/configure-store-design-ui/store-design-overview but that doesn't show how the theme editor could be accessed from a local environment. Is this possible?
Is the only option to upload the theme and edit it from there? Has the ability to use a theme editor locally been removed?
As far as natively supported features, the Stencil CLI deprecated support for live theme editing due to it no longer matching the experience found on the platform. You can find these details on a related GitHub issue reported here: https://github.com/bigcommerce/stencil-cli/issues/601
Until this feature is reintroduced, you'll need to bundle the theme and apply it to a store to review the theme editor.
I don't think you can access the Theme Editor from a local environment directly.
If you want to add configurable options, you would be editing schema.json and adding new sections there. In that way, you can add entirely new Text Inputs, Checkboxes, Dropdowns, that would allow store administrators to edit those entries.
The values that are being changed are located in config.json -- those are all the theme_settings that you can access inside of Handlebars, and they can also be injected into JavaScript via context.
So essentially you want to create new entries in config.json, and create new mappings in schema.json to allow those entries to be edited in the Theme Previewer. You should be able to put together how to make new sections by trying to parse the existing fields in the schema file, and I think BC has additional docs here:
General Overview:
https://developer.bigcommerce.com/stencil-docs/configure-store-design-ui/defining-ui-options
Adding a new "Text Input" option in schema.json - API reference - you can navigate around that opened section in the sidebar to see all available schema types:
https://developer.bigcommerce.com/stencil-docs/page-builder/schema-settings/input
I've created an app using Shoutem Builder, but the builder isn't able to do everything I need it to. I've created a local copy with shoutem clone so I can edit the screens myself; however, I'm unable to locate exactly where I would find the file(s) to add the code to the dozen or so blank 'About' screens I have in my app.
I've thoroughly searched the documentation, and while it's got information on editing a screen created using the CLI, I'm unable to find any thing related to how to locate and edit individual screens created in the builder. Would these screens need to be deleted using the builder and created one-by-one using the CLI in order to be edited locally?
AppName/extensions/shoutem.about/app/screens/AboutScreen.js, as seen here.
Each screen you add re-uses the same code from the About extension. It'd be rather wasteful to create a dozen of the same files.
If you need each of the different screens to have a different layout, you can consider making custom layouts for the About extension and then use each of those for each of the separate screens on the Builder. You can find out how to make custom layouts here.
How can I include a popup context menu in my app, just like the ones DroneDeploy use?
What's the CSS, JS lib that you use???
I know how to do this using vanilla JavaScript, but I want it to look like yours, to keep the theme in tact!
I've looked at the source and can see you are using Angular CDK's OverlayModule to provide popups.
I'm not using Angular, so I'll have to just style the popup so it looks like you themes myself.
The doc is the best way to follow up in this case. There you can see what's possible or not. Did you see this point? Here you can follow a checklist to apply in your App and build App in Drone Deploy style. You'll need to follow another way to interact with users.