react-native: no style export in useFela hook

[vincentgrassin]

Type: Bug

Packages	Version
fela	12.2.1
fela-native	12.2.1
react-fela	12.2.1
react-native	0.71.14
expo	48.0.0

---

Description

Hello,
Thanks for the hard work done on this library.
I hope my question will not be a loss of time for you

I am using fela in a react native project. It works well so far.
I have migrated to version 12 of react-fela in order to use useFela hook but I struggle with its usage.
According to the documentation the useFela hook should export a style element.
https://fela.js.org/docs/latest/guides/usage-with-react-native#usefela

However typescript is complaining about that and my project crashes stating that style element does not exist.
Am I doing a bad implementation of it ? Or I am missing something ? Does the useFela API changed ?

Steps to reproduce

My App.js looks like :

import { createRenderer } from "fela-native";
import { RendererProvider as FelaProvider } from "react-fela";
import { AppRegistry } from "react-native";

const renderer = createRenderer();

const wrappedApp = () => (
      <FelaProvider renderer={renderer}>
              <App />
      </FelaProvider>
);

AppRegistry.registerComponent("FelaNative", wrappedApp);

export default wrappedApp;

and my basic usage is a MyComponent.tsx

import * as React from "react";
import { useFela } from "react-fela";
import { View, Text } from "react-native";

const MyComponent = () => {
  const { style } = useFela();

  return (
      <View style={style({ marginBottom: 10 })}>
        <Text>Hello</Text>
      </View>
  );
};

My problems :

• Typescript is complaining about : Property 'style' does not exist on type 'FelaHookProps<{}, {}>'.ts(2339)
• The project crashes : I run into the following error :
  

Thanks in advance for any help you could provide

[robinweser]

Heyhey! You‘re actually doing everything right, the issue is on our end. I wrote the docs without ever actually adjusting the implementation.
You can try to use const { css } = useFela() despite the wrong naming that should work.

Once Im back from vacation I can also do a quick fix release

[vincentgrassin]

Hello @robinweser thanks for your quick answer.
Indeed it is working simply using css I could have seen that !

I only have a typescript error but it is not blocking :

No overload matches this call.
  Overload 1 of 2, '(props: ViewProps | Readonly<ViewProps>): View', gave the following error.
    Type 'string' is not assignable to type 'StyleProp<ViewStyle>'.
  Overload 2 of 2, '(props: ViewProps, context: any): View', gave the following error.
    Type 'string' is not assignable to type 'StyleProp<ViewStyle>'

enjoy your holidays !