App Setup – Okto Docs

We will now start building an app using Okto and its methods. But before we begin exploring, we have included some setup steps that might seem familiar, but rest assured, they're not needed for the SDK, but they will help us in creating a better app. So, feel free to glance over those steps, since our main focus is on the features of Okto.

Let's get started with the setup.

📱

We have a react native sample app integrated with Okto SDK that you can use as a starting point. You can find it here (opens in a new tab)

Install required packages

First, let's install the necessary packages for navigation and screens. We will use @react-navigation/native. You can check the installation guide here (opens in a new tab). We will also be using react-native-dropdown for the dropdown component.

bash

pnpm i okto-sdk-react

Setup Navigation

We will start by creating a file named navigation.tsx in the root of the project. Then, we will add a stack navigator as shown below.

navigation.tsx

import { createNativeStackNavigator } from 'react-native-screens/native-stack';
 
const Stack = createNativeStackNavigator();
 
export default function Navigation() {
    return (
        <Stack.Navigator>
            // Add screens here
        </Stack.Navigator>
    );
}

Import the Navigation component into App.tsx and wrap it with NavigationContainer from @react-navigation/native.

App.tsx

import { NavigationContainer } from '@react-navigation/native';
import Navigation from './navigation';
 
...
 
export default function App() {
    return (
        <NavigationContainer>
            <Navigation />
        </NavigationContainer>
    );
}

Setup Screens

Next, create a dummy screen for navigation testing. Make a new folder named screens at the project's root and create a file named HomeScreen.tsx inside this folder.

HomeScreen.tsx

import { View, Text } from 'react-native';
 
const HomeScreen = () => {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Home Screen</Text>
        </View>
    );
}
 
export default HomeScreen;

Add the HomeScreen component in navigation.tsx and integrate it into the stack navigator.

navigation.tsx

import HomeScreen from './screens/HomeScreen';
 
export default function Navigation(){
    return (
        <Stack.Navigator initialRouteName="Home">
            <Stack.Screen name="Home" component={HomeScreen} />
        </Stack.Navigator>
    )
}

From any screen, you can navigate to the HomeScreen using navigation.navigate("Home").

Great! With that, the setup is complete. You can now start building the app with Okto. 🚀

Get Okto API Key and Setup Google Authentication Setup