Emotion: React Native

[steida]

Is React Native version planned?

[tkh44]

Not currently.

[loganpowell]

Looks like emotion is a real contender for unseating styled-components and a native effort might be the nail in the coffin. Just sayin'

[lukewlms]

@loganpowell glamorous has native support, I'm really pleased with our results from that lib.

[loganpowell]

@lukewlms yes, but the preference is for the template string ('just css') paradygm on our end...

[collegeimprovements]

Maybe now !!!! As styled-component and glamor provide it out of the box now. But we love emotion.

[eugenehp]

+1

[brunolemos]

Why is this closed btw? Isn't there any interest in this, even by a community effort?

[tkh44]

Please put the word out that we want this.

[ilyanoskov]

yes, that will be great! looking forward to have this

[ludvigalden]

Yes! I'm loving emotion and right now it seems like I'll have to use styled-components for React Native with a similar syntax. Erase that reason to switch guys!!!11

[jonsherrard]

If anyone has any inkling on how this might be implemented, I could take a look.

I guess I could look at Styled Components...

Update: I have looked:

This is the PR from Styled Components that got it working on Native Initially: https://github.com/styled-components/styled-components/pull/53/files

I'll have a play around this week.

[DavideDaniel]

This is actually one of the make or break use cases in some decisions around alignment on which solution is ideal. But it'll have to come from community I'm guessing...

[Jaikant]

oh. I have been using emotion with react. Just stepped into react-native and I was so hoping emotion is supported.

[t49tran]

👍 +1

[zsajjad]

@DavideDaniel any update on this?

[brunolemos]

Seems like #658 is ready to be merged

[brunolemos]

658 got merged! Maybe this can be closed now? cc @steida

[Andarist]

While #658 should work in RN this is a specific use case (primitives). General RN integration could still be developed.

[brunolemos]

Just tested!

import React, { PureComponent } from 'react'

import styled from '@emotion/primitives'

const Container = styled.View`
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: #f5fcff;
`

const Title = styled.Text`
  font-size: 20px;
  text-align: center;
  color: hotpink;
`

const Description = styled.Text`
  text-align: center;
  color: #333333;
  margin-bottom: 5px;
`
export default class App extends PureComponent {
  render() {
    return (
      <Container>
        <Title>Welcome to Emotion Primitives</Title>
        <Description>Style and render primitives across targets.</Description>
      </Container>
    )
  }
}

[Enalmada]

Can someone explain/estimate the amount of community effort that remains to be able to consider emotion-js having enough react native support that it could be considered a viable alternative to styled-components, fela, or glamorous-native? The above post makes it feel so close to the finish line that alternatives have already crossed and I would love to see emotion-js keep the momentum going so that what might be the biggest reason most people can't migrate from styled-components/fela goes away.

[Andarist]

Most work was done by @nitin42 , so I think he should answer on that question :)

[jfrolich]

Awesome work folks! Especially @nitin42, will use this in the native app I'm working on!