changed 4 years ago  
Published Linked with GitHub

Styling
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

At the beginning app contains all styles out of the box. And you haven't to style anything if you don't want. But, if you want… every piece of an app is fully customizable via CSS like syntax (jsx).

If you also know CSS (brother of HTML) it will be too easy for you. If you don't, we hope, it is still easy, just you should change some code at a beginner level. But don't worry, all styles have also written, and you should just copy/paste and rewrite some of them.

There is 3 block of styles in the app: general, layout and contentType.

general

contains things like font family, sizes for different level of headers, alignment, writing direction, colors… All things that you probably want to pass through the app, and make consistent, maintain continuity.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
code: styles/general.js

layout

related to things like main (home) page, drawer (table of content), screen header, navigation buttons etc…

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
code: styles/layout.js

contentType

at the beginning we have 4 default types:

  • file card
  • rich text
  • rich media
  • exercise

and you can create on top of them as much types as you need.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
for more info: Content types

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
code: styles/contentType.js

⚠ Don't change files linked above. Technically it works. But after update the app, all changes will be lost.

How to change?

To change any style, copy it from code linked above, and put it to /content/styles folder, to the file with the same name as the style source.

general

For example, you are working on arabic app, and you want to apply new font to any text in the app, and make it bigger and with right to left direction. Then you should look at styles/general.js to know whitch properties it has, and put to /content/styles/general.js:















export default {
    basicAlignItems: 'flex-end',
    basicWritingDirection: 'rtl',
    basicFontFamily: 'ScheherazadeNew-Regular',
    basicFontSize: 18,
    translation: {
        default: {
            fontFamily: 'Inter-Variable',
            writingDirection: 'ltl',
            textAlign: 'right',
            fontSize: 14
        }
    }
}

Now you have beautifull arabic font and relevant alignment and writing direction.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

contentType

If you want to change color of italic text in richText , you should go to styles/contentType.js and understand that this style is connected to richText: {em}. Then you put to content/styles/contentType:








export default {
    richText: {
        em: {
            color: 'orange'
        }
    }
}

Now you have orange cursive:

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

layout

You are working on app, where headers of chapters are numbers. You don't need their translation anywhere. Then you should change /content/styles/layout.js:

export default {
    drawer: {
        listItemText: {
            textAlign: 'center',
        },
        listItemTranslation: {
            display: 'none'
        }
    },

    screenHeader: {
        chapterTitleTr: {
            display: 'none'
        },
        subchapterTitleTr: {
            display: 'none'
        }
    }
}

And put to conent/images/ two images: titleDecorLeft.png, titleDecorRigth.png, then you get such a drawer:

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Fonts

To use custom fonts put files .otf or .ttf to /content/fonts folder. Then you can use them in styles by their file names.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
for more info: expo/supported-font-formats

Custom fonts are especially important when you work with non-latin fonts and want to display them predictable on any device. Otherwice device will seek for existing in system fonts, and if don't find them, user will see empty rectangles or ugly letters.

In example above with content/styles/general.js we used two custom fonts: ScheherazadeNew-Regular and Inter-Variable. That means that before doing that, we put into content/fonts two files:

  • ScheherazadeNew-Regular.ttf
  • Inter-Variable.ttf

Notice, that /content/styles folder is in a different repository than the main app. This is by design so that your styles don't disappear after an update.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
for more info: Update

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
More to read

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
What is ULA – Universal Learning App

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Install app template on your computer (for further development)

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Configure Home page

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Learn Navigation and Content Structure

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Get an idea of Content types, how to use them and create new ones

Study built-in content types:

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
richText

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
richMedia

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
fileCard

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
exercise

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →
Translate your content to any languages

Style any part of the app as you want

Build your app for Android, iOS, Web

Deploy – free, fast and easiest way to share your app with the world

Update – keep the app up to date

Roadmap – our plans (to-do list)

Select a repo