Change App Colors of top Icons

Hello UNA team, some questions - please can you help:

1. How do I change the colors of the Header Icons in the mobile APP?

2. On iOS I want to change the color of Time, signal and battery indicators to white. When I reply to Conversation or Message they change to white, but not at other time. (You can see this in UNA app and screen shot below)

3. In Messenger I would like to make the font size bigger, where can I change the size?


image_transcoder.php?o=bx_froala_image&h=3795&dpx=2&t=1594403447

 

  • 663
  • More
Replies (5)
    • Hi Alex T⚜️ please can you help with this question. I watched your video to compile Apps. Very helpful, thank you.

      • 1. All styles are in dynamicStyles at the end of App.js, however some items from header don't have styles, then you need to create new style, for example:

            myStyle: {
                color: red,
            },

        and apply it where needed, for example:

        <Button transparent>
            <Icon style={styles.myStyle} name='search' onPress={o.onSearchMenu} />
        </Button>

         2. It's some sort of bug I think in the theme library which we're using for UNA mobile app, but you can try to play with this code (particularly with setBarStyle), by removing functionality for dark//light mode support and make it static, so it should work then:

                const isDarkMode = useDarkMode();
                var sBarStyle = 'dark-content';
                if (Platform.OS === 'android' || isDarkMode)
                    sBarStyle = 'light-content';            
                if (Platform.OS === 'android')
                    StatusBar.setBackgroundColor('#076fd3');
                StatusBar.setBarStyle(sBarStyle, false);         

        3. Alexey could you please assist with this point ?

        • Hello!

          About item 3: It depends on where you would like to change the styles. By default there are default UNA fonts and if you change base UNA fonts, then they will changed in Messenger also. Otherwise you may use FireBug in browser to detect the class name and where it is located like on image below. 

          • Question would changing things in Studio apply to App or just the website? Would changing things in App have to manually be done without Studio?

            • Thank you Alex T⚜️ and Alexey 

              Login or Join to comment.