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
:
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
:
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
:
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)