Where should I place a CSS reset file for an Expo/React Native project?

Issue

I have a React Native project scaffolded using Expo and want to perform a CSS reset. Where would I place such a file and would I need to connect it to anything?

My current project structure looks like this:

Solution

React Native provides a default styling for some components, but this is generally less intrusive than the default styling provided by web browsers for HTML elements. Therefore, the need for a CSS reset in the traditional sense is not as significant.

However, if you're looking to set up a consistent base style across your application, you can create a global style file that defines common styles you want to apply. Here's how you can do it:

first. Create a Global Style File:

• Create a new file for your global styles, e.g., globalStyles.js.
• Define common styles that you want to use across multiple components.

Example (globalStyles.js):

import { StyleSheet } from 'react-native';

export const globalStyles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  // ... more global styles
});

secondly. Import and Use Global Styles in Components:

• Import the global styles in your component files and use them alongside component-specific styles.

Example (using global styles in a component):

import React from 'react';
import { View, Text } from 'react-native';
import { globalStyles } from './path-to/globalStyles';

const MyComponent = () => {
  return (
    <View style={globalStyles.container}>
      <Text>Welcome to My App</Text>
      {/* ... more component UI */}
    </View>
  );
}

export default MyComponent;

Thirdly. No Direct Equivalent to CSS Reset:

• Remember, in React Native, there's no direct equivalent to a CSS reset file as in web development. The styling approach is different, focusing on individual component styles rather than global browser styles.

Fourthly. Expo Specifics:

• Since you're using Expo, the process remains the same. Expo projects follow the same structure for styling as any other React Native project.

Answered By - Adesoji Alu