Learned From Articles

Question 1

In React Native, where should styles be kept?

Answer 1

In a styles folder in the root sources folder, same as the components folder - styles are important, so they should be easy to find.<div><br></br></div><div>This also reduces the use of ‘../’s in relative paths.<br></br><div><br></br></div><div>https://thoughtbot.com/blog/structure-for-styling-in-react-native<br></br></div></div>

Question 2

Styles should be broad and as general as possible. T/F?

Answer 2

No, we should get as atomic as possible, and then we can use object destructuring in a style declaration, like this:<div><br></br></div><div>// buttons.js</div><div>export const small = {</div><div> paddingHorizontal: 10,</div><div> paddingVertical: 12,</div><div> width: 75 };</div><div><br></br></div><div>export const rounded = {</div><div> borderRadius: 50</div><div>};</div><div><br></br></div><div>export const smallRounded = {</div><div> …base,</div><div> …small,</div><div> …rounded</div><div>};<br></br></div><div><br></br></div><div><br></br></div><div>then:</div><div><br></br></div><div>// src/MyComponent/index.js</div><div>const styles = StyleSheet.create({</div><div> button: { …Buttons.smallRounded, },</div><div>})<br></br></div><div><br></br></div><div>https://thoughtbot.com/blog/structure-for-styling-in-react-native<br></br></div>

Question 3

How should style variables be organized?

Answer 3

“Style variables are easier to fnd and understand when they’re organized by function, so they should live in purposeful files.<br></br><br></br>Then you can place an index.js in that folder to bundle all the files together at once.<div><br></br></div><div><img></img><br></br></div><div>https://thoughtbot.com/blog/structure-for-styling-in-react-native<br></br></div><div><br></br></div>”

Question 4

What are the advantages of making purposeful styling files in React and then bundling them all into an index.js file?

Answer 4

”- We can import only what we need<div>- We can import from the same file every time</div><div>- We can give the variables descriptive and short names, contained in a descriptive object.</div><div>- We can easily extend and modify the common files</div><div>- We can write more concise and expressive code.</div><div><br></br></div><div><img></img><br></br></div><div>is better than</div><div><img></img><br></br></div><div><img></img><br></br></div>”

Question 5

Where should StyleSheets be kept?

Answer 5

“Inline with components - but with global styles defined and imported. Like this:<div><br></br></div><div><img></img><br></br></div>”

Question 6

What benefits are there to doing Stylesheets inline with components?

Answer 6

<div>1. Not overwritten</div>

<div>2. Maintained as the component changes.</div>

<div>3. More flexible during design.</div>

<div>4. Less thinking since there's only one place to look.</div>

<div><br></br></div>

• Styles for one component won’t be overwritten for another component in a future iteration<div>* Styles will be maintained as the component evolves.</div><div>* Components can be flexible during design iteration.</div><div>* There is a minimum amount of mental overhead while implementing designs for components since there is one place to look for styles rather than many.</div><div><br></br></div><div>This only works, though, if you’re creating variables for global styles in functionally-named files, other wise it isn’t D.R.Y.</div>

Question 7

What are the main things to remember about styling within React Native?

Answer 7

1. Styles are important: make them easy to find: Keep styles in the root application folder<div><br></br></div><div>2. Get atomic!: Build complicated Styles from simpler Styles</div><div><br></br></div><div>3. Styles are important: make them easy to use: Bundle like styles and expose via an index.js file</div><div><br></br></div><div>4. Keep Styles close: Keep styles inline with components</div>

Question 8

How can you submit forms from a button outside the form?

Answer 8

“By using the form attribute:<div><img></img><br></br></div>”