Using baobab-react with React Native

[jeffbonasso]

Is there a very simple one component example anywhere of using baobab-react with ES6 and high-order components?

[Yomguithereal]

Hello @jeffbonasso. Isn't such an example present in this page?

[jeffbonasso]

@Yomguithereal, React Native doesn't import react-dom because it is for native apps and no dom. Here is a very basic React Native starting point...

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  View
} from 'react-native';

export default class MyReactNative1 extends Component {
  render() {
    return (
      <View>
        <Text>
          Hello from baobab!
        </Text>
      </View>
    );
  }
}

AppRegistry.registerComponent('MyReactNative1', () => MyReactNative1);

[Yomguithereal]

This would be something like this then:

import React, { Component } from 'react';
import Baobab from 'baobab';
import {root, branch} from 'baobab-react/higher-order';
import {
  AppRegistry,
  Text,
  View
} from 'react-native';

const tree = new Baobab({
  message: 'Hello from baobab!'
});

class Message extends Component {
  render() {
    return (
      <Text>
        {this.props.message}
      </Text>
    )
  }
}

const BranchedMessage({message: ['message']}, Message);

class MyReactNative1 extends Component {
  render() {
    return (
      <View>
        <BranchedMessage />
      </View>
    );
  }
}

AppRegistry.registerComponent('MyReactNative1', () => root(tree, MyReactNative1));

[jeffbonasso]

Thanks for the quick reply! I am getting an error baobab-react\higher-order.js: Couldn't find preset es2015 relative to directory, but my assumption there is something with the configuration of React Native, although all the other code seems fine for es2015.

BTW...baobab is brilliant. We have been using it on a large enterprise web-based React project.

[jeffbonasso]

You may want to do a quick compatibility test with baobab-react and React Native. React Native is getting amazing traction.

[jeffbonasso]

@Yomguithereal thanks for your help. I got it!

I had to do the following... npm install babel-preset-es2015 --save-dev npm install babel-preset-react --save-dev npm install babel-preset-stage-1 --save-dev

Not sure if there is something you can fix on your end so these aren't needed or if a React Native issue.

Also, you had a small bug in your example... You had: const BranchedMessage({message: ['message']}, Message); I changed to: const BranchedMessage = branch({message: ['message']}, Message);

Here is the full solution...

import React, { Component } from 'react';
import Baobab from 'baobab';
import {root, branch} from 'baobab-react/higher-order';
import {
  AppRegistry,
  Text,
  View
} from 'react-native';

const tree = new Baobab({
  message: 'Hello from baobab state!'
});

class Message extends Component {
  render() {
    return (
      <Text>
        {this.props.message}
      </Text>
    )
  }
}

const BranchedMessage = branch({message: ['message']}, Message);

class BaobabReactNative extends Component {
  render() {
    return (
      <View>
        <BranchedMessage />
      </View>
    );
  }
}

AppRegistry.registerComponent('BaobabReactNative', () => root(tree, BaobabReactNative));

[Yomguithereal]

I am happy it's working now and that you find baobab useful :). I have already been told about this issue with babel etc. I don't know exactly why it's doing this but I remember this is an issue with react-native and babel configs.

The thing is this repo has a dev dep on those preset to be able to build the files. However, the distributed files are already built and should not be rebuilt by the consumer code. But, for a strange reason, react-native, unlike any other library, does not like that.

Let me quickly try something to fix the issue and make this a bit more comfortable.

[Yomguithereal]

@jeffbonasso I just published a 2.1.2 version on npm changing the babel config of the repo to normally avoid clashes with react-native. Can you test it please and tell me whether this fixes your issue?

[jeffbonasso]

@Yomguithereal your fix for 2.1.2 worked perfectly. Great work!

[Yomguithereal]

I'll close this issue then :).