Before we proceed with working on components and delving deeper into React Native, let's address styling. Currently, we have added three elements to our project, but the visual presentation may need to be more optimal.

Inline Styles

Inline styles in React Native are similar to how you write styles in regular React for the web. Styles are passed as objects directly within the component's props.

Theory

• Inline styles allow for a quick and straightforward way to apply styles directly to a component;
• Inline styles use JavaScript objects to define styles directly within the component's props;
• Each style property is written in camelCase, similar to how it's done in CSS, but without hyphens;
• Values can be either strings or numbers, depending on the property.

Example

StyleSheet

React Native encourages the use of the StyleSheet API for defining styles, especially for performance optimization.

Theory

• The StyleSheet.create method is used to create an optimized style object;
• Styles created with StyleSheet.create are processed during build time, resulting in better performance compared to inline styles;
• Style properties are defined in the same camelCase format as inline styles;
• The resulting object is then referenced in the component.

Example

Result after implementing any of the approaches.

In Practice