React Native InStyled: Simplifying App Styling

React Native is a popular technology for creating mobile apps, bringing the power of React to native platforms. However, when it comes to styling, developers often face limitations. The current options—inline CSS-in-JS or declaring styles separately—can lead to code redundancy and complexity, especially when implementing dynamic styles.

The Styling Challenge in React Native

While React Native offers a robust component architecture, its styling options have remained somewhat constrained. Developers typically choose between inline CSS-in-JS or declaring styles separately and referencing them in components. Both approaches have drawbacks, often resulting in redundant code, mixing of structure and style, and increased complexity for dynamic styling. Solutions like styled-components and emotion exist, but they can introduce performance overhead and require learning a new syntax. This is where React Native InStyled comes in.

The Birth of React Native InStyled

React Native InStyled evolved from a set of internal methods I developed for creating and styling components. As I worked on more projects, I recognized the need for a dedicated library that could offer streamlined styling without the syntactic overhead and complexities found in libraries like Emotion or styled-components.

Key Features of React Native InStyled

• Easy-to-use API for creating styled components: Use the same CSS-in-JS syntax you're already familiar with.
• Theming system with a context-based theme provider: Simplifies style reuse and theme changes.
• Dynamic styling based on props and theme: Create flexible, responsive designs by easily incorporating props and theme values into your styles.
• Full TypeScript support: For better type safety and developer experience.
• Support for all basic React Native components: Supports View, Text, TouchableOpacity, and other basic components.

Let's take a look at how these features come together in practice:

import React from "react";
import instyled, { ThemeProvider } from "react-native-instyled";

// Define your theme
const theme = {
  colors: {
    primary: "#007AFF",
    background: "#F2F2F7",
    text: "#000000",
  },
  spacing: {
    small: 8,
    medium: 16,
    large: 24,
  },
};

// Create styled components
const Container = instyled.View(({ theme }) => ({
  flex: 1,
  backgroundColor: theme.colors.background,
  padding: theme.spacing.medium,
}));

const Title = instyled.Text(({ theme }) => ({
  fontSize: 20,
  fontWeight: "bold",
  color: theme.colors.text,
  marginBottom: theme.spacing.small,
}));

const Button = instyled.TouchableOpacity(({ theme }) => ({
  backgroundColor: theme.colors.primary,
  padding: theme.spacing.small,
  borderRadius: 5,
}));

const ButtonText = instyled.Text({
  color: "white",
  textAlign: "center",
});

const App = () => (
  <ThemeProvider value={theme}>
    <Container>
      <Title>Welcome to React Native instyled!</Title>
      <Button>
        <ButtonText>Press me</ButtonText>
      </Button>
    </Container>
  </ThemeProvider>
);

export default App;

Ongoing Development

While React Native InStyled offers great features, there's room for improvement. I'm focusing on:

• Performance optimizations
• Expanding features based on feedback
• Enhancing documentation and examples

The goal is to keep React Native InStyled lightweight and efficient, even for complex applications.

Try React Native InStyled

You can try React Native InStyled right now by following the steps in our GitHub repository. The repository contains all the information you need to get started, including installation instructions, usage examples, and documentation.

We'd love to hear your feedback and experience or any issues you encountered while using React Native InStyled. Feel free to open an issue on GitHub if you have any questions or suggestions.

Happy Coding!