Wasp-lang•6mo ago

React Native Integration

My SAAS app will have a mobile version. I'm using the dummy starter project for the web app, but when the time comes, I'll need to be able to do crud operations from my react native app. I know open-saas has a lot under the hood that makes web app development faster, but can I leverage any of this for my react-native app? I'm worried about how I might connect the mobile app to this one.

2 Replies

kapa.ai•6mo ago

Hi @JLegendz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- While Wasp currently doesn't officially support mobile (smartphone) client app production, there have been some discussions and attempts to integrate it with React Native. You can follow the progress and contribute to the discussion on this Github issue (https://github.com/wasp-lang/wasp/issues/1088). In the meantime, you can manually get a Wasp app running with React Native to some degree. For example, you can duplicate the functionality in .wasp/out/web-app/src/api.js for storing the auth token for future requests. For the login itself, you just need to make a post request to /auth/login with the payload {username, password}, replicating what's happening in .wasp/out/web-app/src/auth/login.js. For your own operations (i.e., not out of the box provided by Wasp) a query/action route is made (e.g., operations/get-posts) which you then make a post request passing through the args. Here's a simplified example of how you might set up a login function in a React Native app:

const onSubmitHandler = () => {
    const payload = { username: '[email protected]', password: '########' };
    fetch(`<http://localhost:3001/auth/login`,> {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(payload),
    })
    .then(async res => { 
        console.log('res', res.status);
    })
    .catch(err => {
        console.log(err);
    });
};

const onSubmitHandler = () => {
    const payload = { username: '[email protected]', password: '########' };
    fetch(`<http://localhost:3001/auth/login`,> {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(payload),
    })
    .then(async res => { 
        console.log('res', res.status);
    })
    .catch(err => {
        console.log(err);
    });
};

This is a basic example and you'll likely need to expand on it for a full-featured app. There's also an opportunity here for someone to make a React Native Wasp client library since most of the non-business logic part is the same across every potential app. Remember, this is not officially supported yet, so you might encounter some challenges along the way. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @JLegendz, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

martinsos•6mo ago

Unfortunately we don't yet have a good support for mobile side of the sotyr. YOu can expose server logic via api feature of Wasp, and then call them from your mobile app, but there isn't any more advanced integration at the moment. Check out current state of things at https://github.com/wasp-lang/wasp/issues/1088 .

GitHub

Have Wasp support producing mobile (smartphone) client app · Issue ...

Idea for the future is to have Wasp being able to produce a mobile version of the app! So for example, it could produce a mobile client/app, besides the web client. Main thing to explore here is re...

Gaming

Programming

React Native Integration