React Native

React Native is an open-source mobile application framework created by Facebook, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP.

Let's Get your React Native App running with SAWO 🙌
 
Requirements
​​
​ ​
​react-navigation, react-native-webview
Steps
1. Check if react-navigation is properly installed, if not please follow React navigation installation doc.
2. Check for 'react-native-webiew', it is required package for Sawo. As currently auto linking for package depencdy is not there in react-native.
1
npm i react-native-webview
Copied!
3. To use SAWO Login you would need an API key which can be obtained by creating a project in the sawo dashboard. 
4.  Once you create your project, you would need to set your project name and hostname.
    4.1. For development in a local machine, the hostname should be set to 'localhost'.
If using ''localhost" as hostname is not working for you, try "127.0.0.1" 🤓
 
    4.2. For production, the hostname should be set to your domain. 
If you are adding your domain do not add 'https://', ''http://', 'www' or even trailing backslash.
Example:
https://dev.sawolabs.com/ should be kept as dev.sawolabs.com
5. Copy the API key from the project and keep it safe and secure.
The best practice to store your API key is to store values in .env so that they are not exposed.
6. To get started with Sawo, use the npm to add the package to your project's dependencies:
1
$ npm install react-native-sawo
Copied!
Configuration
7. import Sawo package in your project
1
import Sawo from 'react-native-sawo';
Copied!
8. Configure your route.
1
import {NavigationContainer} from '@react-navigation/native';
2
import {createStackNavigator} from '@react-navigation/stack';
3
​
4
<NavigationContainer>
5
    <Stack.Navigator>
6
        <Stack.Screen
7
          name="YOUR_LOGIN_ROUTE"
8
          component={Sawo}
9
          options={{
10
            title: 'OTP Login',
11
            headerShown: false, // by default its true, to hide the header
12
          }}
13
        />
14
    </Stack.Navigator>
15
</NavigationContainer>
Copied!
9. then when calling route, we need to pass required credentials and a callback method to receive the user login data
1
navigation.navigate('YOUR_LOGIN_ROUTE', {
2
    apiKey: 'YOUR_API_KEY',
3
    secretKey: 'YOUR_SECRET_KEY',
4
    identifierType: '', // email | phone_number_sms,
5
    callback: data => {}
6
});
Copied!
10. Once the SAWO SDK is successfully set up, a login form will be rendered in the provided container as displayed in the picture below:
Final Render of SAWO Login
Congratulations !! The SAWO API is now ready to be used in your React Native application 🤘.  
You can also check out SAWO's React Native Sample Code.
It's okay, we get it! You got Stuck! 😞
 Feel free to contact us on #ask-for-help on our Discord.

Flutter

Ionic App(React - Typescript)

Last modified 25d ago

Copy link

Contents

Let's Get your React Native App running with SAWO

Requirements

Steps

Let's Get your React Native App running with SAWO 🙌

Requirements

Steps

You can also check out SAWO's React Native Sample Code.

It's okay, we get it! You got Stuck! 😞 Feel free to contact us on #ask-for-help on our Discord.

Let's Get your React Native App running with SAWO
🙌

It's okay, we get it! You got Stuck!
😞
Feel free to contact us on #ask-for-help on our Discord.