Dva: Run dvajs with react-native + expo (expo.io)

[mrikirill]

Hi there 👋

Could someone help me to start using dvajs with react-native and expo (https://expo.io) ?
I tried follow instruction from react-native example but it always return an error: AppRegistry.registerComponent does't work and return: 'Check the render method of AwakeInDevApp'
Because I need return a "start component" instead of AppRegistry.registerComponent

Need help)

[mrikirill]

And another issue: there is no diva/mobile in package. What lib I should use dva-no-route or diva-core ?

[sorrycc]

What lib I should use dva-no-route or diva-core ?

dva-no-route 。

[mrikirill]

@sorrycc Thanks!

Could you help to connect dva in my existing react-native project ?
I need only a first init of dva in App.js (start endpoint in Expo)
This is my code:

import React, {Component} from 'react';
import {StatusBar, View} from 'react-native';
import {MainNavigator} from './src/routes';
import Expo from 'expo';
import dva, {connect} from 'dva-no-router';


//dva init
const app = dva();

//dva test model
app.model({
    namespace: 'count',
    state: {
        test: 'some-test-string',
    },

    reducers: {
        changeLoginStatus(state, { payload }) {
            return {
                ...state,
                test: payload,
            };
        }
    },
    effects: {
        *addNewTest(action, { call, put }) {
            yield put({
                type: 'changeTest',
                payload: 'new-some-test-string',
            });
        },
    },

});



@connect(state => ({
    test: state.test,
}))
//App init component
class App extends Component {

    constructor() {
        super();
        this.state = {
            isReady: false
        };
    }

    async componentWillMount() {
        await Expo.Font.loadAsync({
            Roboto: require("native-base/Fonts/Roboto.ttf"),
            Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
            Ionicons: require("native-base/Fonts/Ionicons.ttf"),
        });
        this.setState({isReady: true});
    }

    render() {
        console.log("TEST STATE:", this.props.test);

        if (!this.state.isReady) {
            return <Expo.AppLoading/>;
        }
        return (
            <View style={{flex: 1}}>
                <MainNavigator>
                    <StatusBar/>
                </MainNavigator>
            </View>
        )
    }
}

app.router(() => <App />);


export default () => app.start();

But it returns warning and does't work:

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

[nihgwu]

I created a starter-kit with dva-core and react-native https://github.com/nihgwu/react-native-dva-starter

BTW, in your code, seems you should do like this:

const App = app.start();
export default App; // or export default () => <App />

[mrikirill]

@nihgwu Thank you so much! It works perfectly!
I public full example below, probably it will help someone who use react-native and expo and want to connect dvajs.

import React, {Component} from 'react';
import {StatusBar, View} from 'react-native';
import {MainNavigator} from './src/routes';
import Expo from 'expo';
import dva, {connect} from 'dva-no-router';


//dva init
const app = dva();

//dva test model
app.model({
    namespace: 'count',
    state: {
        test: 'some-test-string',
    },

    reducers: {
        changeTest(state, { payload }) {
            return {
                ...state,
                test: payload,
            };
        }
    },
    effects: {
        *addNewTest(action, { call, put }) {
            yield put({
                type: 'changeTest',
                payload: 'new-some-test-string',
            });
        },
    },

});



@connect(state => ({
    test: state.test,
}))
//App init component
class App extends Component {

    constructor() {
        super();
        this.state = {
            isReady: false
        };
    }

    async componentWillMount() {
        await Expo.Font.loadAsync({
            Roboto: require("native-base/Fonts/Roboto.ttf"),
            Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
            Ionicons: require("native-base/Fonts/Ionicons.ttf"),
        });
        this.setState({isReady: true});
    }

    render() {
        console.log("TEST STATE:", this.props.test);

        if (!this.state.isReady) {
            return <Expo.AppLoading/>;
        }
        return (
            <View style={{flex: 1}}>
                <MainNavigator>
                    <StatusBar/>
                </MainNavigator>
            </View>
        )
    }
}

app.router(() => <App />);
const DvaApp = app.start();

export default () => <DvaApp />;

@nihgwu @sorrycc Thank you guys again👍🏼

[horiuchie]

react-native-starter-dva is great demo.
That is very beneficial for understanding how to integrate dva with react-native.

Also I think we can use builtin router of dva as well.
So let me introduce react-native-dva-starter-with-builtin-router I created.

[sunnypandas]

Another demo.

[LiuJianli000]

@mrikirill
I'm try to use expo and want to connect dvajs. I tried it as you do, but it can't work. Can you show me the MainNavigator which from './src/routes'