Feature: Add Components with styles attribute

[agustito37]

Feature Requests

Checklist

• My feature request is specific to @rootstrap/react-native-use-styles.

• I've searched open issues to make sure I'm not opening a duplicate feature request

Description

It would be awesome having custom components that internally uses the useStyles hook. This is a proof of concept, we need a draft for this.

import namespace from './my-namespaced-styles';
const { Text } = namespace;

const component = () ⇒ {
  return (
    <Text styles=".global-style .local-style ">
      Hello World!
    </Text>
  );
}

In this case, the custom Text component is a wrapper of the React Native's Text component and this wrap is using the library to transform the styles prop to its respective styles.

[RafaelDavisH]

If it's open for grabs - I would like to give a shot at this issue/feature.

[agustito37]

Hi @RafaelDavisH; yes it is open, please go ahead. If you have any questions just ask and I would be glad to answer.

[HunainHumail]

Hey! I would like to work on this change request. Please assign me this
Thanks

[agustito37]

Hi @HunainHumail, let me check if @RafaelDavisH is still interested in doing this; @RafaelDavisH did you start doing this or are you planning to start this soon?

[RafaelDavisH]

Yes still interested and I'll post a draft idea approach and we'll go from there. Sorry for the delay.

[agustito37]

Great, so I'll assign this to you, no problem.

[RafaelDavisH]

@agustito37 Thank you for the patience. I am not sure if this is what you were suggesting.

import React from 'react';
import useStyles from './styles/namespaced'
import { Text } from 'react-native';



export default function Custom({ className="", children}) {
    const s = useStyles();

    return (
        <Text style={[s`${className}`]}>
           {children}
        </Text>
    )
}

Gits code blocks

[agustito37]

Don't worry @RafaelDavisH, I am grateful for your time contributing. Sorry for the long message, but the issue didn't explain to well what is expected of the feature.

Ok, the idea is there, it needs a couple of considerations to be usable by the consumers of the library. What I imagine is a factory method with the namespace as an argument that retrieves all the custom components. Maybe is not the cleanest solution, but it would be a start.

Something like this would be nice:

import { components } from 'react-native-use-styles';

const { Text } = components('my-namespace');

The challenge is how we pass that namespace; this is not documented I think, but when you import the useStyles function, it comes with a little gift; its namespace, the namespace is the key where all the styles are stored in the global cache of the library; you can retrieve the namespace of a particular hook like this:
useStyle.namespace.

react-native-use-styles/src/core/stylesManager.js

Line 118 in c05bc84

useStyles.namespace = definitionNamespace;

With this addition we would end up with something as this:

import { components } from 'react-native-use-styles';
import useStyles from './my-namespaced-styles';

const { Text } = components(useStyles.namespace);

const UserComponent = () => {
  ....
  return <Text className=".style1 .style2" />
} 

Yes, this has a lot of setup, 2 imports and 1 destructure to make it work 😢, but for now it's a good enough solution until we know that this feature is actually worth it; then we can iterate over the solution to improve it.

This could be a shorter alternative, adding the factory method to the hook as we do with the namespace; given we already have the namespace in the hook's context, we don't need to pass the namespace as an argument; I'm not a fan of this approach, though:

import useStyles from './my-namespaced-styles';

const { Text } = useStyles.components();

const UserComponent = () => {
  ....
  return <Text className=".style1 .style2" />
} 

And now, let see what components factory function does internally:

import { Text, View, ..., TouchableOpacity } from 'react-native';
import { useGlobalStyles } from 'react-native-use-styles';

const componentFactory = (namespace, NativeComponent) => {
  return ({ className, ...otherProps }) => {
    const s = useGlobalStyles(namespace);
    return <NativeComponent style={s`${className}`} {...otherProps} />
  }
}

export const components = (namespace) => {
  return {
    Text: componentFactory(namespace, Text),
    View: componentFactory(namespace, View),
    .
    .
    .
    TouchableOpacity: componentFactory(namespace, TouchableOpacity),
  };
}

This is how I imagine this feature right now; I am not sure if all this code is optimal or if it actually works 😆; this implementation is debatable and open to discussion, but I like the factory so the user doesn't need to create its own custom components.

WDYT?