Search code examples
react-nativeshoutem

How can i modify theme default @shoutem/theme

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! enter image description 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: enter image description here

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! enter image description here

And here is index file: enter image description here

So how can i learn form that if only sort info inside index.js file :(

Solution

  • 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.