Style Components in a React Native App with StyleSheet
One way to style React Native components is with a StyleSheet, which was designed to be similar to css. We’ll go over the differences between React Native styles and web styles, and we’ll create a new StyleSheet, and use it to change the style of components in our app.
Instructor: [00:00] Import style sheet from React native. Then we can make a new style sheet and extract these inline styles in order to clean up the components in our render method.
[00:10] Make a new style sheet by defining a const called styles and calling the create method on style sheet. The create method takes an object. This object should have keys like header, which have the name styles that you're creating, and all the values are objects.
[00:29] Inside of those objects, we can define our styles. The header style will contain all of the styles we define for the header. We can use that header style as the style for the header text by specifying styles.header as the style prop for a text component.
[00:46] When we reload, we can see nothing has changed, which is good, because it means we applied the style correctly. Notice that unlike CSS on the web, styles in React native style sheets are inside of JavaScript objects, which means that attributes like colors need to be in quotes.
[01:03] If we remove the quotes and reload, we can see an error. If we bring up the package or window, we can see a syntax error, since the hex color is invalid JavaScript.
[01:16] Writing React native style sheets, we'll feel very much like writing CSS for React with the other big difference being that all the style keys are camel keys. Let's continue cleaning up the styles by extracting styles for the row, the edges, the name and address, and the address text itself, and reloading.
[01:50] Again, nothing is changed. We know that we transfer the styles correctly to the style sheet. The style prop can also be an array of style objects. You can also make style sheet styles and inline styles.
[02:02] For a row, we could supply an array of styles to the style prop. The first element in the array would be the row style from style sheet. Then, we could overwrite the background color of the row based on its index, if we wanted to do alternating straight pattern to our list. Without background, we should properly add a bit of padding to separate the content from the edges of the row.
[02:27] Finally, styles can be defined in another file and even shared among components. To extract this header style for example, we could cut out that style and make a new file which we'll call headerstyle.js. In header style, we can just import style sheet from React native, and export default a new style sheet, and paste in our header style.
[02:52] Back in app JS, we can import that new style sheet and use it to style our header. When we reload, the header looks the same, but it's now pulling from the new header style, instead of being defined directly in app.js.
Importing the HeaderStyles and using it directly will throw a warning about unknown 'header' key in Styles as it appears the file is trying to read it as some sort of external module. To over come this, maintain a header property in your local StyleSheet and simply use the imported Object as the value, then this warning ignores.
StyleSheet.create({ header: HeaderStyle.header... })