Styled-jsx React native

Question

I am trying to implement styled-jsx in React native project. I am following this tutorial : https://github.com/zeit/styled-jsx

I have added this code :

.babelrc :

{
    "presets": [
        "@babel/preset-env"
    ],
    "plugins": [
        "@babel/plugin-proposal-object-rest-spread"
    ]
}

Screen :

import React, { Component } from 'react';
import { View } from 'react-native';
import _JSXStyle from 'styled-jsx/style'
export default class HomeScreen extends React.Component {

    render() {
        return (
            <div className="jsx-123">
                <p className="jsx-123">only this paragraph will get the style :)</p>
                <_JSXStyle id="123">{`p.jsx-123 {color: red;}`}</_JSXStyle>
            </div>
        )
    };
}

But I am getting following error :

============ UPDATE ============

I have removed one import _JSXStyle from 'styled-jsx/style'.

styled-jsx/babel :

module.exports = require('./dist/babel'),
    {
        "plugins": [
            ["styled-jsx/babel", { "optimizeForSpeed": false }]
        ]
    }

Now i am getting this error :

Please advice if you have tried this. May be I am missing any files then please let me know.

Thank you!

Answer 1

Your mistake
You tried the example of how it works part. Where the library developer indicated that how it looks after compile, So, please follow the doc. For your better understanding, I'm giving it here.

Firstly, install the package:

npm install --save styled-jsx

Next, add styled-jsx/babel to plugins in your babel configuration:

{
  "plugins": [
    "styled-jsx/babel"
  ]
}

Now add <style jsx> to your code and fill it with CSS:

export default () => (
  <div>
    <p>only this paragraph will get the style :)</p>

    { /* you can include <Component />s here that include
         other <p>s that don't get unexpected styles! */ }

    <style jsx>{`
      p {
        color: red;
      }
    `}</style>
  </div>
)

Note: According to the doc it should work. https://github.com/zeit/styled-jsx#getting-started