Introducing
Your new presentation assistant.
Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.
Trending searches
<Text style={ali-c fnt-b}/> Bootstrap your own style sheet for react native.
75
What is it about?
re-inventing the styling for react native so that,
<Text style={ali-c fnt-b}>
Bootstrap your own
style sheet for react native.
<Text/>
instead of this
we can do this
- Kalpit Champanery
Why?
Writing styles/style sheets for a component in react native is a tedious task .
The Solution
What if we can write inline styling as we do in HTML
- Long syntax
- Not easy to maintain
There are 3 ways you can style a component
- Inline
- With StyleSheet, within the same file
- StyleSheet as an imported module
Because, yes we can do it, using following snippet only.
Using that function I've created this screen in ~130 lines including styles.
The problem here.
If we use StyleSheet within the component file it self the js becomes too big
If we store StyleSheet in separate file and create these separate files for each components then its.
- overhead to create a separete file
- increases file switching
This is from F8 Conf. RN app, they have used StyleSheet within same file
And this is the project structure if we use separate style.js for each component having its own StyleSheet
Sample GlobalStyles object
So in order to achieve this, we need one more object along with "prepareStyle" function. that is our own stylesheet, we will call it GlobalStyles, an store it in style.js
It is nothing but an object of key value pairs.
- Key here is what you want to pass to prepareStyle function
- Value here is what its actual style representation.
What approach people suggest for styling
Let's see example of GlobalStyles
Let's see few examples of
- Styling with StyleSheet, within the same file
- Styling with StyleSheet as an imported module
So now, to style any component just use prepareStyle function in style and use keys defined in your globalStyles to apply that style
And the code looks like this
Thank you
Any Questions ??